/* 自定义样式 */
:root {
    /* 主题色 */
    --primary-color: #3280fc;
    /* 全局变量 */
    --spacing: 1.5rem;
    
    --margin0_5: .5rem;
    --margin0_75: .75rem;
    --margin: 1rem;
    --margin1_5: 1.5rem;
    
    --radius: 4px;
    --radius-img: 2px;
    --avatar-size: 46px;
    --transition: all .3s ease;
    /* 图片卡片 */
    --card-img-x: 228px;
    --card-img-y: 152px;

    /* 明亮色 */
    --bg-transparent: rgb(255, 255, 255, .85);
    --text-color: #333;
    --text-light: #666;
    --text-lighter: #999;
    --bg-color: #fff;
    --bg-light: #f8f9fa;
    --border-color: #eaeaea;
    --shadow: 0 2px 12px rgba(0, 0, 0, .05);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, .08);

}

.dark {
    /* 暗黑色 */
    --bg-transparent: rgb(26, 26, 26, .85);
    --text-color: #e0e0e0;
    --text-light: #a0a0a0;
    --text-lighter: #707070;
    --bg-color: #1a1a1a;
    --bg-light: #2a2a2a;
    --border-color: #3a3a3a;
    --shadow: 0 2px 12px rgba(0, 0, 0, .2);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, .3);
}

/* ===== 公用 begin ===== */
/* 动画 begin */
@keyframes _fadeIn {
    from {opacity: 0;}
    to {opacity: 1;}
}
/* 动画 end */

._hide {
    display: none !important;
}

._blur5 {
    backdrop-filter: blur(5px);
}

/* 文字 begin */
._text_clamp_1, ._text_clamp_2, ._text_clamp_3 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

._text_clamp_1 {
    -webkit-line-clamp: 1;
}

._text_clamp_2 {
    -webkit-line-clamp: 2;
}

._text_clamp_3 {
    -webkit-line-clamp: 3;
}

/* 文字 end */

/* 分页 begin */
._pager > div:first-child {
    margin-right: var(--margin0_5);
}
/* 分页 end */

/* 表单控件 begin */
._form {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

._form input, ._form textarea {
    width: 100%;
    padding: var(--margin0_5) var(--margin);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    background-color: var(--bg-transparent);
    color: var(--text-color);
    transition: var(--transition);
}

._form input:focus, ._form textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(50, 128, 252, 0.1);
}

._form textarea {
    resize: none;
}

/* 表单控件 end */

/* 模块 begin */
._section {
	display: flex;
	flex-direction: column;
	gap: var(--spacing);
}

._section .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

._section .section-header > h2 {
    --size: 1.3rem;
    font-size: var(--size);
    line-height: var(--size);
    font-weight: 700;
}

._section .section-header > a {
	--size: .85rem;
    font-size: var(--size);
    line-height: var(--size);
    color: var(--primary-color);
    font-weight: 450;
}

/* 模块 end */

/* 卡片 begin */
._card {
    padding: var(--spacing);
    border: 1px solid var(--border-color);
    background: var(--bg-transparent);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    transition: var(--transition);
}

._card:hover {
    box-shadow: var(--shadow-lg);
}

._card-bounce:hover {
    transform: translateY(-2px);
}

