/*——————————————————————————————————
  药丸文字背景
————————————————————————————————————*/
/* 粉色药丸背景 */
.textpink {
    background-color: rgba(255, 105, 180, 0.8); /* 70% opacity */
    color: white;
    padding: 5px 15px;
    border-radius: 10px; /* 改为 10px */
    display: inline-block;
    margin: 5px 0;                                 /* 上下间距 */
}

/* 橙色药丸背景 */
.textorange {
    background-color: rgba(255, 165, 0, 0.8); /* 70% opacity */
    color: white;
    padding: 5px 15px;
    border-radius: 10px; /* 改为 10px */
    display: inline-block;
    margin: 5px 0;                                 /* 上下间距 */
}

/* 暗红色药丸背景 */
.textdarkred {
    background-color: rgba(139, 0, 0, 0.8); /* 暗红色背景，70% 透明度 */
    color: white; /* 白色文字 */
    padding: 5px 15px;
    border-radius: 10px; /* 圆角改为 10px */
    display: inline-block; /* 使元素显示为行内块级元素 */
    margin: 5px 0;                                 /* 上下间距 */
}

/* 绿色药丸背景 */
.textgreen {
    background-color: rgba(40, 167, 69, 0.8); /* 70% opacity */
    color: white;
    padding: 5px 15px;
    border-radius: 10px; /* 改为 10px */
    display: inline-block;
    margin: 5px 0;                                 /* 上下间距 */
}

/* 蓝色药丸背景 */
.textblue {
    background-color: rgba(0, 123, 255, 0.8); /* 70% opacity */
    color: white;
    padding: 5px 15px;
    border-radius: 10px; /* 改为 10px */
    display: inline-block;
    margin: 5px 0;                                 /* 上下间距 */
}

/* 紫色药丸背景 */
.textpurple {
    background-color: rgba(128, 0, 128, 0.8); /* 70% opacity */
    color: white;
    padding: 5px 15px;
    border-radius: 10px; /* 改为 10px */
    display: inline-block;
    margin: 5px 0;                                 /* 上下间距 */
}

/* 红色药丸背景 */
.textred {
    background-color: rgba(220, 53, 69, 0.8); /* 70% opacity */
    color: white;
    padding: 5px 15px;
    border-radius: 10px; /* 改为 10px */
    display: inline-block;
    margin: 5px 0;                                 /* 上下间距 */
}

/* 黄色与红色渐变药丸背景 */
.textyellow {
    background: linear-gradient(90deg, rgba(255, 223, 0, 0.8), rgba(255, 0, 0, 0.8));
    color: white;
    padding: 5px 15px;
    border-radius: 10px;
    display: inline-block;
    margin: 5px 0;                                 /* 上下间距 */
}

/* 红色与蓝色渐变药丸背景 */
.textviolet {
    background: linear-gradient(90deg, rgba(255, 0, 0, 0.8), rgba(0, 0, 255, 0.8));
    color: white;
    padding: 5px 15px;
    border-radius: 10px;
    display: inline-block;
    margin: 5px 0;                                 /* 上下间距 */
}

/* 亮绿与红色渐变药丸背景 */
.textlime {
    background: linear-gradient(90deg, rgba(50, 205, 50, 0.8), rgba(255, 0, 0, 0.8));
    color: white;
    padding: 5px 15px;
    border-radius: 10px;
    display: inline-block;
    margin: 5px 0;                                 /* 上下间距 */
}

/* 蓝绿色药丸背景 */
.textteal {
    background-color: rgba(0, 128, 128, 0.8); /* 80% opacity */
    color: white;
    padding: 5px 15px;
    border-radius: 10px;
    display: inline-block;
    margin: 5px 0;                                 /* 上下间距 */
}

/* 洋红药丸背景 */
.textmagenta {
    background-color: rgba(255, 0, 255, 0.8); /* 80% opacity */
    color: white;
    padding: 5px 15px;
    border-radius: 10px;
    display: inline-block;
    margin: 5px 0;                                 /* 上下间距 */
}

/* 深灰色药丸背景 */
.textgray {
    background-color: rgba(105, 105, 105, 0.8); /* 80% opacity */
    color: white;
    padding: 5px 15px;
    border-radius: 10px;
    display: inline-block;
    margin: 5px 0;                                 /* 上下间距 */
}

/* 黑色药丸背景 */
.textblack {
    background-color: rgba(0, 0, 0, 0.8); /* 80% opacity */
    color: white;
    padding: 5px 15px;
    border-radius: 10px;
    display: inline-block;
    margin: 5px 0;                                 /* 上下间距 */
}


