/* static/css/custom.css */
body {
    margin: 0;
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
    /* 使用CSS变量控制背景 */
    background: var(--body-bg, none);
}

.background-fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -100;
    background-image: url('https://free.picui.cn/free/2025/08/04/68905106a1f23.jpg');
    background-size: cover;
    background-position: center;
    /* 使用变量控制显示 */
    display: var(--bg-display, block);
}

/* 在 static/css/custom.css 中添加 */
.bg-switch {
    margin-right: 0.5rem;
    cursor: pointer;
}

/* 调整开关按钮的悬停效果 */
.navbar-nav .form-check:hover {
    opacity: 0.8;
}

/* 按钮悬停效果 */
.form-check-input:hover {
  transform: scale(1.08);
  transition: transform 0.2s ease;
}

/* 按钮点击效果 */
.form-check-input:active {
  transform: scale(0.95);
}

blockquote {
    border-left: 4px solid #ddd;
    margin: 1em 0;
    padding: 0 1em;
    color: #555;
}

/* 调整 Markdown 标题间距 */
.post-content h1,
.post-content h2,
.post-content h3,
.post-content h4,
.post-content h5,
.post-content h6 {
    margin-bottom: 1.0rem;
    /* 增加标题下方间距 */
}

.post-content h1 {
    border-bottom: solid 1px #d8d8d8;
    display: block;
    margin-block-start: 0.67em;
    margin-block-end: 0.67em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
    unicode-bidi: isolate;
    margin: 1.5rem 0 1rem;
    font-size: 2em;
    padding-bottom: .25em;
}

.post-content h2 {
    display: block;
    margin-block-start: 0.83em;
    margin-block-end: 0.83em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
    unicode-bidi: isolate;
    margin: 1.2rem 0 1rem;
    font-size: 1.5em;
    padding-bottom: .25em;
    border-bottom: solid 1px #d8d8d8;
}

.post-content h3 {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
    unicode-bidi: isolate;
    margin: 1.2rem 0 1rem;
    font-size: 1.2em;
}

.post-content h4 {
    display: block;
    margin-block-start: 1.33em;
    margin-block-end: 1.33em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
    unicode-bidi: isolate;
    margin: 1rem 0;
    font-size: 1.1em;
}

.post-content h5 {
    display: block;
    margin-block-start: 1.67em;
    margin-block-end: 1.67em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
    unicode-bidi: isolate;
    margin: 1rem 0;
    font-size: 1em;
}

.post-content h6 {
    display: block;
    margin-block-start: 2.33em;
    margin-block-end: 2.33em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
    unicode-bidi: isolate;
    margin: 1rem 0;
    font-size: 1em;
    color: #666;
}

article a,
span a,
.arithmatex a,
/* 数学公式容器内的链接 */
/* 段落内的链接 */
.meta-value a {
    /* 右侧信息栏的链接 */
    text-decoration: none;
    color: #3498db
}

/* 悬停深蓝色 */
article a:hover,
span a:hover,
.arithmatex a:hover,
/* 数学公式容器内的链接 */
/* 段落内的链接 */
.meta-value a:hover {
    /* 右侧信息栏的链接 */
    text-decoration: none;
    color: #0a58ca
}

/* 自定义按钮样式 */
.btn-post {
    width: 120px;
    margin: 10px;
}

/* 调整导航项间距 */
.navbar-nav .nav-item {
    margin-right: 1.5rem;
}