._card-title {
	color: var(--text-color);
    margin-bottom: var(--margin);
    padding-bottom: var(--margin);
    border-bottom: 1px solid var(--border-color);
    
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

._card-title span {
	--size: 1.1rem;
	font-size: var(--size);
	line-height: var(--size);
	font-weight: 600;
	display: flex;
	flex-direction: row;
	align-items: center;
}

._card-title span i {
	--size: 1.1rem;
    font-size: var(--size);
    line-height: var(--size);
    margin-right: var(--margin0_5);
}

/* 卡片 end */

/* 标签 */
._tag {
    display: flex;
    flex-wrap: wrap;
    gap: var(--margin0_5);
    align-items: center;
}

._tag > a:hover {
	transform: translateY(-2px);
}

/* ===== 公用 end ===== */

/* ===== 通用 begin ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
}

.container {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 var(--spacing);
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    line-height: 1.6;
    transition: background-color 0.3s, color 0.3s;
    position: relative;
    min-height: 100vh;
}

.search-select {
    color: red !important;
}

.empty-card {
    text-align: center;
}

/* 背景 begin */
.background-pattern {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: var(--bg-light) url('/img/svg/bg.svg') no-repeat center/cover;
}

.dark .background-pattern {
    background: linear-gradient(125deg, var(--color-primary-50) 0, var(--color-primary-50) 40%, var(--color-primary-100) calc(40.1%), var(--color-primary-100) 60%, var(--color-primary-200) calc(60.1%), var(--color-primary-200) 72%, var(--color-primary-500) calc(72.1%), var(--color-primary-500) 100%);
}
/* 背景 end */

/* 顶部导航 begin */
.header {
    position: sticky;
    top: 0;
    z-index: 20000;
    backdrop-filter: blur(5px);
    transition: background-color 0.3s, border-color 0.3s;
}

.header-down {
    box-shadow: var(--shadow);
}

.nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--margin) 0;
}

.nav .logo {
	--size: 1.8rem;
	font-size: var(--size);
	line-height: var(--size);
    font-weight: 700;
    color: var(--primary-color);
}

.nav-links {
    display: flex;
    gap: var(--margin);
}

.nav-links a {
	--size: .9rem;
    font-size: var(--size);
    line-height: var(--size);
    font-weight: 600;
}

.nav-links a:hover,
.nav-links a.active {
    color: var(--primary-color);
}

.nav-actions {
    display: flex;
    gap: var(--margin);
    align-items: center;
}

/* 搜索框 */
.search-box {
    position: relative;
    display: flex;
    align-items: center;
}

.search-box input {
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: var(--margin0_5) var(--margin) var(--margin0_5) 2.5rem;
    width: 100%;
    font-size: 0.9rem;
    transition: var(--transition);
    background-color: var(--bg-transparent);
    color: var(--text-color);
}

.search-box input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(50, 128, 252, 0.1);
}

.search-box label {
    position: absolute;
    top: 0.6rem;
    left: var(--margin);
}

/* 主题切换按钮 */
.theme-toggle {
    background: var(--bg-transparent);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px;
    position: relative;
    width: 60px;
    min-width: 60px;
    height: 30px;
    transition: var(--transition);
}

.theme-toggle:before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 24px;
    height: 24px;
    background: var(--primary-color);
    border-radius: 50%;
    transition: transform 0.3s ease;
}

.dark .theme-toggle:before {
    transform: translateX(30px);
}

.theme-toggle-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    font-size: 1rem;
    z-index: 1;
}

.theme-toggle .icon-sun, .dark .theme-toggle .icon-moon {
    color: #ffffff !important;
}

/* 顶部导航 end */

/* 移动端底部导航 begin */
.mobile-navbar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: none;
    justify-content: space-around;
    align-items: center;
    height: 58px;
    background-color: var(--bg-transparent);
    border-top: 1px solid var(--border-color);
    backdrop-filter: blur(5px);
    z-index: 20000;
}

.mobile-navbar > a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-decoration: none;
    color: var(--text-light);
    transition: color 0.3s;
}

.mobile-navbar > a.active,
.mobile-navbar > a:hover {
    color: var(--primary-color);
}

.mobile-navbar > a i {
    font-size: 1.2rem;
    margin-bottom: 2px;
}

.mobile-navbar > a span {
    font-size: 0.75rem;
}
/* 移动端底部导航 end */

/* 中间内容部分布局 begin */
.main {
    padding: var(--spacing) 0;
}

/* 内容网格 */
.content-grid {
    display: grid;
    grid-template-columns: 9fr 4fr;
    gap: var(--spacing);
}

/* 左边主区域 begin */
.main-left {
    min-width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--spacing);
}
/* 左边主区域 end */

/* 右边侧边栏 */
.sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--spacing);
    position: sticky;
    top: 100px;
    height: fit-content;
}

/* 中间内容部分布局 end */

