/*!
 * Ankia-Theme v1.7
 * https://ankia.top/
 *
 * Licensed Apache-2.0 © 东东
 */

/* 定义全局 CSS 变量 */
:root {
	--main-bg-color: #ffffffd9; /* 主内容区域背景色 */
	--main-bg-image: url(https://s2.loli.net/2023/12/22/Hypxd4VnPmc9W7M.png); /* 主内容区域背景图 */
	--text-color: #000; /* 主要文本颜色 */
	--secondary-text-color: #777777; /* 次要文本颜色，如元数据 */
	--link-color: var(--blue); /* 链接颜色 */
	--link-hover-bg: #97aae863; /* 链接悬停背景 */
	--border-color: #0000001c; /* 分隔线和边框颜色 */
	--card-bg-color: #ffffffb3; /* 卡片背景色 */
	--dropdown-bg-color: #ffffffe8; /* 下拉菜单背景色 */
	--search-container-bg: #fff; /* 搜索容器背景色 */
	--search-input-border: #ffebcd; /* 搜索输入框边框 */
	--navigation-bar-bg: #ffffff00; /* 导航栏背景色 */
	--navigation-text-color: #232627e0; /* 导航文本颜色 */
	--site-title-color: #000; /* 站点标题颜色 */
	--table-header-bg: #d6dbddb3; /* 表格头部背景 */
	--table-cell-bg: #ffffffb3; /* 表格单元格背景 */
	--inline-code-bg: #95c8f175; /* 行内代码背景 */
	--code-block-bg: hsl(0deg 0% 26.67%); /* 代码块背景（默认已是深色，保留） */
	--blockquote-text-color: #708faf; /* 引用块文本颜色 */
	--blockquote-border-color: #708faf; /* 引用块边框颜色 */
	--blockquote-bg: rgba(102, 128, 153, .1); /* 引用块背景 */
	--copy-button-color: silver; /* 复制按钮文本颜色 */
	--copy-button-bg: #7777775c; /* 复制按钮背景 */
	--ontop-button-bg: #37363661; /* 返回顶部按钮背景 */
	--scrollbar-track-bg: #fff; /* 滚动条轨道背景 */
	--overlay-bg: #ffffff73; /* 覆盖层背景 */
	--announcement-bg: #fffdf4b3; /* 公告卡片背景 */
	--footer-text-color: #6c7380; /* 底部文本颜色 */
	--other-platform-svg-fill: #00000091; /* 社交平台图标颜色 */
	--other-platform-svg-hover-fill: #000; /* 社交平台图标悬停颜色 */
	--article-count-bg: #999ca1; /* 文章计数背景 */
	--timeline-line-color: #ccc; /* 时间线颜色 */
	--timeline-dot-color: #ccc; /* 时间线圆点颜色 */
	--timeline-dot-inner-color: #fff; /* 时间线圆点内部颜色 */
	--tag-item-text-color: #fff; /* 标签项文本颜色 */
	--admonition-border-color: var(--card-border-color); /* 提示框边框颜色 */
	--admonition-box-shadow: var(--card-box-shadow); /* 提示框阴影 */
	--table-border-color: #d79494d9; /* 表格边框颜色 */
	--search-item-hover-color: #deb887; /* 搜索结果悬停颜色 */
	--mobile-menu-bg: #ffffff80; /* 移动菜单背景 */
	--cf-article-bg: #fff; /* cf-article 背景 */
	--copy-button-hover-bg: #666; /* 复制按钮悬停背景 */
	--ontop-hover-bg: #999; /* 返回顶部悬停背景 */
	--announcement-card-bg: #fff3e5; /* 公告卡片背景 */

	--shadow: 0px 24px 32px rgba(0, 0, 0, 0.04), 0px 16px 24px rgba(0, 0, 0, 0.04), 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 0px 1px rgba(0, 0, 0, 0.04);
	--blue: #5986d1;
	--blue-strong: #307bc7;
	--gray: gray;
	--ck-color-table-caption-text: gray;
	--metadateColor: var(--secondary-text-color); /* 使用新的变量 */
}

/* 深色模式下的变量重定义 */
body.darkmode--activated {
	--main-bg-color: #1a1a1ae0; /* 深色模式主内容区域背景色 */
	--main-bg-image: none; /* 深色模式下移除背景图 */
	--text-color: #e0e0e0; /* 深色模式主要文本颜色 */
	--secondary-text-color: #aaaaaa; /* 深色模式次要文本颜色 */
	--link-color: #7cb3f2; /* 深色模式链接颜色 */
	--link-hover-bg: #4a6a9e63; /* 深色模式链接悬停背景 */
	--border-color: #ffffff1c; /* 深色模式分隔线和边框颜色 */
	--card-bg-color: #2a2a2ae0; /* 深色模式卡片背景色 */
	--dropdown-bg-color: #1a1a1ae8; /* 深色模式下拉菜单背景色 */
	--search-container-bg: #222; /* 深色模式搜索容器背景色 */
	--search-input-border: #4a4a4a; /* 深色模式搜索输入框边框 */
	--navigation-bar-bg: #1a1a1a00; /* 深色模式导航栏背景色 */
	--navigation-text-color: #e0e0e0e0; /* 深色模式导航文本颜色 */
	--site-title-color: #e0e0e0; /* 深色模式站点标题颜色 */
	--table-header-bg: #4a4a4ab3; /* 深色模式表格头部背景 */
	--table-cell-bg: #2a2a2ab3; /* 深色模式表格单元格背景 */
	--inline-code-bg: #4a4a4a75; /* 深色模式行内代码背景 */
	--code-block-bg: hsl(0deg 0% 15%); /* 深色模式代码块背景 */
	--blockquote-text-color: #a0c0e0; /* 深色模式引用块文本颜色 */
	--blockquote-border-color: #a0c0e0; /* 深色模式引用块边框颜色 */
	--blockquote-bg: rgba(50, 70, 90, .1); /* 深色模式引用块背景 */
	--copy-button-color: #ccc; /* 深色模式复制按钮文本颜色 */
	--copy-button-bg: #4a4a4a5c; /* 深色模式复制按钮背景 */
	--ontop-button-bg: #6a6a6a61; /* 深色模式返回顶部按钮背景 */
	--scrollbar-track-bg: #333; /* 深色模式滚动条轨道背景 */
	--overlay-bg: #00000073; /* 深色模式覆盖层背景 */
	--announcement-bg: #2a2a2ae0; /* 深色模式公告卡片背景 */
	--footer-text-color: #909399; /* 深色模式底部文本颜色 */
	--other-platform-svg-fill: #e0e0e091; /* 深色模式社交平台图标颜色 */
	--other-platform-svg-hover-fill: #e0e0e0; /* 深色模式社交平台图标悬停颜色 */
	--article-count-bg: #6a6a6a; /* 深色模式文章计数背景 */
	--timeline-line-color: #6a6a6a; /* 深色模式时间线颜色 */
	--timeline-dot-color: #6a6a6a; /* 深色模式时间线圆点颜色 */
	--timeline-dot-inner-color: #222; /* 深色模式时间线圆点内部颜色 */
	--tag-item-text-color: #e0e0e0; /* 深色模式标签项文本颜色 */
	--admonition-border-color: #4a4a4a; /* 深色模式提示框边框颜色 */
	--admonition-box-shadow: 0 2px 5px rgba(255, 255, 255, .1); /* 深色模式提示框阴影 */
	--table-border-color: #6a6a6a; /* 深色模式表格边框颜色 */
	--search-item-hover-color: #a0c0e0; /* 深色模式搜索结果悬停颜色 */
	--mobile-menu-bg: #1a1a1a80; /* 深色模式移动菜单背景 */
	--cf-article-bg: #2a2a2a; /* 深色模式cf-article 背景 */
	--copy-button-hover-bg: #4a4a4a; /* 深色模式复制按钮悬停背景 */
	--ontop-hover-bg: #6a6a6a; /* 深色模式返回顶部悬停背景 */
	--announcement-card-bg: #2a2a2a; /* 深色模式公告卡片背景 */

	/* blue 和 blue-strong 等 accent 颜色可以保持不变，让 darkmode.js 的滤镜处理，或者根据需要调整 */
}


body {
	font-family: "LXGW WenKai Screen", sans-serif;
	line-height: 1.5;
	font-size: 17px;
	margin: 0;
	height: 100%;
	min-height: 100vh;
	color: var(--text-color); /* 正确地为 body 设置文本颜色 */
}

code,
pre {
	font-family: LXGWWenKaiMono monospace
}

#layout {
	max-width: 100% !important;
	display: flex;
	flex-direction: row;
	margin: 0 auto;
	min-width: 100% !important;
	justify-content: center;
	height: 100%;
	min-height: calc(100vh - 130px)
}