/*——————————————————————————————————
  自定义下载、链接按钮
————————————————————————————————————*/
/* 自定义样式：下载按钮 */
.btn-download {
    background-color: rgba(255, 105, 180, 0.8);
    color: white; /* 白色文字 */
    padding: 5px 15px; /* 内边距 */
    border-radius: 10px; /* 改为 10px */
    text-decoration: none; /* 去除下划线 */
    display: inline-block; /* 行内块元素 */
    margin: 5px 0;                                 /* 上下间距 */
    transition: background-color 0.3s ease, color 0.3s ease; /* 添加平滑过渡 */
}

.btn-download:hover {
    background-color: rgba(255, 105, 180, 1); /* 鼠标悬停时设置不透明的粉色背景 */
}

.btn-download i {
    margin-right: 5px; /* 图标与文字之间的间距 */
}

/* 自定义样式：链接按钮 */
.btn-link {
    background-color: rgba(0, 123, 255, 0.8);
    color: white; /* 白色文字 */
    padding: 5px 15px; /* 内边距 */
    border-radius: 10px; /* 改为 10px */
    text-decoration: none; /* 去除下划线 */
    display: inline-block; /* 行内块元素 */
    margin: 5px 0;                                 /* 上下间距 */
    transition: background-color 0.3s ease, color 0.3s ease; /* 添加平滑过渡 */
}

.btn-link:hover {
    background-color: rgba(0, 123, 255, 1); /* 鼠标悬停时设置不透明的蓝色背景 */
}

.btn-link i {
    margin-right: 5px; /* 图标与文字之间的间距 */
}


/*——————————————————————————————————
  自定义警告、提醒文字背景
————————————————————————————————————*/
/* 红色警告 */
.alert-text {
    background-color: rgba(220, 53, 69, 0.8);    /* 红色背景，透明度 0.7 */
    color: white;                                  /* 白色文字 */
    padding: 5px 15px;
    border-radius: 10px;                           /* 圆角 */
    display: inline-block;                         /* 行内块元素 */
    margin: 5px 0;                                 /* 上下间距 */
}

.alert-text i {
    margin-right: 5px;                             /* 图标与文字之间的间距 */
    color: white;                                  /* 白色图标，以适应红色背景 */
}

/* 橙色提醒 */
.alert-text-orange {
    background-color: rgba(255, 152, 0, 0.7);    /* 橙色背景，透明度 0.7 */
    color: white;                                  /* 白色文字 */
    padding: 5px 15px;
    border-radius: 10px;                           /* 圆角 */
    display: inline-block;                         /* 行内块元素 */
    margin: 5px 0;                                 /* 上下间距 */
}

.alert-text-orange i {
    margin-right: 5px;                             /* 图标与文字之间的间距 */
    color: white;                                  /* 白色图标，以适应橙色背景 */
}

/* 绿色警告 */
.alert-green {
    background-color: rgba(40, 167, 69, 0.8);    /* 绿色背景，透明度 0.8 */
    color: white;                                  /* 白色文字 */
    padding: 5px 15px;
    border-radius: 10px;                           /* 圆角 */
    display: inline-block;                         /* 行内块元素 */
    margin: 5px 0;                                 /* 上下间距 */
}

.alert-green i {
    margin-right: 5px;                             /* 图标与文字之间的间距 */
    color: white;                                  /* 白色图标，以适应绿色背景 */
}

/* 蓝色警告 */
.alert-blue {
    background-color: rgba(0, 123, 255, 0.8);     /* 蓝色背景，透明度 0.8 */
    color: white;                                  /* 白色文字 */
    padding: 5px 15px;
    border-radius: 10px;                           /* 圆角 */
    display: inline-block;                         /* 行内块元素 */
    margin: 5px 0;                                 /* 上下间距 */
}

.alert-blue i {
    margin-right: 5px;                             /* 图标与文字之间的间距 */
    color: white;                                  /* 白色图标，以适应蓝色背景 */
}

/* 紫色警告 */
.alert-purple {
    background-color: rgba(155, 89, 182, 0.8);    /* 紫色背景，透明度 0.8 */
    color: white;                                  /* 白色文字 */
    padding: 5px 15px;
    border-radius: 10px;                           /* 圆角 */
    display: inline-block;                         /* 行内块元素 */
    margin: 5px 0;                                 /* 上下间距 */
}

.alert-purple i {
    margin-right: 5px;                             /* 图标与文字之间的间距 */
    color: white;                                  /* 白色图标，以适应紫色背景 */
}