/* 右边侧栏 begin */
/* 作者信息 begin */
.author-info {
    display: flex;
    align-items: center;
    gap: var(--margin);
    margin-bottom: var(--margin);
}

.author-avatar {
    width: var(--avatar-size);
    height: var(--avatar-size);
}

.author-details h3 {
    margin-bottom: var(--margin0_5);
}

.author-details p {
	--size: .85rem;
    font-size: var(--size);
    line-height: var(--size);
    color: var(--text-light);
}

.author-excerpt {
    font-size: .9rem;
    color: var(--text-light);
}

/* 作者信息 end */

/* 二维码展示样式 begin */
.qrcode {
    display: flex;
    align-items: center;
    gap: var(--margin);
}

.qrcode-placeholder {
	--size: 120px;
    width: var(--size);
    height: var(--size);
    background-color: var(--bg-light);
    border: 5px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-img);
    flex-shrink: 0;
}

.qrcode-placeholder canvas {
    border-radius: var(--radius-img);
}

.qrcode-text {
	font-size: 0.85rem;
	line-height: 1.6;
    flex: 1;
}

.qrcode-text .small {
    color: var(--text-light);
}

/* 二维码展示样式 end */

/* 热门文章 begin */
.hot-article > div {
    gap: var(--margin0_75);
    padding: var(--margin0_75) 0;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
}

.hot-article > div:last-child {
    border-bottom: none;
}

.hot-article-index {
    background-color: var(--bg-light);
    color: var(--text-light);
    width: 24px;
    height: 24px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
    flex-shrink: 0;
}

.hot-article-index.top {
    background-color: var(--primary-color);
    color: white;
}

.hot-article-title {
	--size: 0.9rem;
    font-size: var(--size);
    line-height: var(--size);
    color: var(--text-color);
}

.hot-article-title:hover {
    color: var(--primary-color);
}

/* 热门文章 end */

/* 登录|注册 begin */
.login-link {
	--size: 0.9rem;
    font-size: var(--size);
    line-height: var(--size);
    margin-top: var(--margin);
    padding-top: var(--margin);
    border-top: 1px solid var(--border-color);
    text-align: center;
    color: var(--text-light);
}

.login-link a {
    color: var(--primary-color);
    text-decoration: none;
    cursor: pointer;
}

.login-link a:hover {
    text-decoration: underline;
}

/* 登录|注册 end */

/* 第三方登录 begin */
.third-login-title {
    margin-top: var(--spacing);
    text-align: center;
    font-size: 0.9rem;
    color: var(--text-light);
    margin-bottom: var(--margin);
    position: relative;
}

.third-login-title::before,
.third-login-title::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 30%;
    height: 1px;
    background-color: var(--border-color);
}

.third-login-title::before {
    left: 0;
}

.third-login-title::after {
    right: 0;
}

.third-login-icons {
    display: flex;
    justify-content: center;
    gap: var(--margin1_5);
}

.third-login-icons > a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    transition: var(--transition);
    text-decoration: none;
}

.third-login-icons > a:hover {
    transform: scale(1.2);
}

.third-login-icons img {
    border-radius: 50%;
}

/* 第三方登录 end */

/* 登录向导 begin */
.user-guide {
    display: flex;
    flex-direction: column;
    gap: var(--margin);
}

.user-guide > div {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--margin);
}

.user-guide span {
    color: var(--text-color);
}

/* 登录向导 end */

/* 登录成功 begin */
.user-profile {
    display: flex;
    flex-direction: column;
    gap: var(--margin);
}

.profile-header {
    display: flex;
    align-items: center;
    gap: var(--margin);
    padding-bottom: var(--margin);
    border-bottom: 1px solid var(--border-color);
}

.user-avatar {
    width: var(--avatar-size);
    height: var(--avatar-size);
    background-color: var(--primary-color);
}

.user-info h3 {
	--size: 1.2rem;
    font-size: var(--size);
    line-height: var(--size);
    margin-bottom: var(--margin0_5);
}