#childLinks.grid ul {
	list-style-type: none;
	display: flex;
	flex-wrap: wrap;
	padding: 0
}

#childLinks.grid ul li {
	width: 180px;
	height: 140px;
	padding: 10px
}

#childLinks.grid ul li a {
	display: flex;
	flex-direction: column;
	height: 100%;
	width: 100%;
	border: 1px solid var(--border-color); /* 使用变量 */
	border-radius: 5px;
	justify-content: center;
	align-content: center;
	text-align: center;
	font-size: large;
	color: var(--text-color); /* 使用变量 */
}

.blogPostTopStyle {
	color: var(--blue);
	margin-right: 5px
}

#childLinks.grid ul li a:hover {
	background: var(--link-hover-bg); /* 使用变量 */
}

#childLinks.list ul {
	list-style-type: none;
	display: inline-flex;
	flex-wrap: wrap;
	padding: 0;
	margin-top: 5px
}

#childLinks.list ul li {
	margin-right: 20px
}

#toggleMenuButton {
	border: none;
	background: #ffffff00;
	z-index: 1000;
	width: 1em;
	height: 1em;
	display: none;
	color: var(--text-color); /* 使用变量 */
	cursor: pointer;
	position: absolute;
	right: .5em
}

#toggleMenuButton .feather-menu line {
	transition: all .3s ease
}