/* 黑色警告 */
.alert-black {
    background-color: rgba(0, 0, 0, 0.8);         /* 黑色背景，透明度 0.8 */
    color: white;                                  /* 白色文字 */
    padding: 5px 15px;
    border-radius: 10px;                           /* 圆角 */
    display: inline-block;                         /* 行内块元素 */
    margin: 5px 0;                                 /* 上下间距 */
}

.alert-black i {
    margin-right: 5px;                             /* 图标与文字之间的间距 */
    color: white;                                  /* 白色图标，以适应黑色背景 */
}

/* 绿色提醒 */
.alert-green-bell {
    background-color: rgba(40, 167, 69, 0.8);    /* 绿色背景，透明度 0.8 */
    color: white;                                  /* 白色文字 */
    padding: 5px 15px;
    border-radius: 10px;                           /* 圆角 */
    display: inline-block;                         /* 行内块元素 */
    margin: 5px 0;                                 /* 上下间距 */
}

.alert-green-bell i {
    margin-right: 5px;                             /* 图标与文字之间的间距 */
    color: white;                                  /* 白色图标，以适应绿色背景 */
}

/* 蓝色提醒 */
.alert-blue-bell {
    background-color: rgba(0, 123, 255, 0.8);     /* 蓝色背景，透明度 0.8 */
    color: white;                                  /* 白色文字 */
    padding: 5px 15px;
    border-radius: 10px;                           /* 圆角 */
    display: inline-block;                         /* 行内块元素 */
    margin: 5px 0;                                 /* 上下间距 */
}

.alert-blue-bell i {
    margin-right: 5px;                             /* 图标与文字之间的间距 */
    color: white;                                  /* 白色图标，以适应蓝色背景 */
}

/* 紫色提醒 */
.alert-purple-bell {
    background-color: rgba(155, 89, 182, 0.8);    /* 紫色背景，透明度 0.8 */
    color: white;                                  /* 白色文字 */
    padding: 5px 15px;
    border-radius: 10px;                           /* 圆角 */
    display: inline-block;                         /* 行内块元素 */
    margin: 5px 0;                                 /* 上下间距 */
}

.alert-purple-bell i {
    margin-right: 5px;                             /* 图标与文字之间的间距 */
    color: white;                                  /* 白色图标，以适应紫色背景 */
}

/* 黑色提醒 */
.alert-black-bell {
    background-color: rgba(0, 0, 0, 0.8);         /* 黑色背景，透明度 0.8 */
    color: white;                                  /* 白色文字 */
    padding: 5px 15px;
    border-radius: 10px;                           /* 圆角 */
    display: inline-block;                         /* 行内块元素 */
    margin: 5px 0;                                 /* 上下间距 */
}

.alert-black-bell i {
    margin-right: 5px;                             /* 图标与文字之间的间距 */
    color: white;                                  /* 白色图标，以适应黑色背景 */
}

/* 深红色废弃提醒 */
.alert-red-ban {
    background-color: rgba(139, 0, 0, 0.8);    /* 深红色背景，透明度 0.8 */
    color: white;                               /* 白色文字 */
    padding: 5px 15px;
    border-radius: 10px;                        /* 圆角 */
    display: inline-block;                      /* 行内块元素 */
    margin: 5px 0;                              /* 上下间距 */
}

.alert-red-ban i {
    margin-right: 5px;                          /* 图标与文字之间的间距 */
    color: white;                               /* 白色图标，以适应深红色背景 */
}


/*——————————————————————————————————
  自定义h1-h6标题
————————————————————————————————————*/
/* 仅作用于单篇文章和页面正文内容中的标题 */
.single-article-body h1, .single-article-body h2, .single-article-body h3, 
.single-article-body h4, .single-article-body h5, .single-article-body h6,
.page-body h1, .page-body h2, .page-body h3, 
.page-body h4, .page-body h5, .page-body h6 {
    position: relative;
    display: flex; /* 使用 flexbox 布局 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    padding: 6px 10px; /* 缩小上下内边距 */
    margin: 10px 0;
    border-radius: 10px;
    color: #333; /* 设置文本颜色 */
    text-align: center; /* 使文本水平居中 */
    line-height: 1.05; /* 缩小行高，减少文字和背景的垂直间距 */
}

/* 添加星号到标题两侧，调整大小和颜色 */
.single-article-body h1::before,
.single-article-body h1::after,
.page-body h1::before,
.page-body h1::after {
    content: "*"; /* 星号 */
    font-size: 25px; /* 星号字体大小 */
    color: #ff0000; /* 星号颜色，保持一致 */
    margin: 0 8px; /* 设置星号和标题文本的间距 */
}