.user-info p {
	--size: .8rem;
    font-size: var(--size);
    line-height: var(--size);
    color: var(--text-light);
}

.profile-actions {
    display: flex;
    flex-direction: column;
    gap: var(--margin);
}

/* 登录成功 end */

/* 账户登录弹窗 begin */
.account-dialog {
    padding: 0;
    margin: auto;
    background-color: var(--bg-color);
    border-radius: var(--radius);
    animation: _fadeIn .15s ease-out;
}

.account-dialog::backdrop {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgb(0, 0, 0, 0.6) !important;
    backdrop-filter: blur(1.5px);
    animation: _fadeIn .15s ease-out;
}

.account-modal {
	--size: 380px;
	width: var(--size);
	max-width: var(--size);
}

/* 账户登录弹窗 end */

/* 联系我们 begin */
.contact-info {
    --size: .9rem;
    font-size: var(--size);
    line-height: var(--size);
    color: var(--text-light);
    margin-bottom: var(--margin);
}

.contact-info p {
    margin-bottom: var(--margin0_75);
}
/* 联系我们 end */
/* 右边侧栏 end */

/* 页脚 begin */
.footer {
    background-color: var(--bg-transparent);
    padding: var(--spacing) 0;
    transition: background-color 0.3s, border-color 0.3s;
}

.footer-content {
    display: flex;
    justify-content: center;
    align-items: center;
}

.copyright {
    font-size: 0.8rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 页脚 end */

/* 返回顶部按钮 begin */
.back-to-top {
	--size: 50px;
	width: var(--size);
    height: var(--size);
    position: fixed;
    bottom: 114px;
    right: 20px;
    background-color: var(--bg-transparent);
    color: var(--primary-color);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow);
    transition: all 0.3s ease;
    opacity: 0;
    visibility: hidden;
    z-index: 99999;
}

.back-to-top.show {
    opacity: 1;
    visibility: visible;
}

.back-to-top:hover {
    transform: scale(1.1);
}

/* 返回顶部按钮 end */

/* 文章卡片 start */
/* 精选文章 */
.featured-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing);
}

/* 文章列表 */
.article-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing);
}

.article-card .article-image {
    margin-top: -5px;
	overflow: hidden;
	display: flex;
    align-items: center;
	justify-content: center;
	border-radius: var(--radius-img);
	/*background: url('/img/svg/img-loading.svg') no-repeat center/cover;*/
}

.article-card {
    align-items: center;
}

.article-card.featured {
    grid-column: span 2;
    display: flex;
    gap: var(--spacing);
    align-items: center;
}

.article-card.featured .article-image {
    width: var(--card-img-x);
    height: var(--card-img-y);
    flex-shrink: 0;
    font-size: 3rem;
}

.article-card.horizontal {
    display: flex;
    gap: var(--margin);
}

.article-card.horizontal .article-image {
    width: var(--card-img-x);
    height: var(--card-img-y);
    flex-shrink: 0;
}

.article-card.vertical {
    display: flex;
    flex-direction: column;
}

.article-card.vertical .article-image {
    width: 100%;
    height: 150px;
    margin-bottom: var(--margin);
}

.article-card.vertical > a:first-child {
	width: 100%;
}

.article-card .article-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.article-card.vertical .article-image img {
    height: auto;
}

.article-content {
	flex-grow: 1;
    overflow: hidden;
    
    display: flex;
    flex-direction: column;
    gap: var(--margin0_75);
}

.article-meta {
	--size: 0.85rem;
    font-size: var(--size);
    line-height: var(--size);
    color: var(--text-lighter);
    
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--margin0_75);
}

.article-title {
    font-size: 1.25rem;
    line-height: 1.625rem;
    font-weight: 700;
    margin-bottom: var(--margin0_75);
}

.article-title a:hover {
    color: var(--primary-color);
}

.article-excerpt {
    font-size: .9rem;
    color: var(--text-light);
    text-align: left;
}