#toggleMenuButton.active .feather-menu line:first-child {
	opacity: 0;
	transform: translate(-100%, 0)
}

#toggleMenuButton.active .feather-menu line:nth-child(2) {
	transform: translate(0, 6px);
	rotate: 45deg;
	transform-origin: center
}

#toggleMenuButton.active .feather-menu line:last-child {
	transform: translate(0, -6px);
	rotate: -45deg;
	transform-origin: center
}

#parentLink {
	float: right;
	margin-top: 20px
}

#noteClippedFrom {
	padding: 10px 0 10px 0;
	margin: 20px 0 20px 0;
	color: var(--secondary-text-color); /* 使用变量 */
	border: 1px solid var(--border-color); /* 使用变量 */
	border-left: 0;
	border-right: 0
}

#toggleMenuButton::after {
	position: relative;
	top: -2px;
	left: 1px
}

#navigationBar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    backdrop-filter: blur(8px); /* 稍微增强毛玻璃效果 */
    -webkit-backdrop-filter: blur(8px);
    background-color: rgba(255, 255, 255, 0.1); /* 直接使用半透明白色，或者确保 --navigation-bar-bg 是半透明的 */
    height: 60px; /* 增加导航栏高度以容纳 APlayer */
    box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
    display: flex;
    align-items: center; /* 垂直居中 */
    justify-content: flex-start; /* 元素从左侧开始排列 */
    padding: 0 15px; /* 导航栏左右内边距 */
    gap: 15px; /* 导航栏内部元素之间的间距 */
    z-index: 9999;
    opacity: 1;
    transition: .5s ease;
}


#navigationBar a {
	cursor: pointer
}

#navigationItems {
    text-shadow: 1px 1px 10px rgb(0 0 0 / 24%);
    /* position: inherit; /* 已移除 */
    /* right: 20px; /* 已移除 */
    margin-left: auto; /* 将导航项推到最右边 */
    display: flex;
    height: 50px; /* 保持与导航栏高度一致 */
    align-items: center;
    border-top: none; /* 移除这个边框，通常导航项不需要 */
    /* 如果需要，可以添加 gap: 15px; */
    margin-right: 17px;
}


.menuLinkStyle {
	color: var(--navigation-text-color); /* 使用变量 */
}

.navigationItemsStyle {
	margin: 0 12px;
	display: flex;
	align-items: center
}

.navigationItemsStyle svg {
	transition: all .3s ease
}

.unfolding {
	rotate: -180deg
}

.menuLinkStyle:hover {
	color: var(--blue)
}

.dropDownStyle {
	position: absolute;
	display: none;
	top: 100%;
	margin-top: 5px;
	padding: 10px 7px;
	background: var(--dropdown-bg-color); /* 使用变量 */
	border-radius: 5px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
	flex-direction: column;
	align-items: flex-start;
	animation: slideIn .3s ease-in-out
}

.dropDownStyle>a {
	padding-top: 3px;
	padding-bottom: 3px
}

#siteTitle {
    /* position: absolute; /* 已移除 */
    /* left: 28px; /* 已移除 */
    margin: 0;
    display: flex;
    align-items: center;
    flex-shrink: 0; /* 防止标题被压缩 */
    /* 左右间距由父容器 #navigationBar 的 padding 和 gap 控制 */
}


#siteTitle a {
	margin-left: 10px;
	color: var(--site-title-color); /* 使用变量 */
	font-weight: 700;
	font-size: 1.5rem
}

#siteTitle>img {
	max-width: 100%;
	width: 32px
}

.hide {
	transform: translateY(-100%)
}

.showMenu {
	display: flex !important;
	justify-content: center;
	animation: fadeIn .2s ease-in-out
}

#content li {
	margin-bottom: 8px
}

a {
	color: var(--link-color); /* 使用变量 */
	text-decoration: none
}

#content a:hover {
	color: #4961ff; /* 这个颜色可能也需要变量 */
	background: var(--link-hover-bg); /* 使用变量 */
	border-radius: 5px
}

#toc-pane li::marker {
	content: none
}