.warning-section {
    margin-top: 50px;
    position: relative;
    border-radius: 20px;
    padding: 25px;
    color: #333;
    transition: transform 0.3s ease;
    z-index: 1;
}
.warning-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, #fffbf7 0%, #fffaf3 100%);
    border-left: 4px solid #ffcb6a;
    border-radius: 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    opacity: 0.7;
    transition: all 0.3s ease;
    z-index: -1;
}
.warning-section:hover {
    transform: translateY(-3px);
}
.warning-section:hover::before {
    opacity: 0.85;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
    border-left-color: #ffaa49;
}
.warning-section h1,
.warning-section p,
.warning-section ul,
.warning-section li {
    padding-left: 20px;
}
.warning-section h1 {
    color: #fc8f00;
    font-size: 2rem;
    margin-bottom: 1rem;
    position: relative;
}
.warning-section p {
    font-size: 1.15rem;
    line-height: 1.7;
    color: #444;
}
.warning-section strong {
    color: #fc8f00;
    font-weight: 600;
}
.warning-section ul {
    padding-left: 2.8rem;
    list-style-type: disc;
    list-style-position: outside;
}
.warning-section blockquote {
    padding: 5px 20px 5px 20px;
    margin: 0px 0 15px 20px; 
}
.warning-section blockquote p {
    margin: 0;
    padding: 5px 0;
    color: #919191;
}
.warning-section li {
    margin-bottom: 0.7rem;
    font-size: 1.1rem;
    color: #444;
    padding-left: 0;
    text-indent: -15px;
    display: list-item;
}
.warning-section a {
    color: #fc8f00;
    text-decoration: underline;
    transition: color 0.2s;
}
.warning-section a:hover {
    color: #e28000;
    transition: color 0.2s;
}

/* 更新欢迎板块样式 */
.welcome-section {
    margin-top: 50px;
    position: relative;
    border-radius: 20px;
    padding: 25px;
    color: #333;
    transition: transform 0.3s ease; /* 添加内容层过渡 */
    z-index: 1;
}

/* 背景层 */
.welcome-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, #f7faff 0%, #f3faff 100%);
    border-left: 4px solid rgba(77, 166, 255, 0.7);
    border-radius: 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    opacity: 0.7;
    transition: all 0.3s ease;
    z-index: -1;
}

/* 悬停效果 - 同时移动内容和背景 */
.welcome-section:hover {
    transform: translateY(-3px); /* 移动整个容器 */
}

.welcome-section:hover::before {
    opacity: 0.85;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
    border-left-color: #0d6efd;
    /* 移除伪元素的独立transform */
}


/* 添加文字左边距 */
.welcome-section h1,
.welcome-section p,
.welcome-section ul,
.welcome-section li {
    padding-left: 20px;
    /* 添加统一的左边距 */
}

/* 标题样式 */
.welcome-section h1 {
    color: #0e6de9;
    font-size: 2.3rem;
    margin-bottom: 0.8rem;
    position: relative;
}

/* 文字样式 */
.welcome-section p {
    font-size: 1.15rem;
    line-height: 1.7;
    color: #444;
}

/* 粗体样式 */
.welcome-section strong {
    color: #0e6de9;
    font-weight: 600;
}

/* 列表样式 */
.welcome-section ul {
    padding-left: 2.8rem;
    list-style-type: disc;
    /* 明确指定列表样式 */
    list-style-position: outside;
    /* 确保标记点在文本外部 */
}

/* 引用样式 */
.welcome-section blockquote {
    /* border-left: 4px solid rgba(77, 166, 255, 0.7); 蓝色边框 */
    /* background-color: rgba(240, 248, 255, 0.6); 浅蓝色背景 */
    /* border-radius: 0 8px 8px 0; 圆角，右上和右下有圆角，左下和左上没有（因为左边框是直的） */
    padding: 5px 20px 5px 20px; /* 内边距，文字与边框的距离 */
    margin: 0px 0 15px 20px; /* 上右下左，左边距20px使整个引用右移 */
    
    /* font-style: italic; */
}

.welcome-section blockquote p {
    margin: 0; /* 移除段落的默认边距 */
    padding: 5px 0; /* 如果需要段落之间的间距，使用padding */
    color: #919191;
}

.welcome-section li {
    margin-bottom: 0.7rem;
    font-size: 1.1rem;
    color: #444;
    padding-left: 0;
    /* 重置左边距 */
    text-indent: -15px;
    /* 重置文本缩进 */
    display: list-item;
}

/* 最新讨论容器 - 更透明 */
.latest-discussions-container {
    background-color: rgba(255, 255, 255, 0.3); /* 增加透明度 */
    backdrop-filter: blur(5px); /* 添加毛玻璃效果 */
    border-radius: 15px;
    padding: 20px;
    transition: all 0.3s ease;
    border: 1px solid rgba(0, 0, 0, 0.05); /* 添加微妙的边框 */
}

.latest-discussions-container:hover {
    background-color: rgba(255, 255, 255, 0.4); /* 悬停时更不透明 */
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5); /* 悬停时阴影加深 */
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); /* 更平滑的缓动函数 */
}