.article-footer {
    color: var(--text-lighter);
    padding-top: var(--margin0_5);
    border-top: 1px solid var(--border-color);
    
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.article-stats {
    display: flex;
    flex-direction: row;
    gap: var(--margin0_5);
    align-items: center;
}

.article-stat {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    
    --size: 0.75rem;
    font-size: var(--size);
    line-height: var(--size);
}

.article-footer .read-time {
	--size: .75rem;
    font-size: var(--size);
    line-height: var(--size);
}

/* 文章卡片 end */

/* 下载资源 begin */
.download-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing);
}

.download-grid ._card {
    text-align: center;
    padding: var(--margin1_5) var(--margin);
    display: flex;
    flex-direction: column;
    gap: var(--margin0_75);
}

.download-icon img {
	--size: 100px;
    width: var(--size);
    height: var(--size);
    margin: 0 auto;
    border-radius: var(--radius);
}

.download-title {
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 600;
}

.download-desc {
	font-size: .8rem;
	line-height: 1.2rem;
    color: var(--text-light);
    text-align: left;
    overflow: hidden;
}

.download-footer {
	display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.download-footer button {
    transition: var(--transition);
}

.download-footer button:hover {
	transform: scale(1.125);
}

.download-footer-info {
	--size: .7rem;
    font-size: var(--size);
    line-height: var(--size);
    
	text-align: left;
	display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: var(--margin0_5);
}

/* 下载资源 end */

/* 留言|评论模块 begin */
.message-form button {
    width: 120px;
}

.message-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing);
}

.message-item {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: var(--margin);
}

.message-avatar img {
    width: var(--avatar-size);
    height: var(--avatar-size);
    background-color: var(--primary-color);
    border-radius: 50%;
    object-fit: cover;
}

.message-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--margin0_5);
}

.message-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.message-header > h3 {
    --size: 1rem;
	font-size: var(--size);
	line-height: var(--size);
    font-weight: 600;
    color: var(--primary-color);
}

.message-header > span {
    --size: .8rem;
    font-size: var(--size);
    line-height: var(--size);
    color: var(--text-lighter);
}

.message-text {
    --size: .8rem;
    font-size: var(--size);
    line-height: 1.4;
    color: var(--text-color);
}

.reply-list {
    padding-left: var(--margin);
    border-left: 2px solid var(--border-color);
    margin-top: var(--margin0_5);
    
    display: flex;
    flex-direction: column;
    gap: var(--margin0_5);
}

.reply-list .message-avatar img {
    --num: 38px;
    width: var(--num);
    height: var(--num);
}

.reply-list .message-header > h4 {
    --size: .9rem;
    font-size: var(--size);
    line-height: var(--size);
    font-weight: 500;
}

.reply-list .message-header > span {
    --size: .75rem;
    font-size: var(--size);
    line-height: var(--size);
}

.reply-list .message-text {
    font-size: .75rem;
    line-height: 1.2rem;
}
/* 留言|评论模块 end */

/* ===== 通用 end ===== */

/* index begin */
/* 英雄区域 */
.hero {
    background: linear-gradient(135deg, var(--primary-color), #6c5ce7);
    border-radius: var(--radius);
    padding: 4.6rem var(--margin);
    color: white;
    margin-bottom: var(--margin1_5);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.hero:before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 300px;
    height: 300px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
}

.hero h1 {
	--size: 2.5rem;
    font-size: var(--size);
    line-height: var(--size);
    margin-bottom: var(--margin);
    font-weight: 700;
}

.hero p {
	--size: 1.125rem;
    font-size: var(--size);
    line-height: var(--size);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    opacity: 0.9;
}

/* 友链模块 */
.friend-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--margin0_5);
}

.friend-list > a {
    color: var(--text-light);
}
/* index end */

/* 关于页面 begin */
.timeline {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--spacing);
}

.timeline::after {
    content: '';
    position: absolute;
    width: 5px;
    background-color: var(--border-color);
    top: 0;
    bottom: 0;
    left: 120px;
    margin-left: -2px;
}

.timeline-item {
    position: relative;
    width: 100%;
    box-sizing: border-box;
    padding-left: 142px;
}