@media (max-width:70em) {
	#blogItems {
		width: 100% !important
	}

	#onTop {
		right: 10px !important;
		width: 25px !important;
		height: 25px !important;
		bottom: 50px !important
	}

	.platformStyle {
		margin: 0 3px !important
	}

	.cardContainerStyle {
		width: 50vw !important;
		position: unset !important;
		display: none !important
	}

	.bloggerInfoTitleStyle {
		font-size: .7rem;
		margin-bottom: 3px;
		color: var(--text-color); /* 媒体查询内也确保使用变量 */
	}

	.bloggerInfoCardStyle {
		width: 40vw !important;
		margin: 5px auto 5px auto !important
	}

	#navigationBar {
        height: 60px;
        /* 恢复为水平 flex 布局 */
        flex-direction: row; /* 从 column 改为 row */
        justify-content: space-between; /* 站点标题左，菜单按钮右 */
        align-items: center; /* 垂直居中 */
        flex-wrap: nowrap; /* 防止换行 */
        padding: 0 5px; /* 保持内边距 */
        gap: 10px; /* 元素间距 */
        /* 移除原有的 flex-direction: column; 和 justify-content: center; */
    }


	#menuCard {
		animation: fromRightToLeftAppearing .5s ease-in-out !important
	}

	#bloggerInfoCard {
		animation: fromLeftToRightAppearing .5s ease-in-out !important
	}

	#siteTitle {
        margin: 0; /* 重置任何默认外边距 */
        flex-shrink: 0; /* 防止标题缩小 */
        order: 1; /* 确保在最左侧 */
        margin-right: auto;
    }

	#siteTitle>img {
		width: 20px
	}

	#navigationItems {
	    /* display: none !important; */
	    order: 2;
	    font-size: 13px;
	    margin-left: 0;
	    margin-right: 10px;
	}

	#navigationItems>:first-child {
		margin-left: auto !important
	}

	#navigationItems>:nth-last-child(2) {
		margin-right: auto !important
	}

	.navigationItemsStyle {
		margin: 0 5px
	}

	body {
		font-size: 16px !important
	}

	#main {
		margin: 0 !important;
		padding: 60px 30px 30px 30px !important;
		width: 80% !important
	}

	#blogItemSummaryImgContain {
		width: 100px !important;
		height: 100px !important
	}

	#toggleMenuButton {
		display: flex
	}

	.ck-content .image img {
		max-width: 90% !important
	}

	#layout {
		margin: 0
	}

	#toc-pane {
		opacity: 0;
		display: none;
		background-color: var(--card-bg-color); /* 使用变量 */
		border-radius: 5px;
		width: 50vw !important
	}

	.searchContainerStyle {
		width: 80% !important
	}

	.filmTitle,
	.watchDate {
		font-size: .6rem
	}

	#siteTitle a {
		font-size: 1rem
	}

	#aplayer {
        display: none !important; /* 在移动端隐藏 APlayer，释放空间 */
        order: 2; /* 即使隐藏也保持顺序 */
    }

	.table {
		display: block !important;
		white-space: nowrap;
		overflow-y: hidden
	}

	::-webkit-scrollbar {
		display: none
	}

	.dropDownStyle {
		left: 0;
		width: 100vw;
		align-items: center
	}

	/* 为实际的移动菜单浮层 (#mobileMenuContainer) 添加样式 */
    #mobileMenuContainer {
        display: none; /* 默认隐藏 */
        position: fixed;
        top: 0px; /* 位于导航栏下方 */
        left: 0;
        width: 100%;
        height: calc(100vh - 60px); /* 占据剩余视口高度 */
        background: var(--mobile-menu-bg); /* 使用已定义的移动菜单背景 */
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        padding-top: 20px;
        overflow-y: auto; /* 允许内容滚动 */
        z-index: 999; /* 确保在其他内容之上，但在导航栏之下 */
        animation: fadeIn .2s ease-in-out; /* 使用已定义的动画 */
        margin-top: 0px !important;
    }
    
    #mobileMenuContainer.showMenu {
        display: flex !important; /* 当 JS 添加 showMenu 类时显示 */
    }

    #toggleMenuButton {
	    display: flex !important;
	    position: static;
	    right: unset;
	    margin-left: unset;
	    order: 0;
	    flex-shrink: 0;
	    width: 1em;
	    height: 1em;
	    color: var(--navigation-text-color);
	}
}

#title {
	margin: 20px 0;
	font-size: 120%;
	text-align: center !important;
	padding-left: 0 !important
}

#content img {
	max-width: 80%;
	height: auto;
	display: block;
	margin: 0 auto;
	max-height: 30rem;
	width: auto;
	border-radius: 5px
}

img {
	width: 100%
}

.image_resized {
	width: auto !important
}

figcaption {
	display: flex;
	justify-content: center;
	font-size: smaller;
	color: var(--secondary-text-color); /* 使用变量 */
}

hr {
	height: 1px;
	border-top-color: var(--border-color); /* 使用变量 */
	border-bottom-color: #ffffff00;
	border-left-color: #ffffff00;
	border-right-color: #ffffff00
}

code.language-text-plain {
	background-color: #ffffff00
}

#metadateContent {
	position: relative;
	height: 1rem
}