.single-article-body h2::before,
.single-article-body h2::after,
.page-body h2::before,
.page-body h2::after {
    content: "*"; /* 星号 */
    font-size: 22px; /* 星号字体大小，适应二级标题 */
    color: #ff0000; /* 星号颜色 */
    margin: 0 8px;
}

.single-article-body h3::before,
.single-article-body h3::after,
.page-body h3::before,
.page-body h3::after {
    content: "*"; /* 星号 */
    font-size: 19px; /* 星号字体大小，适应三级标题 */
    color: #ff0000; /* 星号颜色 */
    margin: 0 8px;
}

.single-article-body h4::before,
.single-article-body h4::after,
.page-body h4::before,
.page-body h4::after {
    content: "*"; /* 星号 */
    font-size: 16px; /* 星号字体大小，适应四级标题 */
    color: #ff0000; /* 星号颜色 */
    margin: 0 8px;
}

.single-article-body h5::before,
.single-article-body h5::after,
.page-body h5::before,
.page-body h5::after {
    content: "*"; /* 星号 */
    font-size: 13px; /* 星号字体大小，适应五级标题 */
    color: #ff0000; /* 星号颜色 */
    margin: 0 8px;
}

.single-article-body h6::before,
.single-article-body h6::after,
.page-body h6::before,
.page-body h6::after {
    content: "*"; /* 星号 */
    font-size: 10px; /* 星号字体大小，适应六级标题 */
    color: #ff0000; /* 星号颜色 */
    margin: 0 8px;
}

/* 针对不同标题的背景颜色（采用更具二次元风格的颜色） */
.single-article-body h1 {
    background: linear-gradient(to right, rgba(255, 110, 140, 1) 0px, rgba(255, 160, 176, 0.9) 22px);
    font-size: 25px; /* 一级标题字体大小 */
}

.single-article-body h2 {
    background: linear-gradient(to right, rgba(130, 140, 200, 1) 0px, rgba(180, 190, 245, 0.9) 22px);
    font-size: 22px; /* 二级标题字体大小 */
}

.single-article-body h3 {
    background: linear-gradient(to right, rgba(180, 100, 180, 1) 0px, rgba(221, 160, 221, 0.9) 22px);
    font-size: 19px; /* 三级标题字体大小 */
}

.single-article-body h4 {
    background: linear-gradient(to right, rgba(210, 160, 130, 1) 0px, rgba(255, 218, 185, 0.9) 22px);
    font-size: 16px; /* 四级标题字体大小 */
}

.single-article-body h5 {
    background: linear-gradient(to right, rgba(120, 160, 180, 1) 0px, rgba(173, 216, 230, 0.9) 22px);
    font-size: 13px; /* 五级标题字体大小 */
}

.single-article-body h6 {
    background: linear-gradient(to right, rgba(220, 220, 130, 1) 0px, rgba(255, 255, 224, 0.9) 22px);
    font-size: 10px; /* 六级标题字体大小 */
}

/* 只影响页面正文中的标题样式 */
.page-body h1 {
    background: linear-gradient(to right, rgba(255, 110, 140, 1) 0px, rgba(255, 160, 176, 0.9) 22px);
    font-size: 25px; /* 一级标题字体大小 */
}

.page-body h2 {
    background: linear-gradient(to right, rgba(130, 140, 200, 1) 0px, rgba(180, 190, 245, 0.9) 22px);
    font-size: 22px; /* 二级标题字体大小 */
}

.page-body h3 {
    background: linear-gradient(to right, rgba(180, 100, 180, 1) 0px, rgba(221, 160, 221, 0.9) 22px);
    font-size: 19px; /* 三级标题字体大小 */
}

.page-body h4 {
    background: linear-gradient(to right, rgba(210, 160, 130, 1) 0px, rgba(255, 218, 185, 0.9) 22px);
    font-size: 16px; /* 四级标题字体大小 */
}

.page-body h5 {
    background: linear-gradient(to right, rgba(120, 160, 180, 1) 0px, rgba(173, 216, 230, 0.9) 22px);
    font-size: 13px; /* 五级标题字体大小 */
}

.page-body h6 {
    background: linear-gradient(to right, rgba(220, 220, 130, 1) 0px, rgba(255, 255, 224, 0.9) 22px);
    font-size: 10px; /* 六级标题字体大小 */
}