.timeline-item::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    left: 110px;
    background-color: var(--primary-color);
    border: 4px solid var(--bg-color);
    top: calc(50% - 8px);
    border-radius: 50%;
    z-index: 1;
    right: auto;
}

.timeline-info {
	position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 110px;
    padding-right: var(--margin0_5);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: var(--margin0_5);
}

.timeline-date {
    color: var(--primary-color);
    font-weight: bold;
    --size: 0.9rem;
    font-size: var(--size);
    line-height: var(--size);
}

.timeline-content {
    flex: 1;
    line-height: 1.6;
    overflow: hidden;
    text-overflow: ellipsis;
}

.timeline-content {
	padding: var(--margin);
}

/* 关于页面 end */

/* 收藏页面 begin */
.favorite-list {
	display: flex;
	flex-direction: column;
	gap: var(--spacing);
}

.favorite-card {
    overflow: hidden;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.favorite-card .favorite-title {
	--size: .9rem;
    font-size: var(--size);
    line-height: var(--size);
    width: 66%;
}

.favorite-card .favorite-opt {
    transition: var(--transition);
    margin-right: -92px;
}

.favorite-opt span {
    margin-right: 24px;
}

.favorite-card:hover .favorite-opt {
    margin-right: 0;
    opacity: 1;
}

/* 收藏页面 end */

/* 错误页面 begin */
.error-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.error-container > div:first-child {
	flex-grow: 2;
}

.error-container > div:last-child {
    flex-grow: 1;
}

.error-info {
	display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing);
}

.error-code {
	--size: 10rem;
	font-size: var(--size);
	line-height: var(--size);
    font-weight: 700;
    color: var(--primary-color);
}

.error-message {
    --size: .9rem;
    font-size: var(--size);
    line-height: var(--size);
    color: var(--text-color);
}

.error-actions {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: var(--spacing);
}

.error-page .footer {
	position: fixed;
    bottom: 0;
    width: 100%;
}

/* 错误页面 end */

/* 内容详情 begin */
.article-details {
	display: flex;
	flex-direction: column;
	gap: var(--margin);
}

.article-details > h2 {
	word-break: break-all;
}

.article-details .article-footer {
	padding-top: var(--margin);
}