.table {
	display: flex;
	justify-content: center;
	width: 100% !important;
	margin: 0
}

.table table {
	font-size: small;
	border-width: 1px;
	border-color: var(--table-border-color); /* 使用变量 */
	border-collapse: collapse
}

.table th {
	border-color: var(--border-color); /* 使用变量 */
	border-width: 1px;
	padding: 8px;
	border-style: solid;
	background-color: var(--table-header-bg); /* 使用变量 */
}

.table td {
	border-color: var(--border-color); /* 使用变量 */
	border-width: 1px;
	padding: 8px;
	border-style: solid;
	background-color: var(--table-cell-bg); /* 使用变量 */
}

h2,
h3,
h4,
h5 {
	border-bottom: 1px solid var(--border-color); /* 使用变量 */
	color: var(--text-color); /* 确保标题颜色也跟随主题 */
}

h2:before {
	content: "# ";
	color: var(--blue)
}

h3:before {
	content: "## ";
	color: var(--blue)
}

h4:before {
	content: "### ";
	color: var(--blue)
}

h5:before {
	content: "#### ";
	color: var(--blue)
}

@keyframes slideIn {
	from {
		opacity: 0;
		transform: translateY(-20px)
	}

	to {
		opacity: 1;
		transform: translateY(0)
	}
}

#main {
	width: 70vw;
	position: relative;
	flex-basis: 0;
	flex-grow: 3;
	border-radius: 10px;
	margin: 90px 20vw 0 20vw;
	padding: 0 50px;
	background-color: var(--main-bg-color) !important; /* 使用变量，但保留 !important 以防万一 */
	animation: slideIn .5s ease-in-out;
	overflow: auto;
	background: var(--main-bg-image); /* 使用变量 */
}

nav#childLinks {
	display: flex;
	flex-direction: column;
	width: 100%;
	align-items: center
}

.blogItemsMainContain {
	color: var(--text-color); /* <-- 修改：使用变量 */
	width: 90%;
	padding: 15px;
	border-radius: 5px;
	font-weight: 700;
	display: flex;
	flex-direction: column;
	position: relative;
	flex-wrap: nowrap;
	justify-content: center;
	overflow: hidden
}

#blogItems {
	display: flex;
	justify-content: center;
	height: 100%;
	width: 100%;
	margin: 10px;
	background: var(--card-bg-color); /* 使用变量 */
	border-radius: 10px;
	max-width: 1000px;
	box-shadow: 0 1px 3px rgb(0 0 0 / 18%);
	transition: transform .3s ease-in-out;
	color: var(--text-color); /* 使用变量 */
	text-decoration: none
}

#blogItems:hover {
	transform: scale(1.04)
}

.blogMetadate {
	margin-right: 1.2em;
	font-size: small;
	font-weight: 500;
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	cursor: pointer;
	flex-wrap: wrap;
	color: var(--metadateColor) !important; /* 使用变量，保留 !important */
	align-items: center
}

.blogMetadateItems {
	margin-left: 1em;
	display: flex;
	flex-direction: row;
	align-items: center
}

.categoryBadge {
	padding: 0 3px;
	border-radius: 5px
}

.shakeStyle:hover {
	animation: shake .3s ease-in-out
}

#blogItemSummaryImgContain {
	border-radius: 5px;
	padding: 2px;
	border: 1px dashed #d4bdb1; /* 这个颜色可能也需要变量 */
	margin-left: 5px;
	width: 150px;
	height: 150px;
	float: right;
	margin-right: 10px;
	margin-top: 10px;
	display: flex;
	align-items: center;
	overflow: hidden
}

#contentHeader {
	position: relative;
	height: 1rem;
	display: flex;
	justify-content: flex-end;
	margin-bottom: 40px;
	flex-wrap: wrap
}

.ck-content code {
	background-color: var(--inline-code-bg); /* 使用变量 */
	border-radius: 7px;
	font-size: 80%;
	padding: 0 4px
}

.ck-content pre code {
	background-color: #ffffff00;
	white-space: pre-wrap;
	padding: 0 !important
}

blockquote {
	color: var(--blockquote-text-color); /* 使用变量 */
	border-left: 5px solid var(--blockquote-border-color); /* 使用变量 */
	background: var(--blockquote-bg); /* 使用变量 */
	padding: 2px 1px 2px 27px;
	margin: .2rem 0 0 0;
	border-radius: 5px
}

.text-tiny {
	font-size: .8rem
}

.text-small {
	font-size: .9rem
}

.text-big {
	font-size: 1.3rem
}

.text-huge {
	font-size: 1.6rem
}

.image {
	height: 100%;
	border-radius: 50%;
	margin: 0 auto
}

pre {
	white-space: pre-wrap;
	word-wrap: anywhere;
	position: relative;
	background: var(--code-block-bg); /* 使用变量 */
	color: var(--text-color); /* 确保代码块文本可见 */
}