/*——————————————————————————————————
  预格式文本改为代码框
————————————————————————————————————*/
pre {
    background-color: rgba(251, 227, 229, 0.8); /* 半透明淡粉色背景 */
    color: #000000; /* 黑色文字 */
    border-radius: 8px; /* 圆角 */
    padding: 15px; /* 内边距 */
    font-family: 'FZFWZZAY', 'Courier New', Courier, monospace; /* 应用自定义字体并备选固定宽度字体 */
    overflow-x: auto; /* 横向滚动条 */
    position: relative; /* 使按钮可以定位 */
}


/*——————————————————————————————————
  自定义分割线
————————————————————————————————————*/
.section-divider {
    display: flex;
    align-items: center;                         /* 垂直居中 */
    justify-content: center;                     /* 水平居中 */
    margin-top: 17px;                            /* 上外边距 */
    margin-bottom: 23px;                         /* 下外边距 */
}

.section-divider::before,
.section-divider::after {
    content: "";                                 /* 伪元素无内容 */
    flex: 1;                                     /* 伪元素占据剩余空间 */
    border-top: 1px solid #FF69B4;               /* 粉色细线 */
}

.divider-text {
    padding: 0 10px;                             /* 中间文本与线条之间的间距 */
    font-size: 18px;                             /* 字体大小 */
    color: #FF69B4;                              /* 粉色文字 */
}


/*——————————————————————————————————
  自定义完成文本背景
————————————————————————————————————*/
.checkbox-status {
    padding: 5px 15px;
    border-radius: 10px;  /* 增加圆角效果 */
    display: inline-flex;
    margin: 5px 0;                                 /* 上下间距 */
    align-items: center;
}

.checkbox-status[data-status="0"] {
    background-color: rgba(128, 128, 128, 0.8); /* 灰色背景，透明度 0.8 */
    color: white;
}

.checkbox-status[data-status="1"] {
    background-color: rgba(0, 128, 0, 0.8); /* 绿色背景，透明度 0.8 */
    color: white;
}

.checkbox-status[data-status="0"] i::before {
    content: '\f00d'; /* 叉号图标 (fa-times) */
}

.checkbox-status[data-status="1"] i::before {
    content: '\f00c'; /* 对号图标 (fa-check) */
}

.checkbox-status i {
    margin-right: 10px;
}


/*——————————————————————————————————
  经典编辑器中的项目符号和编号列表样式
————————————————————————————————————*/
.single-article-body ul, .single-article-body ol,
.page-body ul, .page-body ol {
    background-color: rgba(0, 0, 0, 0.8); /* 黑色背景，透明度为0.8 */
    color: white; /* 字体颜色为白色 */
    padding: 5px 20px;
    border-radius: 10px;
}

.single-article-body ul li, .single-article-body ol li,
.page-body ul li, .page-body ol li {
    list-style-position: inside; /* 确保符号和编号在文本内部 */
}

.single-article-body ul li:before, .single-article-body ol li:before,
.page-body ul li:before, .page-body ol li:before {
    color: white; /* 符号和编号的颜色为白色 */
}


/*——————————————————————————————————
  美化经典编辑器中的段落引用
————————————————————————————————————*/
blockquote {
    background-color: rgba(70, 130, 180, 0.8);  /* 天蓝色背景，透明度0.8 */
    color: white;  /* 字体颜色为白色 */
    font-style: italic;  /* 文字斜体 */
    padding: 0px 60px;  /* 上下5px，左右40px，给左右留出空间放置引号 */
    margin: 15px 0;  /* 引用上下留出空间 */
    border-radius: 10px;  /* 圆角效果 */
    position: relative;  /* 便于放置引号图标 */
    text-align: center;  /* 文字居中显示 */
    display: flex;  /* 使用flexbox布局 */
    justify-content: center;  /* 让文字居中 */
    align-items: center;  /* 垂直居中对齐 */
}

/* 使用 Font Awesome 的引号图标 */
blockquote::before, blockquote::after {
    font-family: 'Font Awesome 5 Free';  /* Font Awesome 字体库 */
    font-weight: 900;  /* 确保使用 Font Awesome 的图标样式 */
    font-size: 2.2rem;  /* 调整图标大小 */
    color: white;  /* 引号颜色 */
    position: absolute;
    top: 50%;
    transform: translateY(-50%);  /* 引号垂直居中 */
}

/* 左侧引号 */
blockquote::before {
    content: '\f10d';  /* 引号图标的 Unicode 编码 (quote-left) */
    left: 10px;  /* 引号位置靠左，距离文字10px */
}

/* 右侧引号 */
blockquote::after {
    content: '\f10e';  /* 引号图标的 Unicode 编码 (quote-right) */
    right: 17px;  /* 引号位置靠右，距离文字10px */
}