.article-desc-opt {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.article-desc-opt select {
    margin-left: 6px;
    width: 100px;
    padding: 4px 6px;
    border-radius: var(--radius);
    background-color: var(--bg-transparent);
    appearance: none;
    cursor: pointer;
    transition: var(--transition);
    box-shadow: var(--shadow);
}

.article-desc-opt select:focus {
    outline: none;
    border-color: var(--border-color);
    box-shadow: var(--shadow);
}

.article-description img {
    background-color: transparent !important;
    border-radius: var(--radius-img) !important;
}

/* 文章html样式修复 begin */
/* 修复md样式问题 */
.md-editor {
    height: auto !important;
    background-color: transparent !important;
    border: none;
}

.md-editor .md-editor-preview {
    padding: 0 !important;
}

.md-editor-preview pre {
	padding: 0 !important;
	white-space: pre-wrap !important;
}

.md-editor-preview blockquote {
	border-radius: 2px !important;
}

.md-editor-preview figure {
	width: 100%;
}

/* 修复第三方文章样式问题 */
.article-third {
    font-size: 13px !important;
    line-height: 1.6rem !important;
}

.article-third img {
    margin: 6px auto;
}

.article-third table {
	margin: 12px 0;
	table-layout: fixed;
	width: 100% !important;
    max-width: 100% !important;
    font-size: 13px !important;
}

.article-third table td,
.article-third table th {
    padding: 4px 6px !important;
    border: 1px solid var(--border-color) !important;
	word-wrap: break-word !important;
	white-space: pre-wrap !important;
}

.article-third ul {
    width: auto !important;
}

.article-third pre {
	border: 1px solid var(--border-color) !important;
	background-color: var(--bg-light) !important;
    border-radius: 2px !important;
    margin: 12px 0 !important;
    padding: 15px !important;
    white-space: pre-wrap !important;
}

/* 修复第三方文章夜间模式文字问题 */
.dark .article-third a {
	color: var(--primary-color) !important;
}

.dark .article-third div,
.dark .article-third th,
.dark .article-third td,
.dark .article-third ul,
.dark .article-third li,
.dark .article-third ol,
.dark .article-third h1,
.dark .article-third h2,
.dark .article-third h3,
.dark .article-third h4,
.dark .article-third h5,
.dark .article-third h6,
.dark .article-third font,
.dark .article-third p,
.dark .article-third code,
.dark .article-third strong,
.dark .article-third section,
.dark .article-third span {
    color: var(--text-color) !important;
}

.dark .article-third table,
.dark .article-third table thead,
.dark .article-third table tbody,
.dark .article-third table tr,
.dark .article-third table td,
.dark .article-third table th,
.dark .article-third ul,
.dark .article-third ol,
.dark .article-third h1,
.dark .article-third h2,
.dark .article-third h3,
.dark .article-third h4,
.dark .article-third h5,
.dark .article-third h6,
.dark .article-third font,
.dark .article-third p,
.dark .article-third span,
.dark .article-third strong,
.dark .article-third code,
.dark .article-third figure,
.dark .article-third div {
    background-color: transparent !important;
}

.dark .article-third blockquote {
    background: transparent !important;
}

/* 修复笔记夜间模式文字问题 */
.dark .my-note p,
.dark .my-note li,
.dark .my-note span,
.dark .my-note th,
.dark .my-note td,
.dark .my-note h1,
.dark .my-note h2,
.dark .my-note h3,
.dark .my-note h4,
.dark .my-note h5,
.dark .my-note h6 {
    color: var(--text-color) !important;
}

.dark .my-note blockquote {
    background-color: var(--bg-color);
}

.dark .my-note table thead,
.dark .my-note table tbody,
.dark .my-note table tr,
.dark .my-note table td,
.dark .my-note table th {
    background-color: transparent !important;
}

.dark .github-theme .md-editor-code .md-editor-code-head,
.dark .github-theme .md-editor-code code,
.dark .vuepress-theme .md-editor-code .md-editor-code-head,
.dark .vuepress-theme .md-editor-code code,
.dark .smart-blue-theme .md-editor-code .md-editor-code-head,
.dark .smart-blue-theme .md-editor-code code,
.dark .cyanosis-theme .md-editor-code .md-editor-code-head,
.dark .cyanosis-theme .md-editor-code code {
    background-color: var(--bg-light);
}

.dark .github-theme code {
    color: var(--primary-color);
    background-color: var(--bg-light);
}
/* 文章html样式修复 end */

/* 附件下载 begin */
.article-download {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--margin0_5);
}

.download-info > h5 > span {
    color: var(--primary-color);
}

.download-info > p {
    margin-top: var(--margin0_5);
    font-size: 0.75rem !important;
}
/* 附件下载 end */

/* 上下篇min begin */
.article-go {
	display: none;
	align-items: center;
	gap: var(--margin);
}

.article-go a {
	flex-grow: 1;
}
/* 上下篇min end */

/* 文章说明 begin */
.note-memo {
    display: flex;
    align-items: center;
    gap: var(--spacing);
}

.note-memo > div:first-child {
    text-align: center;
}

.note-memo > div:last-child {
    font-size: .9rem;
    overflow: hidden;
}

.wx-qrcode {
	--size: 100px;
    width: var(--size);
    height: var(--size);
    margin-bottom: var(--margin0_5);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-img);
}

.wx-qrcode img {
    border-radius: var(--radius-img);
}
/* 文章说明 end */

/* 上下篇 begin */
.article-np {
	display: flex;
	flex-direction: row;
	gap: var(--spacing);
}

.article-np > * {
	width: 50%;
}

.article-np .article-image {
    width: 100%;
    height: 150px;
    margin-bottom: var(--margin);
}

.article-np .article-footer a {
	margin: 0 1px 1px 0;
}
/* 上下篇 end */