iframe.pdf-view {
	width: 100%;
	height: 800px
}

.ck-content pre {
	background: var(--code-block-bg); /* 使用变量 */
}

#toc-pane {
	order: 3;
	flex-direction: column;
	position: fixed;
	right: 0;
	width: 15vw;
	max-width: 250px;
	opacity: 1;
	top: 90px;
	animation: fromRightToLeftAppearing 1s ease-in-out;
	border-left: 2px solid #d9dde4; /* 这个颜色可能也需要变量 */
	padding-left: 15px;
	margin-right: 15px;
	max-height: 80vh;
	overflow: auto
}

.tocActive {
	color: var(--blue) !important
}

@keyframes fromRightToLeftAppearing {
	from {
		opacity: 0;
		transform: translateX(100%)
	}

	to {
		opacity: 1;
		transform: translateX(0)
	}
}

@keyframes fromLeftToRightAppearing {
	from {
		opacity: 0;
		transform: translateX(-100%)
	}

	to {
		opacity: 1;
		transform: translateX(0)
	}
}

#toc ul {
	padding-left: 11px
}

#toc-pane li {
	max-width: 200px;
	padding-top: 3px
}

ul#toc {
	padding: 0;
	font-size: .8rem
}

#toc a {
	color: var(--text-color); /* 使用变量 */
	font-weight: 400;
	text-decoration: unset
}

#toc li :hover {
	color: var(--blue)
}

.toc-anchor {
	margin-left: .1em;
	color: #90939936 /* 这个颜色可能也需要变量 */
}

.fLinkContainer {
	display: flex;
	flex-wrap: wrap;
	justify-content: center
}

.fLink {
	width: 140px;
	border: 1px solid var(--border-color); /* 使用变量 */
	border-radius: 5px;
	padding: 10px;
	margin: 10px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	max-height: 150px;
	min-height: 150px;
	transition: transform .3s ease-in-out;
	color: var(--text-color); /* 使用变量 */
}

.fLink:hover {
	transform: scale(1.04)
}

.fLink img {
	width: 50px !important;
	height: 50px !important;
	border-radius: 5px !important;
	margin-bottom: 10px !important
}

.fLink>#fLinkTitle {
	font-size: medium;
	font-weight: 700;
	margin-bottom: 5px;
	color: var(--text-color); /* 确保友链标题颜色也跟随主题 */
}

.fLink>#fLinkDes {
	font-size: x-small;
	color: var(--secondary-text-color); /* 使用变量 */
}

#rewardContainer {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: 50px
}

#rewardBtn {
	padding: 8px 24px;
	font-size: 18px;
	background-color: var(--blue);
	color: #fff;
	border: none;
	cursor: pointer;
	border-radius: 10px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, .1)
}

#rewardBtn:hover {
	box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
	transform: translateY(-2px);
	transition: transform .5s;
	background: #4484ef
}

#rewardImgContainer {
	display: none;
	margin-top: 20px;
	opacity: 0;
	transition: opacity .5s
}

.rewardImg {
	width: 200px;
	margin: 10px;
	border: 1px dashed var(--border-color); /* 使用变量 */
	border-radius: 4px;
	padding: 10px
}

.aliPay,
.wechatPay {
	text-align: center;
	font-size: .8125em;
	color: var(--secondary-text-color); /* 使用变量 */
}

#footer {
	text-align: center;
	font-size: medium;
	color: var(--footer-text-color); /* 使用变量 */
	margin-top: 30px;
	position: relative;
	height: 100px;
	width: 100%
}

.cardContainerStyle {
	position: fixed;
	order: 3;
	top: 70px;
	width: 18vw;
	height: auto;
	display: flex;
	flex-direction: column;
	background: #ffffff00;
	cursor: pointer
}

.bloggerInfoTitleStyle {
	font-weight: 700;
	margin-bottom: 10px;
	color: var(--text-color); /* <-- 修改：添加此行以使用变量 */
}

.bloggerInfoContentStyle {
	font-size: smaller;
	color: var(--secondary-text-color); /* 使用变量 */
	padding: 5px
}

#bloggerInfoName {
	font-weight: 700;
	margin: 5 auto
}

#bloggerInfo img {
	width: 6rem;
	height: 6rem;
	border-radius: 50%;
	transition: transform .5s
}

#bloggerInfo img:hover {
	transform: rotate(360deg)
}

#otherPlatformBar>a>svg {
	width: 1rem;
	fill: var(--other-platform-svg-fill) !important /* 使用变量 */
}

#otherPlatformBar>a :hover {
	fill: var(--other-platform-svg-hover-fill) !important /* 使用变量 */
}

.announcement {
	height: 300px;
	background: var(--announcement-card-bg); /* 使用变量 */
}

.platformStyle {
	margin: 0 10px 0 10px
}