/* 两列布局下的卡片 */
.post-list .post-card {
    background: #fff;
    border: none;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.05);
}

.post-list .post-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

/* 确保两列布局中卡片高度一致 */
.post-list .card-body {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* 标题链接 */
.post-title-link {
    color: #3498db;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.25rem;
    transition: color 0.2s;
    display: block;
    margin-bottom: 0.5rem;
}

.post-title-link:hover {
    color: #0a58ca;
    /* text-decoration: underline; */
}

/* 元信息样式 */
.post-meta {
    font-size: 0.95rem;
    color: #666;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}

.meta-separator {
    color: #999;
    margin: 0 4px;
}

/* 分类链接 */
.category-link {
    color: #2c3e50;
    font-weight: 500;
    transition: color 0.2s;
}

.category-link:hover {
    color: #0d6efd;
    text-decoration: none;
}

/* 日期样式 */
.post-date {
    font-size: 0.9rem;
    color: #777;
    display: flex;
    align-items: center;
    margin-top: auto; /* 推到底部 */
    border-top: 1px solid #f0f0f0; /* 添加分隔线 */
}

.post-date i {
    margin-right: 5px;
}

/* 更紧凑的布局选项 */
.post-card .card-body {
    padding: 0.8rem 1.1rem;
}

.post-card .card-title {
    margin-bottom: 0.3rem;
    font-size: 1rem; /* 略微减小标题字号 */
}

.post-card .post-meta {
    font-size: 0.85rem; /* 减小作者行字号 */
}

.post-card .post-date {
    padding-top: 0.2rem;
    margin-top: 0.2rem;
    font-size: 0.85rem; /* 减小日期行字号 */
}

/* 所有按钮统一高度 */
.btn {
    padding: 6px 12px;
    font-size: 13px;
}

/* 确保编辑器容器可见 */
#editor-container {
    min-height: 600px;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 修复预览区域样式 */
#preview-container {
    padding: 1rem;
    overflow-y: auto;
}

.badge-red,
.badge-purple,
.badge-blue {
    padding: 0.45em 0.8em;
    font-size: 50%;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.4rem;
    display: inline-block;
    vertical-align: middle;
}

.badge-red-small,
.badge-purple-small,
.badge-blue-small {
    padding: 0.5em 0.85em;
    font-size: 50%;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.4rem;
    display: inline-block;
    vertical-align: middle;
    top: -0.2em;
    transform: scale(0.9);
}

:root {
    /* 定义颜色变量 */
    --color-purple: #9c3dcf;
    --color-red: #fe4c61;
    --color-blue: #3498db;
    --color-purple-hover: #752e9b;
    --color-red-hover: #bf3949;
    --color-blue-hover: #2772a4;
}

/* 文字颜色类 */
.text-purple {
    color: var(--color-purple);
}

.text-red {
    color: var(--color-red);
}

.text-blue {
    color: var(--color-blue);
}

.text-purple:hover {
    color: var(--color-purple-hover);
}

.text-red:hover {
    color: var(--color-red-hover);
}
.text-blue:hover {
    color: var(--color-blue-hover);
}

/* 徽章背景颜色类 */
.badge-purple,
.badge-purple-small {
    background-color: var(--color-purple);
    color: white;
    /* 徽章文字颜色设为白色 */
}

.badge-red,
.badge-red-small {
    background-color: var(--color-red);
    color: white;
}

.badge-blue,
.badge-blue-small {
    background-color: var(--color-blue);
    color: white;
}

/* 调整徽章位置 */
.author-name .badge{
    position: relative;
    top: -0.1em;
    margin-left: 0.3em;
}

/* 定义多套颜色方案 */
.author-name {
    font-weight: bold;
    font-size: 1.2rem;
}

.author-name-small{
    position: relative;
    top: -0.1em;
    margin-left: 0.3em;
    font-weight: bold;
    font-size: 1.0rem;
}

/* 添加表格基本样式 */
table {
    width: 100%;
    margin-top: 1rem;
    margin-bottom: 1rem;
    border-collapse: collapse;
    line-height: 1.5;
}

th,
td {
    padding: 0.5rem;
    border: 1px solid #dee2e6;
}

/* 代码块整体样式 */
pre code.hljs {
    background-color: #f8f9fa;
    padding: 1rem;
    font-family: 'Fira Code', monospace;
    font-size: 0.95rem;
    overflow-x: auto;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* 移除行间分隔线 */
.hljs-line {
    border-bottom: none;
}

/* 移除行号与代码之间的竖线 */
.hljs-line-numbers {
    border-left: none;
}

.hljs-line-numbers>.hljs-line::before {
    border-right: none;
    background-color: transparent;
    margin-right: 10px;
    padding-right: 5px;
}

/* 调整行号样式 */
.hljs-line-numbers>.hljs-line::before {
    counter-increment: line;
    content: counter(line);
    display: inline-block;
    width: 30px;
    color: #6c757d;
    text-align: right;
}

/* 移除代码块表格的所有边框和分隔线 */
.highlight table.hljs-ln {
    border-collapse: collapse;
    border-spacing: 0;
    border: none;
    width: auto;
}

/* 移除行号单元格的右边框 */
.highlight .hljs-ln-line.hljs-ln-numbers {
    border-right: none;
    padding-right: 10px;
    text-align: right;
    color: #999;
    background-color: transparent;
}

.hljs-ln-line {
    line-height: 1.65;
    /* 默认通常是1.2-1.5，调整为1.5-2.0 */
}

/* 移除代码单元格的左边框 */
.highlight .hljs-ln-line.hljs-ln-code {
    border-left: none;
    padding-left: 10px;
}

/* 移除表格行之间的边框 */
.highlight tr {
    border: none;
}

/* 移除表格单元格之间的边框 */
.highlight td {
    border: none;
    padding: 2px 8px;
}

/* 可选：调整行号颜色 */
.hljs-ln-n:before {
    color: #999;
}

table.hljs-ln {
    margin-top: 0;
    margin-bottom: 0;
    /* 移除表格的上下边距 */
}

pre {
    display: block;
    margin-bottom: 1rem;
    margin-top: 1rem;
    overflow: auto;
    font-size: .875em;
}

 /* 保留代码块外部边框 */
.post-content pre {
    border: 1px solid #dee2e6;
    border-radius: 10px;
}

/* 移除所有代码块的表格边框线 */
.post-content pre code {
    border: none;
}

.post-content pre table {
    border: none;
    border-collapse: collapse;
}

.post-content pre td {
    border: none;
    padding: 0;
}

.post-content pre tr {
    border: none;
}

/* 数学公式容器样式 */
.katex-display {
    overflow-x: auto;
    overflow-y: hidden;
    padding: 1rem 0;
    margin: 1.5rem 0;
}

/* 行内公式样式 */
.katex {
    font-size: 1.1em;
}

/* 复杂公式换行支持 */
.katex-display>.katex {
    white-space: normal;
}

/* 公式滚动容器 */
.math-container {
    max-width: 100%;
    overflow-x: auto;
}

/* 精准控制 KaTeX 的换行间距（核心解决方案） */
.katex .newline {
    margin-bottom: 0.5em !important;
    /* 调整这个值控制行距 */
    display: block;
    height: 0;
}

/* 精准控制行间公式间距 */
.arithmatex .katex-display {
    margin: 0.5em 0;
    /* 上下边距从默认1em改为0.2em */
    padding: 0.3em;
    /* 移除内边距 */
}

/* 卡片圆角 */
.card {
    border-radius: 12px;
    /* 或者你想要的圆角大小 */
}

/* 列表项圆角 */
.list-group.rounded {
    border-radius: 12px;
    overflow: hidden;
    /* 确保子元素不破坏圆角 */
}

/* post list 板块圆角 */
.badge {
    border-radius: 8px;
}

.btn {
    border-radius: 8px !important;
    /* 自定义圆角大小 */
}

/* 卡片悬停效果 */
.card {
    transition: all 0.3s ease; /* 平滑过渡 */
}

.card:hover {
    transform: translateY(-2px); /* 轻微上浮 */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); /* 阴影加深 */
}

/* 卡片内标题悬停变蓝 */
.card:hover .card-title a {
    color: #0d6efd !important; /* Bootstrap 默认蓝色 */
}

.post-content a {
    text-decoration: none;
    color: #3498db;
}

.post-content a:hover {
    color: #0a58ca
}