h1{
    font-size:2rem;
}
/*颜文字表情开始*/
.emoji-wrap {
    display: flex;
    flex-wrap: wrap; /* 允许换行 */
    width: 360px; /* 固定宽度，根据表情数量调整 */
    padding: 10px;
    margin: 0;
    list-style: none;
}

.emoji-wrap li {
    flex: 0 0 20%; /* 每行5个表情（100% / 5 = 20%） */
    text-align: center;
    padding: 5px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.2s;
}

.emoji-wrap li:hover {
    background-color: #f0f0f0; /* 悬停效果 */
}

/* 确保popover内容区域适应 */
.popover {
    max-width: 400px; /* 限制popover的最大宽度 */
}

/* 优化popover在小屏幕上的显示 */
@media (max-width: 576px) {
    .emoji-wrap {
        width: 280px; /* 小屏幕上缩小宽度 */
    }

    .emoji-wrap li {
        flex: 0 0 25%; /* 小屏幕上每行4个 */
    }
}
#emojibox{
    color: rgba(0, 0, 0, 0.87);
}
/*颜文字表情结束*/
.comment-s{
    margin-left: 1.5rem;
}
.reply-comment{
    margin-right: 0.6rem;
}
.text-muted>.icon-like:active{
    color: #0cc2aa;
}
.reply-content{
    margin-right: 10px;
}
#comment .sl-content {
    padding-bottom: 1px;
}
.align-fix {
    display: flex;
    align-items: center;
}

/* pre代码块样式开始 */
/* 基础重置和全局样式 */
pre {
    position: relative;
    background: #1e1e2e; /* 深色背景，现代感 */
    color: #cdd6f4; /* 柔和的文字颜色 */
    font-family: 'JetBrains Mono', 'Consolas', 'Monaco', monospace; /* 编程字体 */
    font-size: 14px;
    line-height: 1.6;
    padding: 20px;
    border-radius: 12px; /* 圆润边角 */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); /* 轻微阴影，增加立体感 */
    overflow-x: auto; /* 水平滚动条 */
    margin: 20px 0;
    border: 1px solid #2a2a3b; /* 微妙的边框 */
}

/* 滚动条美化 */
pre::-webkit-scrollbar {
    height: 8px;
}
pre::-webkit-scrollbar-track {
    background: #2a2a3b;
    border-radius: 4px;
}
pre::-webkit-scrollbar-thumb {
    background: #585876;
    border-radius: 4px;
}
pre::-webkit-scrollbar-thumb:hover {
    background: #7a7a9d;
}

/* 代码高亮样式（基于常见的语法高亮配色方案） */
pre code {
    display: block;
    padding-top: 20px;
}
pre code .keyword {
    color: #ff79c6; /* 关键字：粉紫色 */
}
pre code .string {
    color: #f1fa8c; /* 字符串：浅黄色 */
}
pre code .comment {
    color: #6272a4; /* 注释：灰蓝色 */
    font-style: italic;
}
pre code .function {
    color: #50fa7b; /* 函数：亮绿色 */
}
pre code .number {
    color: #bd93f9; /* 数字：紫色 */
}
pre code .operator {
    color: #ff5555; /* 操作符：红色 */
}

/* 代码块头部装饰（模拟编辑器窗口） */
pre::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 30px;
    background: linear-gradient(90deg, #2a2a3b, #1e1e2e); /* 渐变头部 */
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

/* 模拟窗口控制按钮 */
pre::after {
    content: '● ● ●';
    position: absolute;
    top: 10px;
    left: 15px;
    font-size: 10px;
    color: #ff5555; /* 红、黄、绿按钮 */
    letter-spacing: 8px;
    opacity: 0.8;
}

/* 行号样式 */
pre.line-numbers {
    counter-reset: line;
    padding-left: 50px;
}
pre.line-numbers code span {
    display: block;
    position: relative;
}
pre.line-numbers code span::before {
    content: counter(line);
    counter-increment: line;
    position: absolute;
    left: -40px;
    color: #6272a4;
    font-size: 12px;
    text-align: right;
    width: 30px;
    opacity: 0.6;
}

/* 响应式调整 */
@media (max-width: 768px) {
    pre {
        font-size: 12px;
        padding: 15px;
    }
    pre.line-numbers {
        padding-left: 40px;
    }
    pre.line-numbers code span::before {
        left: -30px;
        width: 20px;
    }
}
/* pre代码块样式结束 */
.tab-content blockquote {
    display: block;
    border-left: 8px solid #d0e5f2;
    padding: 5px 10px;
    margin: 10px 0;
    line-height: 1.4;
    font-size: 100%;
    background-color: #f1f1f1;
    color: #000;
}
.pinglun .msg-notice,#safetyModal .msg-notice{
    font-size: 14px;
    color:#0bb69f;
    border: #0bb69f dashed 1px;
    border-radius: 6px;
    padding: 8px;
    margin-bottom: 10px
}
.pinglun .msg-notice-bu{
    color:#d63200;
    cursor: pointer;
}
#safetyImage img {
    max-width: 100%;
    max-height: 100%;
    display: block;
    margin: 0 auto;
}

.grey .theme-color,.grey .filter-option,.grey .filter-title,.grey .modal-body p{
    color: #ffffff;
}
.dark .theme-color,.dark .filter-option,.dark .filter-title,.dark .modal-body p{
    color: #ffffff;
}
.black .theme-color,.black .filter-option,.black .filter-title,.black .modal-body p{
    color: #ffffff;
}