.bloggerInfoCardStyle {
	width: 15vw;
	max-width: 250px;
	text-align: center;
	height: auto;
	padding: 10px 13px;
	border-radius: 10px;
	margin: 20px 0;
	background: var(--card-bg-color); /* 使用变量 */
	box-shadow: 2px 4px 8px 0 rgb(141 154 154 / 20%); /* 这个阴影可以保持，或者定义为变量 */
	max-height: 180px;
	transition: transform .3s ease-in-out
}

.bloggerInfoCardStyle:hover {
	transform: scale(1.04)
}

#announcement {
	background: var(--announcement-bg); /* 使用变量 */
}

.overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--overlay-bg); /* 使用变量 */
}

#articleCount {
	color: #fff;
	background: var(--article-count-bg); /* 使用变量 */
	width: 16px;
	height: 16px;
	text-align: center;
	border-radius: 50%;
	font-size: 10px;
	margin-left: 2px
}

.cardItemLinkStyle {
	font-size: .9rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin: 5px 0;
	text-align: justify;
	color: var(--text-color); /* 使用变量 */
}

#latestComment {
	display: flex;
	flex-direction: column
}

#mobileMenuContainer {
	margin-top: 60px;
	display: none;
	background: var(--mobile-menu-bg); /* 使用变量 */
	width: 100%;
	height: 100%;
	z-index: 10;
	position: fixed;
	overflow: hidden auto
}

::-webkit-scrollbar {
	width: 8px
}

::-webkit-scrollbar-track {
	background-color: var(--scrollbar-track-bg); /* 使用变量 */
}

::-webkit-scrollbar-thumb {
	background-color: var(--blue);
	border-radius: 10px
}

::-webkit-scrollbar-thumb:hover {
	background-color: var(--copy-button-hover-bg); /* 使用变量 */
}

.cf-article {
	background: var(--cf-article-bg) !important; /* 使用变量 */
	box-shadow: 0 1px 3px rgb(0 0 0 / 18%)
}

#panel-btn {
	border: none !important;
	background-color: #ffffff00 !important
}

#cf-state {
	background: #ffffff00
}

@keyframes shake {
	0% {
		transform: rotate(0)
	}

	25% {
		transform: rotate(5deg)
	}

	50% {
		transform: rotate(0)
	}

	75% {
		transform: rotate(-5deg)
	}

	100% {
		transform: rotate(0)
	}
}

.copyButtonStyle {
	position: absolute;
	top: 3px;
	right: 4px;
	border: 0;
	border-radius: 4px;
	padding: 0 10px;
	font-size: .6em;
	line-height: 1.8;
	color: var(--copy-button-color); /* 使用变量 */
	background-color: var(--copy-button-bg); /* 使用变量 */
	text-align: center
}

.copyButtonStyle:hover {
	background-color: var(--copy-button-hover-bg); /* 使用变量 */
}

#onTop {
	position: fixed;
	display: flex;
	bottom: 30px;
	right: 15vw;
	background: var(--ontop-button-bg); /* 使用变量 */
	border-radius: 50%;
	padding: 3px;
	opacity: 1;
	transition: .5s ease;
	cursor: pointer;
	z-index: 2;
	align-items: center
}

#onTop:hover {
	background: var(--ontop-hover-bg); /* 使用变量 */
	transform: translateY(-5px)
}

.searchContainerStyle {
	position: fixed;
	top: 80px;
	display: none;
	align-items: center;
	background-color: var(--search-container-bg); /* 使用变量 */
	border-radius: 5px;
	flex-direction: column;
	width: 50%;
	cursor: pointer;
	box-shadow: 0 1px 3px rgb(0 0 0 / 18%);
	padding: 20px;
	z-index: 1000;
	max-height: 60%;
	overflow: auto;
	animation: slideIn .5s ease-in-out
}

#searchInput {
	border: none;
	border-bottom: 1px solid var(--search-input-border); /* 使用变量 */
	padding: 5px;
	width: 90%;
	outline: 0;
	color: var(--text-color); /* 确保输入框文本可见 */
	background-color: transparent; /* 确保输入框背景透明，以便继承容器背景 */
}

.searchItems {
	font-weight: 700;
	color: var(--text-color); /* 确保搜索结果文本可见 */
}

.itemsTitle {
	margin: .4em 0;
	padding-left: .5em;
	border-left: 1px solid var(--border-color); /* 使用变量 */
}

.searchItems:hover {
	color: var(--search-item-hover-color); /* 使用变量 */
}

#searchResults {
	width: 90%;
	margin-top: 1em
}

#toc-pane::-webkit-scrollbar {
	width: 1px
}

#toc-pane::-webkit-scrollbar-thumb {
	background-color: var(--blue)
}

.filmBox {
	width: 15vw;
	height: 15vw;
	max-width: 150px;
	min-width: 80px;
	margin: 15px;
	box-sizing: border-box;
	max-height: 200px;
	min-height: 100px;
	overflow: hidden;
	transition: transform .3s ease;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: relative
}