/* 相关文章 begin */
.related-article > div {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.related-article > div a {
    width: 70%;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 1;
}
/* 相关文章 end */

/* 内容详情 end */

/* 我的页面 begin */
.my-links {
	display: flex;
    flex-direction: column;
    gap: var(--margin);
}
/* 我的页面 end */

/* 响应式设计 */
@media (max-width: 1024px) {
	/* 整体间隙 */
	:root {
	    --spacing: 1rem;
	}
	
    /* 主布局 */
    .content-grid {
        grid-template-columns: 1fr;
    }

    /* 右边模块 */
    .sidebar {
        position: static;
    }

    /* 精选文章 */
    .featured-grid {
        grid-template-columns: 1fr;
    }
    
    /* 导航文字间隙 */
    .nav-links {
        gap: var(--margin0_5);
    }

    /* 文章卡片 begin */
    .article-card.featured {
        grid-column: span 1;
    }

    .article-card.vertical {
        grid-column: span 1;
        display: flex;
        flex-direction: row;
        gap: var(--spacing);
        align-items: center;
    }
    
    .article-card.vertical > a:first-child {
		width: auto;
	}

    .article-card.vertical .article-image {
        min-width: var(--card-img-x) !important;
        max-width: var(--card-img-x) !important;
        min-height: var(--card-img-y) !important;
        max-height: var(--card-img-y) !important;
    }
    /* 文章卡片 end */

    
    /* 隐藏内容 */
    .max1024 {
        display: none;
    }
}

@media (max-width: 768px) {
    /* 顶部导航 begin */
    .nav-links {
        display: none;
    }
    /* 顶部导航 end */
    
    /* 底部导航 begin */
    .mobile-navbar {
        display: flex;
    }
    
    body {
        padding-bottom: 58px;
    }
    /* 底部导航 end */
    
    /* 下载资源 */
    .download-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* index页面 begin */
    .hero {
        padding: 3.2rem var(--margin);
    }

	.hero h1 {
	    --size: 1.8rem;
	    font-size: var(--size);
	    line-height: var(--size);
	}
	
	.hero p {
	    --size: .85rem;
	    font-size: var(--size);
	    line-height: var(--size);
	}
    /* index页面 end */
    
    /* 详情页面 begin */
    .article-go {
        display: flex;
    }
    /* 详情页面 end */
    
    /* 收藏页面 begin */
    .favorite-card {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--margin0_5);
    }

    .favorite-card .favorite-title {
        width: 100%;
    }

    .favorite-card .favorite-opt {
        width: 100%;
        display: flex;
        align-items: center;
        flex-direction: row;
        justify-content: space-between;
    }
    /* 收藏页面 end */
    
    /* 隐藏内容 */
    .max768 {
        display: none;
    }
}

@media (max-width: 576px) {
	/* 顶部导航 begin */
	.nav .logo {
	    font-size: 1.5rem;
	    font-weight: 550;
	}
	
	.search-box input {
	    font-size: 0.75rem;
	}
	
	.search-box label {
	    top: var(--margin0_5);
	}
	/* 顶部导航 end */
	
    /* 返回顶部按钮 */
    .back-to-top {
        --size: 46px;
        width: var(--size);
        height: var(--size);
    }
    
    /* 文章卡片 begin */
    .article-card {
        gap: var(--margin0_75) !important;
    }
    
    .article-card .article-image {
        --width: 126px;
        --height: 88px;
        min-width: var(--width) !important;
        max-width: var(--width) !important;
        min-height: var(--height) !important;
        max-height: var(--height) !important;
    }
    
    .article-content {
	    gap: var(--margin0_5);
	}
    
    .article-title {
	    font-size: 1rem;
	    line-height: 1.32rem;
	    font-weight: 500;
	    margin-bottom: var(--margin0_5);
	}
	
	.article-excerpt {
	    font-size: .7rem;
	}
	
	.article-card .article-footer {
	    padding-top: 2px;
	}
    /* 文章卡片 end */
    
    /* 我的页面 */
    .my-page ._card {
        display: block;
    }
	
    /* 隐藏内容 */
    .max576 {
        display: none;
    }
}