.filmBox img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 5px !important;
	transition: transform .3s ease
}

.filmTitle {
	top: 0
}

.filmTitle,
.watchDate {
	width: 100%;
	text-align: center;
	color: #fff;
	border-radius: 5px 5px 0 0;
	position: absolute;
	left: 0;
	background-color: rgba(0, 0, 0, .5);
	opacity: 0;
	transition: opacity .3s ease
}

.playMusicButton {
	fill: #f3f3f36e;
	stroke: #00000087;
	width: 50% !important;
	height: 50% !important;
	position: absolute;
	top: 50%;
	left: 50%;
	opacity: 0;
	transform: translate(-50%, -50%);
	transition: opacity .3s ease
}

.watchDate {
	bottom: 0;
	border-radius: 0 0 5px 5px !important
}

.filmBox:hover {
	transform: scale(1.2)
}

.filmBox:hover .filmTitle,
.filmBox:hover .playMusicButton,
.filmBox:hover .watchDate {
	opacity: 1
}

::marker {
	color: var(--blue)
}

#musicPlayer {
	position: fixed;
	z-index: 999;
	bottom: 0
}

.todo-list {
	list-style-type: none;
	padding-inline-start: 1rem
}

#morePost {
	display: flex;
	flex-direction: row;
	align-items: center;
	font-size: 1rem;
	margin: 20px 0;
	justify-content: center
}

.timeline {
	position: relative;
	padding-left: 68px
}

.timeline::before {
	content: "";
	position: absolute;
	top: 0;
	left: 40px;
	width: 2px;
	height: 100%;
	background-color: var(--timeline-line-color); /* 使用变量 */
}

.year {
	position: relative;
	margin-bottom: 20px
}

.yearLabel {
	position: absolute;
	left: -80px;
	font-weight: 700;
	color: var(--text-color); /* 使用变量 */
}

.post {
	position: relative;
	margin-bottom: 10px;
	display: flex;
	align-items: center
}

.post::after {
	content: "";
	position: absolute;
	top: 50%;
	left: -30px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background-color: var(--timeline-dot-color); /* 使用变量 */
	transform: translateY(-50%)
}

.post::before {
	content: "";
	position: absolute;
	top: 50%;
	left: -30px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: var(--timeline-dot-inner-color); /* 使用变量 */
	transform: translateY(-50%)
}

.postDate {
	margin-right: 10px;
	flex-shrink: 0;
	width: 3rem;
	color: var(--secondary-text-color); /* 使用变量 */
}

.tagCloud {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 10px;
	padding: 20px
}

.tagItem {
	display: inline-block;
	padding: 5px 10px;
	margin: 5px;
	border-radius: 5px;
	font-size: 16px;
	font-weight: 700;
	color: var(--tag-item-text-color); /* 使用变量 */
	box-shadow: 0 2px 5px rgba(0, 0, 0, .3);
	transition: transform .3s ease;
	cursor: pointer
}

.tagItem:hover {
	transform: scale(1.1)
}

.admonition {
  --accent-color: var(--admonition-border-color); /* 使用变量 */
  border: 1px solid var(--accent-color);
  box-shadow: var(--admonition-box-shadow); /* 使用变量 */
  background: var(--card-background-color); /* 使用变量 */
  border-radius: 0.5em;
  padding: 1em;
  margin: 1.25em 0;
  position: relative;
  padding-inline-start: 2.5em;
  overflow: hidden;
  color: var(--text-color); /* 确保文本可见 */
}
.admonition p:last-child {
  margin-bottom: 0;
}
.admonition p,
h2 {
  margin-top: 0;
}
.admonition.note {
  --accent-color: #69c7ff;
  --card-background-color: #2F3D45;
}
.admonition.tip {
  --accent-color: #40c025;
  --card-background-color: #293C25;
}
.admonition.important {
  --accent-color: #9839f7;
  --card-background-color: #362844;
}
.admonition.caution {
  --accent-color: #ff2e2e;
  --card-background-color: #452626;
}
.admonition.warning {
  --accent-color: #e2aa03;
  --card-background-color: #41381F;
}
.admonition::before {
  color: var(--accent-color);
  font-family: boxicons !important;
  position: absolute;
  top: 1em;
  inset-inline-start: 1em;
}
.admonition.note::before {
  content: "\eb21";
}
.admonition.tip::before {
  content: "\ea0d";
}
.admonition.important::before {
  content: "\ea7c";
}
.admonition.caution::before {
  content: "\eac7";
}
.admonition.warning::before {
  content: "\eac5";
}


.darkmode-toggle {
    z-index: 999;
}

#blogItemTitle {
    color: var(--text-color); /* 确保标题使用主文本颜色 */
}

#blogItemSummary {
    color: var(--secondary-text-color); /* 摘要通常使用次要文本颜色，更柔和 */
}