/* 文章容器 */
.postarticle-container {
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    font-family: 'Segoe UI', system-ui, sans-serif;
    color: #f0f0f0;
}

/* 文章正文样式 */
.postarticle-content {

    color: #ddd;
    margin-bottom: 10px;
}

/* 标题样式 */
.postarticle-content h1,
.postarticle-content h2,
.postarticle-content h3,
.postarticle-content h4,
.postarticle-content h5,
.postarticle-content h6 {
    margin-top: 4px;
    margin-bottom: 16px;
    font-weight: 500;
    line-height: 1.3;
    color: #fff;
    position: relative;

}

.postarticle-content h1 {
    /*font-size: 1.8rem;*/
    padding-bottom: 10px;
    border-bottom: none;
}
.postarticle-content h1::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 55px;
    height: 4px;
    background: var(--halo-cw-primary-1-color, #0084ff);
    border-radius: 2px;
}
.postarticle-content h2 {
    font-size: 1.65rem;
    padding-bottom: 8px;
    border-bottom: none;
}

.postarticle-content h2::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 40px;
    height: 3px;
    background: var(--halo-cw-primary-1-color, #0084ff);
    border-radius: 2px;
}

.postarticle-content h3 {
    font-size: 1.3rem;
    padding-bottom: 8px;
    border-bottom: none;
}

.postarticle-content h3::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 25px;
    height: 2.5px;
    background: var(--halo-cw-primary-1-color, #0084ff);
    border-radius: 2px;
}

.postarticle-content h4 {
    font-size: 1.1rem;
}

.postarticle-content h5 {
    font-size: 1rem;
}
.postarticle-content h6 {
    font-size: 0.9rem;
}
/* 段落样式 */
.postarticle-content p {
    margin-bottom: 10px;
    text-align: justify;
}

/* 重要：为包含图片的段落添加溢出隐藏 */
.postarticle-content p:has(img) {
    overflow: hidden;
    border-radius: 6px;
    max-width: 100%;
}

/* 如果这个图片段落前面有其他段落或内容 */
.postarticle-content p + p:has(img) {
    margin: 10px auto;
}

/* 如果这个图片段落是第一个子元素（前面没有内容） */
.postarticle-content > p:first-child:has(img),
.postarticle-content p:first-of-type:has(img) {
    margin: 0 auto 10px auto;
}

/* 链接样式 */
.postarticle-content a {
    color: #0084ff;
    text-decoration: none;
    transition: all 0.2s ease;
}

.postarticle-content a:hover {
    color: #3399ff;
    text-decoration: underline;
}

/* ===================== */
/* 编辑器特殊元素样式 */
/* ===================== */

/* 1. 分栏布局样式 */
.postarticle-content .columns {
    display: flex;
    width: 100%;
    gap: 1em;
    /*margin: 10px auto;*/margin: 0px 0px 10px 0px;
    flex-wrap: wrap;
}

.postarticle-content .column {
    min-width: 0;
    flex: 1 1;
    box-sizing: border-box;
    padding: 10px;
    background-color: #2d2d2d;
    border-radius: 8px;
}

/* 响应式：移动端分栏改为垂直排列 */
@media (max-width: 768px) {
    .postarticle-content .columns {
        /*flex-direction: column;*/
        gap: 0.8em;
    }
    
    .postarticle-content .column {
        width: 100%;
    }
}

/* ===================== */
/* 音频播放器 - 音量条优化版 */
/* ===================== */

/* 移除原来的音频样式 */
.postarticle-content figure[data-content-type="audio"] {
    margin: 20px 0;
    padding: 0;
    background: transparent;
        border-radius: 10px;
}

/* 隐藏原生音频控件 */
.postarticle-content figure[data-content-type="audio"] audio {
    display: none;
}

/* 音频播放器容器 */
.audio-player {
    width: 100%;
    background: #2b2b2b;
    border-radius: 10px;
    padding: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.audio-player:hover {
    border-color: #444;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

/* ===================== */
/* 音频头部 - 包含封面、信息和控制按钮 */
/* ===================== */

.audio-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
    gap: 16px;
}

/* 音频信息区域 */
.audio-info-area {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
    min-width: 0;
}

/* 音频封面 */
.audio-cover {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    background: #383838;
    position: relative;
}

.audio-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.audio-cover-default {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    font-size: 24px;
}

/* 音频基本信息 */
.audio-basic-info {
    flex: 1;
    min-width: 0;
}

.audio-name-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
}

.audio-icon {
    color: #0084ff;
    font-size: 16px;
    flex-shrink: 0;
}

.audio-name {
    font-size: 15px;
    color: #fff;
    font-weight: 500;
    margin: 0;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.4;
}

.audio-artist {
    font-size: 13px;
    color: #aaa;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ===================== */
/* 控制按钮区域 */
/* ===================== */

.top-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: flex-end;
    flex-shrink: 0;
}

/* 重新播放按钮 */
.restart-btn {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: #383838;
    border: 1px solid #44444400;
    color: #aaa;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: all 0.2s ease;
    padding: 0;
}

.restart-btn:hover {
    background: #444;
    color: #fff;
    border-color: #55555500;
}

/* ===================== */
/* 进度条区域 */
/* ===================== */

.progress-area {
    margin-bottom: 16px;
}

.time-display {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 13px;
    color: #aaa;
    font-family: 'SFMono-Regular', monospace;
}

/* 进度条容器 */
.progress-container {
    position: relative;
    height: 6px;
    background: #383838;
    border-radius: 3px;
    overflow: visible;
    cursor: pointer;
    touch-action: none;
}

/* 进度条轨道 */
.progress-track {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #383838;
    border-radius: 3px;
    overflow: hidden;
}

/* 进度条填充 */
.progress-bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #0084ff, #00a2ff);
    border-radius: 3px;
    pointer-events: none;
}

/* 进度条滑块 - 圆点样式 */
.progress-slider {
    position: absolute;
    top: 50%;
    left: 0;
    width: 16px;
    height: 16px;
    background: #fff;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: transform 0.1s ease, opacity 0.2s ease;
    cursor: grab;
    z-index: 10;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    border: 2px solid #fff;
    pointer-events: none;
}

/* 显示滑块 */
.progress-container:hover .progress-slider,
.progress-container.dragging .progress-slider {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.2);
}

/* 拖拽状态 */
.progress-slider.dragging {
    cursor: grabbing;
    transform: translate(-50%, -50%) scale(1.3);
    box-shadow: 0 0 0 6px rgba(0, 132, 255, 0.3);
    opacity: 1;
}

/* ===================== */
/* 播放器底部 - 保持在同一行 */
/* ===================== */

.player-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 12px;
    border-top: 1px solid #2b2b2b;
    gap: 16px;
}

/* 左下角：音量控制 */
.volume-control {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.volume-btn {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: #383838;
    border: 1px solid #44444400;
    color: #aaa;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.volume-btn:hover {
    background: #444;
    color: #fff;
    border-color: #55555500;
}

/* ===================== */
/* 音量条样式 - 优化宽度 */
/* ===================== */

.volume-slider-container {
    width: 200px; /* 固定宽度，不随容器伸缩 */
    height: 6px;
    background: #383838;
    border-radius: 3px;
    position: relative;
    cursor: pointer;
    overflow: visible;
    touch-action: none;
    flex-shrink: 0;
}

.volume-track {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #383838;
    border-radius: 3px;
}

.volume-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 70%;
    background: #00a2ff;
    border-radius: 3px;
    pointer-events: none;
}

/* 音量滑块 - 圆点样式 */
.volume-slider {
    position: absolute;
    top: 50%;
    left: 70%;
    width: 12px;
    height: 12px;
    background: #fff;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: transform 0.1s ease, opacity 0.2s ease;
    cursor: grab;
    z-index: 10;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    border: 2px solid #fff;
    pointer-events: none;
}

/* 显示音量滑块 */
.volume-slider-container:hover .volume-slider,
.volume-slider-container.dragging .volume-slider {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.3);
}

/* 音量滑块拖拽状态 */
.volume-slider.dragging {
    cursor: grabbing;
    transform: translate(-50%, -50%) scale(1.4);
    box-shadow: 0 0 0 4px rgba(0, 162, 255, 0.3);
    opacity: 1;
}

/* ===================== */
/* 中间区域：播放控制 */
/* ===================== */

.center-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-width: 0;
}

/* ===================== */
/* 右下角控制区域 */
/* ===================== */

.right-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* 播放速度按钮 */
.speed-btn {
    padding: 8px 12px;
    background: #383838;
    border: 1px solid #44444400;
    border-radius: 8px;
    color: #aaa;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 50px;
    flex-shrink: 0;
}

.speed-btn:hover {
    background: #444;
    color: #fff;
}

.speed-btn.active {
    background: rgba(0, 132, 255, 0.2);
    color: #0084ff;
    border-color: rgb(0 132 255 / 0%);
}

/* 播放按钮 */
.play-btn {
    width: 36px;
    height: 36px;
    padding: 0;
    background: linear-gradient(135deg, #0084ff, #0066cc);
    border: none;
    border-radius: 8px;
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.play-btn:hover {
    background: linear-gradient(135deg, #3399ff, #0084ff);
    transform: scale(1.02);
}

.play-btn.playing {
    background: linear-gradient(135deg, #ff444477, #cc000077);
}

.play-btn svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

/* ===================== */
/* 移动端适配 */
/* ===================== */

@media (max-width: 768px) {
    .audio-player {
        padding: 14px;
        border-radius: 8px;
    }
    
    /* 音频头部移动端适配 */
    .audio-header {
        flex-direction: row;
        align-items: flex-start;
        gap: 12px;
        margin-bottom: 14px;
    }
    
    .audio-info-area {
        gap: 12px;
    }
    
    .audio-cover {
        width: 50px;
        height: 50px;
        border-radius: 6px;
    }
    
    .audio-name {
        font-size: 14px;
    }
    
    .audio-artist {
        font-size: 12px;
    }
    
    /* 控制按钮移动端适配 */
    .top-controls {
        margin-top: 0;
    }
    
    /* 进度条区域移动端适配 */
    .time-display {
        font-size: 12px;
        margin-bottom: 6px;
    }
    
    .progress-container {
        height: 5px;
    }
    
    .progress-slider {
        width: 14px;
        height: 14px;
    }
    
    /* 播放器底部移动端适配 - 保持在同一行 */
    .player-footer {
        flex-direction: row;
        gap: 8px;
        align-items: center;
        padding-top: 14px;
    }
    
    /* 音量控制移动端适配 */
    .volume-control {
        flex-shrink: 0;
        gap: 8px;
    }
    
    .volume-slider-container {
        width: 200px; /* 移动端稍微短一些 */
        height: 5px;
    }
    
    /* 中间区域移动端适配 */
    .center-controls {
        flex: 1;
        min-width: 0;
        justify-content: flex-end;
    }
    
    /* 速度控制和播放按钮移动端适配 */
    .right-controls {
        flex-shrink: 0;
        gap: 6px;
    }
    
    .speed-btn {
        padding: 6px 10px;
        height: 32px;
        min-width: 45px;
        font-size: 11px;
    }
    
    .play-btn {
        width: 32px;
        height: 32px;
    }
    
    .play-btn svg {
        width: 14px;
        height: 14px;
    }
    
    /* 控制按钮大小调整 */
    .restart-btn,
    .volume-btn {
        width: 32px;
        height: 32px;
        font-size: 13px;
    }
    
    /* 超小屏幕适配 */
    @media (max-width: 480px) {
        .audio-player {
            padding: 12px;
            border-radius: 6px;
        }
        
        .audio-header {
            gap: 10px;
        }
        
        .audio-info-area {
            gap: 10px;
        }
        
        .audio-cover {
            width: 44px;
            height: 44px;
        }
        
        .audio-name {
            font-size: 13px;
        }
        
        .audio-artist {
            font-size: 11px;
        }
        
        .player-footer {
            gap: 6px;
        }
        
        .volume-slider-container {
            width: 68px; /* 超小屏幕再短一些 */
        }
        
        .right-controls {
            gap: 4px;
        }
        
        .speed-btn {
            padding: 4px 8px;
            height: 30px;
            min-width: 40px;
            font-size: 10px;
        }
        
        .play-btn {
            width: 30px;
            height: 30px;
        }
        
        .volume-control {
            gap: 6px;
        }
        
    }
}



/* ===================== */
/* 视频样式 - 与article-item完全一致 */
/* ===================== */

/* 1. 确保所有容器都有overflow: hidden - 扩展视频支持 */
.postarticle-content video,
.postarticle-content figure[data-content-type="video"],
.postarticle-content figure[data-content-type="audio"] {
    overflow: hidden;
    border-radius: 6px;
}

/* 2. 为视频设置基础样式 */
.postarticle-content figure[data-content-type="video"] video {
    cursor: zoom-in;
    transition: transform 0.3s ease !important;
}

/* 3. 视频悬停效果 */
.postarticle-content figure[data-content-type="video"] video:hover {
    transform: scale(1.02) !important;
}

/* 4. 新增：视频包装器和视频样式（与article-item完全一致） */
.postarticle-content figure[data-content-type="video"] {
    position: relative;
    width: 100%;
    /*margin: 10px auto;*/margin: 0px 0px 10px 0px;
    cursor: pointer;
    aspect-ratio: 16/9; /* 设置视频的宽高比 */
    cursor: zoom-in;
}

.postarticle-content figure[data-content-type="video"] video {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 与图片集图片样式一致 */
    border-radius: 6px;
    background: #000;
    /* 隐藏播放控件 */
    -webkit-mask-image: -webkit-radial-gradient(white, black); /* 修复Safari的border-radius问题 */
}

/* 隐藏所有播放控件 */
.postarticle-content figure[data-content-type="video"] video::-webkit-media-controls {
    display: none !important;
}

.postarticle-content figure[data-content-type="video"] video::-webkit-media-controls-enclosure {
    display: none !important;
}

.postarticle-content figure[data-content-type="video"] video::-webkit-media-controls-panel {
    display: none !important;
}

.postarticle-content figure[data-content-type="video"] video::-webkit-media-controls-play-button {
    display: none !important;
}

.postarticle-content figure[data-content-type="video"] video::-webkit-media-controls-timeline {
    display: none !important;
}

.postarticle-content figure[data-content-type="video"] video::-webkit-media-controls-current-time-display {
    display: none !important;
}

.postarticle-content figure[data-content-type="video"] video::-webkit-media-controls-time-remaining-display {
    display: none !important;
}

.postarticle-content figure[data-content-type="video"] video::-webkit-media-controls-mute-button {
    display: none !important;
}

.postarticle-content figure[data-content-type="video"] video::-webkit-media-controls-volume-slider {
    display: none !important;
}

.postarticle-content figure[data-content-type="video"] video::-webkit-media-controls-fullscreen-button {
    display: none !important;
}

/* 5. 视频播放图标覆盖层（与article-item完全一致） */
.postarticle-content figure[data-content-type="video"]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 1;
}

/* 视频播放图标 */
.postarticle-content figure[data-content-type="video"]::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    background: rgba(0, 132, 255, 0.8);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    transition: all 0.3s ease;
}

/* 播放图标三角形 */
.postarticle-content figure[data-content-type="video"]::after {
    background: rgba(0, 0, 0, 0.7) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") no-repeat center center;
    background-size: 20px 20px;
}

/* 悬停时加深覆盖层 */
.postarticle-content figure[data-content-type="video"]:hover::before {
    background: rgba(0, 0, 0, 0.5);
}

.postarticle-content figure[data-content-type="video"]:hover::after {
    background-color: rgba(0, 132, 255, 1);
    /*transform: translate(-50%, -50%) scale(1.1);*/
}

/* 6. 音频样式更新 */
.postarticle-content figure[data-content-type="audio"] {
    width: 100%;
    /*margin: 10px auto;*/margin: 0px 0px 10px 0px;
}

.postarticle-content figure[data-content-type="audio"] audio {
    width: 100%;
    border-radius: 6px;
    background-color: #2d2d2d;
}

/* 7. 响应式调整 */
@media (max-width: 768px) {
    .postarticle-content figure[data-content-type="video"] {
        aspect-ratio: 4/3; /* 移动端使用更方的比例 */
    }
    
    /* 移动端调整视频缩放效果 */
    .postarticle-content figure[data-content-type="video"] video:hover {
        transform: scale(1.03) !important;
    }
}

/* 8. 如果有专门的视频播放按钮，移除原来的样式 */
.postarticle-content .video-wrapper,
.postarticle-content .video-play-overlay,
.postarticle-content .video-play-icon {
    display: none;
}





/* 3. 待办事项列表 - 只读模式 */
.postarticle-content ul[data-type="taskList"] {
    list-style: none;
    margin-left: 0;
    padding-left: 0;
    margin-bottom: 10px;
    background-color: #2b2b2b;
    border-radius: 6px;
}

.postarticle-content li[data-type="taskItem"] {
    display: flex;
    align-items: flex-start;
    margin-bottom: 10px;
    background-color: transparent;
    padding: 12px 16px;
    border-radius: 6px;
}

/* 禁用复选框交互 */
.postarticle-content li[data-type="taskItem"] label {
    display: flex;
    align-items: center;
    margin-right: 12px;
    margin-top: 3px;
    cursor: default; /* 改为默认光标，表示不可点击 */
    pointer-events: none; /* 禁用所有指针事件 */
    position: relative;
    min-height: 20px;
}

/* 隐藏原生的input和span元素 */
.postarticle-content li[data-type="taskItem"] label input[type="checkbox"],
.postarticle-content li[data-type="taskItem"] label span {
    display: none !important;
}

/* 使用自定义复选框 */
.postarticle-content li[data-type="taskItem"] label::before {
    content: '';
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-right: 0px;
    background-color: #383838;
    border-radius: 4px;
    vertical-align: middle;
    flex-shrink: 0;
}

/* 勾选状态的复选框 */
.postarticle-content li[data-type="taskItem"][data-checked="true"] label::before {
    background-color: #0084ff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 14px;
}

.postarticle-content li[data-type="taskItem"] div {
    flex: 1;
}

.postarticle-content li[data-type="taskItem"] p {
    margin: 0;
}

/* 完成的任务项样式 */
.postarticle-content li[data-type="taskItem"][data-checked="true"] {
    opacity: 0.8;
    background-color: transparent;
}

.postarticle-content li[data-type="taskItem"][data-checked="true"] p {
    text-decoration: line-through;
    color: #999;
}

/* 4. 折叠面板 - 修复箭头垂直对齐 */
.postarticle-content .details {
    /*margin: 10px auto;*/margin: 0px 0px 10px 0px;
    background-color: #2d2d2d;
    border-radius: 8px;
    overflow: hidden;
}

.postarticle-content .details summary {
    padding: 16px 20px;
    font-weight: 500;
    color: #fff;
    cursor: pointer;
    user-select: none;
    list-style: none;
    position: relative;
    transition: background-color 0.2s ease;
    background-color: #2b2b2b;
    padding-right: 50px; /* 为箭头留出空间 */
    display: block; /* 确保是块级元素 */
    line-height: 1.5; /* 确保行高一致 */
}

.postarticle-content .details summary:hover {
    background-color: #333333;
}

/* 箭头垂直对齐 */
.postarticle-content .details summary::after {
    content: '';
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%) rotate(0deg);
    transition: transform 0.2s ease;
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23888'%3E%3Cpath d='M11.5 22L18 16 11.5 10 13.5 8l8 8-8 8-2-2z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.postarticle-content .details[open] summary::after {
    transform: translateY(-50%) rotate(90deg);
}

.postarticle-content .details[open] summary {
    border-bottom: none;
}

.postarticle-content .details div[data-type="detailsContent"] {
    padding: 20px;
    background-color: #282828;
}

/* 5. 列表样式增强 */
.postarticle-content ul:not([data-type="taskList"]),
.postarticle-content ol {
    margin-left: 24px;
    margin-bottom: 18px;
}

.postarticle-content li {
    margin-bottom: 8px;
}

/* ===================== */
/* 所有图片通用样式 */
/* ===================== */

/* 1. 确保所有图片容器都有overflow: hidden */
.postarticle-content img,
.postarticle-content figure,
.postarticle-content [data-type="gallery"],
.postarticle-content [data-type="gallery-group"],
.postarticle-content [data-aspect-ratio],
.postarticle-content div:has(img),
.postarticle-content p:has(img) {
    overflow: hidden;
    border-radius: 6px;
}

/* 2. 为文章内容中所有图片设置基础样式 */
.postarticle-content img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 6px;
    background-color: #2d2d2d;
    cursor: zoom-in;
    transition: transform 0.3s ease !important;
    transform-origin: center center !important;
    margin: 0 auto;
    object-fit: contain;
}

/* 3. 修复图片集内图片的样式 */
.postarticle-content [data-type="gallery-image"] {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    object-fit: cover !important;
    border-radius: 4px;
}

/* 4. 修复figure内的图片 */
.postarticle-content figure img {
    width: 100%;
    height: auto;
    margin: 0;
}

/* 5. 图片悬停效果 - 统一应用 */
.postarticle-content img:hover {
    transform: scale(1.02) !important;
}

/* 6. 对于普通单张图片和figure内的图片，使用稍小的缩放 */
.postarticle-content img:not([data-type="gallery-image"]):hover {
    transform: scale(1.02) !important;
}

/* 7. 移除可能的父元素margin冲突 */
.postarticle-content figure {
    /*/*margin: 10px auto;*/margin: 0px 0px 10px 0px;*/
  margin: 0px 0px 10px 0px;
    max-width: 100%;
  position: relative;
}

.postarticle-content [data-type="gallery"] {
    /*/*margin: 10px auto;*/margin: 0px 0px 10px 0px;*/
    margin: 0px 0px 10px 0px;
    max-width: 100%;
}

/* 8. 对于display: inline-block的图片容器 */
.postarticle-content p img[style*="display: inline-block"] {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
}

/* ===================== */
/* 图片集特殊样式 */
/* ===================== */

/* 图片集网格 */
.postarticle-content [data-type="gallery"] > div[style*="display: grid"] {
    gap: 8px !important;
}

/* 图片组中的每个图片容器 */
.postarticle-content [data-type="gallery"] [data-aspect-ratio] {
    border-radius: 4px;
    position: relative;
    cursor: zoom-in;
}

.postarticle-content figcaption {
    text-align: center !important;
    font-size: 14px;
    color: #666;
    padding: 6px 0 0;
    line-height: 1.4;
    margin: 0 auto;
    max-width: 100%;
    display: block;

    
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 10px 12px; 
    color: #bbbbbb !important;
    text-align: left;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.7) 0%,
        rgba(0, 0, 0, 0.5) 50%,
        rgba(0, 0, 0, 0) 100%
    ); /* 渐变遮罩 */
    backdrop-filter: blur(2px); 
    box-sizing: border-box;
    z-index: 1; 
}

/*A*/



/* ===================== */
/* 其他样式 */
/* ===================== */

/* 引用块样式 */
.postarticle-content blockquote {
    margin: 20px 0;
    padding: 12px 20px;
    border-left: 4px solid #0084ff;
    background-color: #2d2d2d;
    color: #ccc;
    border-radius: 4px;
    font-style: italic;
}

/* 代码样式 */
/* ===================== */
/* 代码高亮样式 */
/* ===================== */
.postarticle-content pre:not([data-code-processed]) {
    opacity: 0;
    visibility: hidden;
    min-height: 60px; /* 防止布局跳动 */
}

.postarticle-content pre[data-loading] {
    opacity: 1;
    visibility: visible;
}

.postarticle-content pre[data-code-processed] {
    opacity: 1;
    visibility: visible;
}

.postarticle-content pre {
    background-color: #2b2b2b !important;
    color: #e6edf3;
    padding: 16px 16px 16px 50px;
    border-radius: 8px;
    overflow-x: auto;
    margin: 0px 0px 10px 0px;
    border: 1px solid #44444400;
    position: relative;
    box-sizing: border-box;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    scroll-margin-top: 80px;
    counter-reset: line;
}

.postarticle-content * + pre {
    margin: 10px 0; /* 上下边距各10px */
}


.postarticle-content p + pre,
.postarticle-content h1 + pre,
.postarticle-content h2 + pre,
.postarticle-content h3 + pre,
.postarticle-content h4 + pre,
.postarticle-content h5 + pre,
.postarticle-content h6 + pre,
.postarticle-content ul + pre,
.postarticle-content ol + pre,
.postarticle-content blockquote + pre {
    margin: 10px 0;
}

/* 有行号状态下的样式 */
.postarticle-content pre[data-line-numbers="true"] {
    padding-left: 50px; /* 显示行号时左边距 */
}

.postarticle-content pre[data-line-numbers="false"] {
    padding-left: 16px; /* 隐藏行号时左边距 */
}

/* 收起状态的代码块 */
.postarticle-content pre[collapsed="true"] {
    max-height: 150px; /* 收起时的高度限制 */
    overflow-y: hidden;
    position: relative;
    padding-bottom: 40px; /* 为展开按钮留出空间 */
}

/* 收起状态时的渐变遮罩 */
.postarticle-content pre[collapsed="true"]::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: linear-gradient(to bottom, transparent, rgba(43, 43, 43, 0.9));
    pointer-events: none;
    border-radius: 0 0 8px 8px;
}

/* 代码块内的代码 */
.postarticle-content pre code {
    background-color: transparent !important;
    padding: 0 !important;
    border: none !important;
    color: inherit !important;
    font-size: 0.9em;
    line-height: 1.6;
    display: block;
    white-space: pre;
    overflow-x: auto;
    margin: 0;
    transition: all 0.3s ease;
}

/* highlight.js 高亮后的样式覆盖 */
.postarticle-content pre code.hljs {
    background: transparent !important;
    padding: 0 !important;
    margin: 0;
}

/* 行号样式 */
.postarticle-content pre .line-numbers {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 40px;
    background-color: #252525;
    border-right: 0px solid #2b2b2b00;
    border-radius: 8px 0 0 8px;
    overflow: hidden;
    user-select: none;
    pointer-events: none;
    /*z-index: 1;*/
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.postarticle-content pre[data-line-numbers="false"] .line-numbers {
    opacity: 0;
    transform: translateX(-40px);
    pointer-events: none;
}

.postarticle-content pre[data-line-numbers="true"] .line-numbers {
    opacity: 1;
    transform: translateX(0);
}

.postarticle-content pre .line-numbers-list {
    padding: 45px 0 16px 0; /* 与代码内容对齐，考虑工具栏高度 */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.postarticle-content pre .line-number {
    display: block;
    width: 100%;
    text-align: center;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 0.9em;
    line-height: 1.6;
    color: #888;
    min-height: 1.6em;
    transition: color 0.2s ease;
}

.postarticle-content pre .line-number:hover {
    color: #ddd;
}

/* 代码块工具栏容器 */
.postarticle-content pre .code-header {
    position: absolute;
    top: 12px;
    left: 12px;
    right: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 20;
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.postarticle-content pre:hover .code-header {
    opacity: 1;
}

/* 左侧容器 - 展开收起按钮和语言标签 */
.postarticle-content pre .code-header-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* 展开收起按钮 */
.postarticle-content pre .collapse-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background-color: rgba(68, 68, 68, 0.3);
    border: 1px solid rgba(136, 136, 136, 0.2);
    border-radius: 6px;
    color: #888;
    cursor: pointer;
    padding: 0;
    transition: all 0.3s ease;
    font-size: 11px;
    font-weight: 600;
    font-family: 'SFMono-Regular', 'Consolas', monospace;
}

.postarticle-content pre .collapse-btn:hover {
    color: #ddd;
    border-color: rgba(0, 132, 255, 0.4);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.postarticle-content pre .collapse-btn:active {
    transform: translateY(0);
    box-shadow: none;
}

/* 展开收起按钮SVG图标 */
.postarticle-content pre .collapse-btn svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    stroke-width: 1.8;
    transition: all 0.3s ease;
}

/* 收起状态的按钮图标 - 向右箭头 */
.postarticle-content pre[collapsed="true"] .collapse-btn svg {
    transform: rotate(-90deg);
}

/* 展开状态的按钮图标 - 向下箭头 */
.postarticle-content pre:not([collapsed="true"]) .collapse-btn svg {
    transform: rotate(0deg);
}

/* 行号切换按钮 */
.postarticle-content pre .line-numbers-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background-color: rgba(68, 68, 68, 0.3);
    border: 1px solid rgba(136, 136, 136, 0.2);
    border-radius: 6px;
    color: #888;
    cursor: pointer;
    padding: 0;
    transition: all 0.3s ease;
    font-size: 11px;
    font-weight: 600;
    font-family: 'SFMono-Regular', 'Consolas', monospace;
    opacity: 1; /* 显示行号时高亮 */
}

.postarticle-content pre .line-numbers-toggle[data-line-numbers="false"] {
    opacity: 0.6; /* 隐藏行号时变暗 */
}

.postarticle-content pre .line-numbers-toggle:hover {
    color: #ddd;
    border-color: rgba(0, 132, 255, 0.4);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.postarticle-content pre .line-numbers-toggle:active {
    transform: translateY(0);
    box-shadow: none;
}

/* 语言标签样式 */
.postarticle-content pre .language-label {
    font-size: 11px;
    font-weight: 600;
    color: inherit;
    background-color: rgba(68, 68, 68, 0.3);
    padding: 4px 10px;
    border-radius: 6px;
    font-family: 'SFMono-Regular', 'Consolas', monospace;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: 1px solid rgba(136, 136, 136, 0.2);
    transition: all 0.2s ease;
    user-select: none;
    line-height: 1;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 各种编程语言的标签颜色 */
.postarticle-content pre .language-label[data-lang="JS"],
.postarticle-content pre .language-label[data-lang="JAVASCRIPT"] {
    color: #f7df1e;
}

.postarticle-content pre .language-label[data-lang="TS"],
.postarticle-content pre .language-label[data-lang="TYPESCRIPT"] {
    color: #3178c6;
}

.postarticle-content pre .language-label[data-lang="PY"],
.postarticle-content pre .language-label[data-lang="PYTHON"] {
    color: #3776ab;
}

.postarticle-content pre .language-label[data-lang="HTML"] {
    color: #e34c26;
}

.postarticle-content pre .language-label[data-lang="CSS"] {
    color: #264de4;
}

.postarticle-content pre .language-label[data-lang="PHP"] {
    color: #8ea2ff;
}

.postarticle-content pre .language-label[data-lang="JAVA"] {
    color: #007396;
}

.postarticle-content pre .language-label[data-lang="C"] {
    color: #a8b9cc;
}

.postarticle-content pre .language-label[data-lang="C++"],
.postarticle-content pre .language-label[data-lang="CPP"] {
    color: #00599c;
}

.postarticle-content pre .language-label[data-lang="JSON"] {
    color: #f0db4f;
}

.postarticle-content pre .language-label[data-lang="SQL"] {
    color: #336791;
}

.postarticle-content pre .language-label[data-lang="BASH"],
.postarticle-content pre .language-label[data-lang="SHELL"] {
    color: #4eaa25;
}

.postarticle-content pre .language-label[data-lang="RS"],
.postarticle-content pre .language-label[data-lang="RUST"] {
    color: #dea584;
}

.postarticle-content pre .language-label[data-lang="GO"] {
    color: #00add8;
}

.postarticle-content pre .language-label[data-lang="KT"],
.postarticle-content pre .language-label[data-lang="KOTLIN"] {
    color: #7f52ff;
}

.postarticle-content pre .language-label[data-lang="SWIFT"] {
    color: #f05138;
}

.postarticle-content pre .language-label[data-lang="RB"],
.postarticle-content pre .language-label[data-lang="RUBY"] {
    color: #cc342d;
}

.postarticle-content pre .language-label[data-lang="CSHARP"],
.postarticle-content pre .language-label[data-lang="CS"] {
    color: #178600;
}

.postarticle-content pre .language-label[data-lang="SCALA"] {
    color: #c22d40;
}

.postarticle-content pre .language-label[data-lang="DART"] {
    color: #00b4ab;
}

.postarticle-content pre .language-label[data-lang="R"] {
    color: #276dc3;
}

.postarticle-content pre .language-label[data-lang="MATLAB"] {
    color: #0076a8;
}

.postarticle-content pre .language-label[data-lang="LUA"] {
    color: #000080;
}

.postarticle-content pre .language-label[data-lang="PL"],
.postarticle-content pre .language-label[data-lang="PERL"] {
    color: #0298c3;
}

.postarticle-content pre .language-label[data-lang="SH"],
.postarticle-content pre .language-label[data-lang="ZSH"],
.postarticle-content pre .language-label[data-lang="FISH"] {
    color: #4eaa25;
}

.postarticle-content pre .language-label[data-lang="PS1"],
.postarticle-content pre .language-label[data-lang="POWERSHELL"] {
    color: #012456;
}

.postarticle-content pre .language-label[data-lang="MD"],
.postarticle-content pre .language-label[data-lang="MARKDOWN"] {
    color: #083fa1;
}

.postarticle-content pre .language-label[data-lang="YML"],
.postarticle-content pre .language-label[data-lang="YAML"] {
    color: #cb171e;
}

.postarticle-content pre .language-label[data-lang="TOML"] {
    color: #9c4221;
}

.postarticle-content pre .language-label[data-lang="INI"] {
    color: #d1d1d1;
}

.postarticle-content pre .language-label[data-lang="DOCKERFILE"] {
    color: #2496ed;
}

.postarticle-content pre .language-label[data-lang="GQL"],
.postarticle-content pre .language-label[data-lang="GRAPHQL"] {
    color: #e535ab;
}

.postarticle-content pre .language-label[data-lang="VUE"] {
    color: #41b883;
}

.postarticle-content pre .language-label[data-lang="JSX"] {
    color: #61dafb;
}

.postarticle-content pre .language-label[data-lang="TSX"] {
    color: #dd0031;
}

.postarticle-content pre .language-label[data-lang="SASS"],
.postarticle-content pre .language-label[data-lang="SCSS"] {
    color: #c6538c;
}

.postarticle-content pre .language-label[data-lang="LESS"] {
    color: #1d365d;
}

.postarticle-content pre .language-label[data-lang="STYLUS"] {
    color: #ff6347;
}

.postarticle-content pre .language-label[data-lang="ASM"],
.postarticle-content pre .language-label[data-lang="ASSEMBLY"] {
    color: #6e4c13;
}

.postarticle-content pre .language-label[data-lang="OBJC"],
.postarticle-content pre .language-label[data-lang="OBJECTIVE-C"] {
    color: #438eff;
}

.postarticle-content pre .language-label[data-lang="XML"] {
    color: #f0a00f;
}

.postarticle-content pre .language-label[data-lang="DIFF"] {
    color: #8c8c8c;
}

.postarticle-content pre .language-label[data-lang="MAKEFILE"] {
    color: #427819;
}

.postarticle-content pre .language-label[data-lang="VIM"],
.postarticle-content pre .language-label[data-lang="VIMSCRIPT"] {
    color: #019833;
}

.postarticle-content pre .language-label[data-lang="GIT"] {
    color: #f05032;
}

.postarticle-content pre .language-label[data-lang="NGINX"] {
    color: #009639;
}

.postarticle-content pre .language-label[data-lang="APACHE"] {
    color: #d22128;
}

.postarticle-content pre .language-label[data-lang="TEXT"],
.postarticle-content pre .language-label[data-lang="PLAINTEXT"] {
    color: #cccccc;
}

/* 右侧容器 - 复制按钮 */
.postarticle-content pre .code-header-right {
    display: flex;
    align-items: center;
}

/* 复制按钮容器 */
.postarticle-content pre .copy-btn-container {
    display: flex;
    align-items: center;
    position: relative;
}

/* 复制按钮样式 */
.postarticle-content pre .copy-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 24px;
    background-color: rgba(68, 68, 68, 0.3);
    border: 1px solid rgba(136, 136, 136, 0.2);
    border-radius: 6px;
    color: #888;
    cursor: pointer;
    padding: 0;
    transition: all 0.3s ease;
    position: relative;
    font-size: 11px;
    font-weight: 600;
    font-family: 'SFMono-Regular', 'Consolas', monospace;
}

.postarticle-content pre .copy-btn:hover {
    color: #ddd;
    border-color: rgba(0, 132, 255, 0.4);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.postarticle-content pre .copy-btn:active {
    transform: translateY(0);
    box-shadow: none;
}

/* 复制按钮SVG图标 */
.postarticle-content pre .copy-btn svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    stroke-width: 1.8;
    transition: stroke 0.3s ease;
}

.postarticle-content pre .copy-btn:hover svg {
    stroke: #0084ff;
}

/* 复制成功提示 */
.postarticle-content pre .copy-success {
    position: absolute;
    top: 100%;
    right: -10px;
    transform: translateY(8px);
    background-color: rgba(68, 68, 68, 0.9);
    color: white;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 500;
    z-index: 30;
    animation: fadeSlideOut 0.8s ease 1.2s forwards;
    display: flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 2px 8px rgba(68, 68, 68, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    white-space: nowrap;
    pointer-events: none;
    min-width: 70px;
    text-align: center;
    justify-content: center;
}

/* 箭头指向按钮中心 */
.postarticle-content pre .copy-success::before {
    content: '';
    position: absolute;
    bottom: 100%;
    right: 15px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid rgba(68, 68, 68, 0.9);
}

/* 动画 */
@keyframes fadeSlideOut {
    0% {
        opacity: 1;
        transform: translateY(8px);
    }
    70% {
        opacity: 1;
        transform: translateY(8px);
    }
    100% {
        opacity: 0;
        transform: translateY(4px);
    }
}

/* 展开按钮（在收起状态下显示在底部） */
.postarticle-content pre .expand-btn-bottom {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(68, 68, 68, 0.8);
    border: 1px solid rgba(136, 136, 136, 0.4);
    border-radius: 6px;
    color: #ddd;
    padding: 6px 16px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 6px;
    z-index: 25;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.postarticle-content pre .expand-btn-bottom:hover {
    border-color: rgba(0, 132, 255, 0.6);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.postarticle-content pre .expand-btn-bottom svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    stroke-width: 2;
}

/* ===================== */
/* 代码块加载动画样式 */
/* ===================== */

/* 加载遮罩层 - 覆盖整个代码块 */
.postarticle-content pre .code-loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    pointer-events: auto; /* 阻止交互 */
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(43, 43, 43, 0.95); /* 更透明：0.15改为0.1 */
    backdrop-filter: blur(4px); /* 给遮罩添加模糊效果 */
    -webkit-backdrop-filter: blur(4px); /* Safari 支持 */
    border-radius: 8px;
    opacity: 1;
}

/* 删除模糊遮罩层，现在主遮罩已经有模糊效果了 */
.postarticle-content pre .code-blur-mask {
    display: none;
}

/* 加载器容器 - 透明背景 */
.postarticle-content pre .code-loader {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
    background: transparent;
    border: none;
    box-shadow: none;
    min-width: auto;
    min-height: auto;
}

/* 旋转动画 - 延长到2秒 */
.postarticle-content pre .code-spinner {
    animation: codeSpin 2s linear infinite;
    margin-bottom: 12px;
}

@keyframes codeSpin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* 加载文本 */
.postarticle-content pre .code-loading-text {
    color: #aaa; 
    font-size: 14px; 
    font-weight: 500;
}

/* 移除遮罩时的动画 - 改为直接消失 */
.postarticle-content pre .code-loading-overlay.fade-out {
    display: none;
}

/* 确保代码块有正确的层级 */
.postarticle-content pre {
    position: relative;
    isolation: isolate;
}

/* 确保代码块有正确的层级 - 带行号版本 */
.postarticle-content pre[data-line-numbers="true"] {
    padding-left: 50px;
}

/* 防止代码内容被工具栏遮挡 */
.postarticle-content pre {
    padding-top: 45px;
}

/* ===================== */
/* 移动端适配 */
/* ===================== */

@media (max-width: 768px) {
    .postarticle-content pre {
        padding: 14px 12px 12px 40px; /* 移动端减少左边距 */
        margin: 8px 0;
    }
    
    .postarticle-content pre[data-line-numbers="true"] {
        padding-left: 40px;
    }
    
    .postarticle-content pre[data-line-numbers="false"] {
        padding-left: 12px;
    }
    
    .postarticle-content pre[collapsed="true"] {
        max-height: 120px;
        padding-bottom: 35px;
    }
    
    .postarticle-content pre .line-numbers {
        width: 34px; /* 移动端减少宽度 */
    }
    
    .postarticle-content pre[data-line-numbers="false"] .line-numbers {
        transform: translateX(-32px);
    }
    
    .postarticle-content pre .line-numbers-list {
        padding: 40px 0 14px 0;
    }
    
    .postarticle-content pre .line-number {


    }
    
    .postarticle-content pre .code-header {
        top: 8px;
        left: 8px;
        right: 8px;
    }
    
    .postarticle-content pre .code-header-left {
        gap: 6px;
    }
    
    .postarticle-content pre .collapse-btn {
        width: 22px;
        height: 22px;
    }
    
    .postarticle-content pre .collapse-btn svg {
        width: 12px;
        height: 12px;
    }
    
    .postarticle-content pre .line-numbers-toggle {
        width: 22px;
        height: 22px;
    }
    
    .postarticle-content pre .language-label {
        padding: 4px 8px;
        height: 22px;
    }
    
    .postarticle-content pre .copy-btn {
        width: 28px;
        height: 22px;
    }
    
    .postarticle-content pre .copy-btn svg {
        width: 12px;
        height: 12px;
    }
    
    .postarticle-content pre .copy-success {
        right: -8px;
        transform: translateY(6px);
        padding: 3px 8px;
        min-width: 60px;
    }
    
    .postarticle-content pre .copy-success::before {
        right: 12px;
    }
    
    .postarticle-content pre .expand-btn-bottom {
        bottom: 8px;
        padding: 5px 12px;
    }
    
    .postarticle-content pre .expand-btn-bottom svg {
        width: 12px;
        height: 12px;
    }
    
    @keyframes fadeSlideOut {
        0% {
            opacity: 1;
            transform: translateY(6px);
        }
        100% {
            opacity: 0;
            transform: translateY(3px);
        }
    }
    
    .postarticle-content pre {
        padding-top: 40px;
    }
    
    .postarticle-content pre .code-loading-overlay {
        border-radius: 6px;
        backdrop-filter: blur(3px); /* 移动端减少模糊 */
        -webkit-backdrop-filter: blur(3px);
    }
    
    .postarticle-content pre .code-loader {
        padding: 15px;
    }
    
    .postarticle-content pre .code-spinner {
        width: 28px;
        height: 28px;
        margin-bottom: 10px;
        animation: codeSpin 1.8s linear infinite;
    }
    
    .postarticle-content pre .code-loading-text {
        font-size: 12px;
    }
}

/* 性能优化：减少动画开销 */
@media (prefers-reduced-motion: reduce) {
    .postarticle-content pre .code-spinner {
        animation: codeSpin 3s linear infinite;
    }
    
    .postarticle-content pre[data-line-numbers="false"] .line-numbers {
        transition: none;
    }
}

/* 确保加载状态下的代码块不可交互 */
.postarticle-content pre .code-loading-overlay {
    pointer-events: auto;
}

.postarticle-content pre .code-loading-overlay * {
    pointer-events: auto;
}

/* 防止背景色变化 */
.postarticle-content pre {
    background-color: #2b2b2b !important;
    transition: background-color 0s !important;
}







/* 表格样式 */
.postarticle-content table {
    width: 100% !important;
    border-collapse: collapse;
    /*margin: 10px auto;*/margin: 0px 0px 10px 0px;
    background-color: #2d2d2d;
    border-radius: 6px;
    overflow: hidden;
}

.postarticle-content th,
.postarticle-content td {
    padding: 12px 16px;
    border: 1px solid #333;
    text-align: left;
}

.postarticle-content th {
    background-color: #383838;
    font-weight: 500;
    color: #fff;
}

.postarticle-content tr:nth-child(even) {
    background-color: #282828;
}

/* 分隔线 */
.postarticle-content hr {
    border: none;
    height: 1px;
    background-color: #333;
    margin: 30px 0;
}

/* 空内容状态 */
.postarticle-empty {
    text-align: center;
    padding: 40px 20px;
    color: #999;
    font-style: italic;
    background-color: #2d2d2d;
    border-radius: 8px;
    margin: 20px 0;
}

/* 元信息底部样式 */
.postarticle-meta-bottom {
    margin-top: 10px;
    padding: 20px 0;
    border-top: 1px solid #333;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: space-between;
}

.postarticle-meta-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 200px;
}

.postarticle-categories,
.postarticle-tags,
.postarticle-date,
.postarticle-modified,
.postarticle-stats {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: #ccc;
}

.postarticle-meta-icon {
    color: #888;
    width: 16px;
    text-align: center;
}

/* 分类样式 */
.postarticle-category {
    color: #0084ff;
    text-decoration: none;
    background-color: rgba(0, 132, 255, 0.1);
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.postarticle-category:hover {
    background-color: rgba(0, 132, 255, 0.2);
    color: #3399ff;
    text-decoration: none;
}

/* 标签样式 */
.postarticle-tag {
    color: #ddd;
    text-decoration: none;
    background-color: #383838;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 13px;
    display: inline-block;
    transition: all 0.2s ease;
}

.postarticle-tag:hover {
    background-color: #444;
    color: #fff;
    text-decoration: none;
}

/* 统计样式 */
.postarticle-stats {
    display: flex;
    gap: 20px;
}

.postarticle-stat {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #ccc;
}

.postarticle-stat i {
    color: #888;
}

.postarticle-stat-value {
    font-weight: 500;
    color: #fff;
}



/* 响应式设计 */
@media (max-width: 768px) {
    .postarticle-container {
        padding: 0;
    }
    
    .postarticle-content {
        font-size: 15px;
    }
    
    .postarticle-content h1 {
        font-size: 1.6rem;
    }
    
    .postarticle-content h2 {
        font-size: 1.3rem;
    }
    
    .postarticle-content h3 {
        font-size: 1.1rem;
    }
    
    /* 移动端调整图片样式 */
    .postarticle-content p:has(img) {
        margin: 15px auto;
    }
    
    /* 移动端调整图片集样式 */
    .postarticle-content [data-type="gallery"] {
        margin: 15px 0;
    }
    
    .postarticle-content [data-type="gallery"] > div[style*="display: grid"] {
        gap: 4px !important;
    }
    
    /* 移动端调整图片缩放效果 */
    .postarticle-content img:hover {
        transform: scale(1.03) !important;
    }
    
    .postarticle-content img:not([data-type="gallery-image"]):hover {
        transform: scale(1.01) !important;
    }
    
    /* 移动端调整分栏布局 */
    .postarticle-content .columns {
        /*flex-direction: column;*/
        gap: 0.8em;
    }
    
    .postarticle-content .column {
        width: 100%;
    }
    
    /* 移动端调整折叠面板 */
    .postarticle-content .details summary {
        padding: 14px 16px;
        padding-right: 40px;
    }
    
    .postarticle-content .details summary::after {
        right: 16px;
    }
    
    .postarticle-meta-bottom {
        flex-direction: column;
        gap: 15px;
    }
    
    .postarticle-meta-section {
        min-width: auto;
        width: 100%;
    }
    

    
    .postarticle-stats {
        justify-content: flex-start;
    }
}



/* 评论 */
.comments-header {
    margin-bottom: 10px;
    color: #888888;
    text-align: center;
}

/*.comments-header-title {
    font-size: 1.6rem;
    font-weight: 600;
    color: #0084ff;
    margin: 0 0 20px 0;
    padding-bottom: 2px;
    position: relative;
}

.comments-header-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 50px;
    height: 3px;
    background: #0084ff;
    border-radius: 2px;
}*/
/* 评论区域滚动边距 */
#comments-section {
    scroll-margin-top: 80px; /* 确保不会被固定导航栏遮挡 */
}

/* 时间 */




































/* ===================== */
/* 头部信息样式 */
/* ===================== */

.postarticle-header {

}

.postarticle-header-main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    gap: 20px;
}

/* 作者信息容器 */
.postarticle-header-author {
    display: flex;
    align-items: center;
    gap: 8px; /* 控制图标和文字间距 */
    white-space: nowrap;
}

.postarticle-header-icon {
    color: #888;
    font-size: 15px;
    flex-shrink: 0;
}

.postarticle-author-name {
    display: flex;
    align-items: center;
    font-size: 15px;
    color: #ccc;
    white-space: nowrap;
}

.postarticle-author-name a {
    color: #ccc;
    text-decoration: none;
    font-weight: 500;
}

.postarticle-author-name a:hover {
    color: #ccc;
    text-decoration: none;
}

/* 统计信息容器 */
.postarticle-header-stats {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: nowrap;
}

.postarticle-header-stat,
.postarticle-header-date {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 15px;
    color: #ccc;
    white-space: nowrap;
}

.postarticle-header-stat i,
.postarticle-header-date i {
    color: #888;
    font-size: 15px;
}

/* ===================== */
/* 底部元信息样式 */
/* ===================== */

.postarticle-footer {
    /*margin-top: 30px;*/
    padding-top: 12px;
    border-top: 1px solid #2b2b2b;
}

.postarticle-categories-tags {
    display: flex;
    flex-direction: row; /* 改为行布局 */
    flex-wrap: wrap; /* 允许换行 */
    gap: 20px; /* 增加间距 */
    margin-bottom: 10px;
    align-items: flex-start; /* 顶部对齐 */
}

/* 分类和标签共用样式 */
.postarticle-categories,
.postarticle-tags {
    display: flex;
    align-items: center; /* 垂直居中 */
    gap: 10px;
    font-size: 15px;
    color: #ccc;
    flex-wrap: wrap; /* 允许换行 */
    flex: 1; /* 各占一半宽度 */
    min-width: 0; /* 防止内容溢出 */
}

/* 分类标签图标垂直居中 */
.postarticle-meta-icon {
    color: #888;
    width: 16px;
    height: 16px;
    display: flex;
    /*align-items: center;*/
    justify-content: center;
    flex-shrink: 0;
    line-height: 1;
}

/* 分类和标签内容容器 */
.postarticle-categories-content,
.postarticle-tags-content {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    flex: 1;
    min-width: 0;
}

/* 分类标签链接样式 - 统一为灰色 */
.postarticle-category,
.postarticle-tag {
    display: inline-flex; /* 使用inline-flex确保更好的垂直对齐 */
    align-items: center;
    text-decoration: none;
    transition: opacity 0.2s ease;
    height: fit-content; /* 高度自适应 */
    line-height: 1.4; /* 行高一致 */
}

/* 分类改为和标签一样的灰色 */
.postarticle-category {
    color: #ddd !important; /* 使用!important确保覆盖原有样式 */
    background-color: #383838 !important;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 15px;
    font-weight: 500;
}

.postarticle-category:hover {
    opacity: 0.8;
    color: #ddd !important;
}

.postarticle-tag {
    color: #ddd;
    background-color: #383838;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 15px;
}

.postarticle-tag:hover {
    opacity: 0.8;
    color: #ddd;
}

/* 修改时间样式 - 100%宽度 */
.postarticle-modified-fullwidth {
    width: 100%;
}

.postarticle-modified {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    color: #888;
    padding: 10px;
    background-color: #2b2b2b;
    border-radius: 4px;
    width: 100%;
    box-sizing: border-box;
}

/* ===================== */
/* 响应式设计 */
/* ===================== */

@media (max-width: 768px) {
    /* 头部信息移动端适配 */
    .postarticle-header {
        overflow-x: auto; /* 防止内容溢出 */
        -webkit-overflow-scrolling: touch; /* iOS平滑滚动 */
        scrollbar-width: thin; /* Firefox */
        scrollbar-color: #444 #2d2d2d; /* Firefox */
    }
    
    .postarticle-header-main {
        min-width: min-content; /* 防止内容换行 */
        gap: 15px;
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
    }
    
    /* 确保作者信息紧密排列 */
    .postarticle-header-author {
        display: flex;
        align-items: center;
        gap: 6px; /* 移动端间距更小 */
        flex-shrink: 0; /* 防止被压缩 */
    }
    
    .postarticle-header-icon {
        font-size: 15px;
    }
    
    .postarticle-author-name {
        font-size: 15px;
        white-space: nowrap;
    }
    
    .postarticle-header-stats {
        display: flex;
        align-items: center;
        gap: 15px;
        flex-shrink: 0; /* 防止被压缩 */
    }
    
    .postarticle-header-stat,
    .postarticle-header-date {
        font-size: 15px;
        gap: 6px;
    }
    
    .postarticle-header-stat i,
    .postarticle-header-date i {
        font-size: 15px;
    }
    
    /* 自定义滚动条样式 */
    .postarticle-header::-webkit-scrollbar {
        height: 4px;
    }
    
    .postarticle-header::-webkit-scrollbar-track {
        background: #2d2d2d;
        border-radius: 2px;
    }
    
    .postarticle-header::-webkit-scrollbar-thumb {
        background: #444;
        border-radius: 2px;
    }
    
    .postarticle-header::-webkit-scrollbar-thumb:hover {
        background: #555;
    }
    
    /* 底部信息移动端适配 */
    .postarticle-footer {
        margin-top: 20px;
        padding-top: 16px;
    }
    
    /* 移动端分类和标签改为垂直布局 */
    .postarticle-categories-tags {
        flex-direction: column;
        gap: 12px;
    }
    
    .postarticle-categories,
    .postarticle-tags {
        flex-direction: row; /* 保持水平布局 */
        align-items: center;
        gap: 8px;
        width: 100%;
    }
    
    /* 确保图标和内容垂直对齐 */
    .postarticle-categories-content,
    .postarticle-tags-content {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        align-items: center;
    }
    
    .postarticle-category,
    .postarticle-tag {
        margin: 0;
    }
    
    .postarticle-modified-fullwidth {

    }
    
    .postarticle-modified {
        font-size: 15px;
        padding: 8px;
    }
}

@media (max-width: 480px) {
    /* 超小屏幕进一步调整间距 */
    .postarticle-header-main {
        gap: 10px;
    }
    
    .postarticle-header-author {
        gap: 5px;
    }
    
    .postarticle-header-stats {
        gap: 10px;
    }
    
    .postarticle-author-name {
        font-size: 15px;
    }
    
    .postarticle-header-stat,
    .postarticle-header-date {
        font-size: 15px;
        gap: 4px;
    }
    
    .postarticle-header-stat i,
    .postarticle-header-date i {
        font-size: 15px;
    }
    
    /* 确保图标和文字不换行 */
    .postarticle-header-stat span,
    .postarticle-header-date span {
        white-space: nowrap;
    }
    
    /* 超小屏幕调整分类标签布局 */
    .postarticle-categories,
    .postarticle-tags {
        flex-direction: row;
        align-items: center;
        gap: 6px;
    }
    
    .postarticle-categories-content,
    .postarticle-tags-content {
        gap: 4px;
    }
    
    .postarticle-category,
    .postarticle-tag {
        font-size: 15px;
        padding: 3px 8px;
    }
}

/* 修复桌面端和移动端的flex布局 */
@media (min-width: 769px) {
    .postarticle-header-main {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
    }
    
    .postarticle-header-author {
        display: flex;
        align-items: center;
        gap: 8px;
    }
    
    .postarticle-header-stats {
        display: flex;
        align-items: center;
        gap: 12px;
    }
}






































/* ===================== */
/* 行内代码样式 - 简洁版 */
/* ===================== */

/* 针对所有行内代码，但排除代码块中的代码 */
.postarticle-content :not(pre) > code {
    font-size: 0.88em;
    background-color: #2b2b2b;
    color: #40a3ff;
    padding: 0.1em 0.4em;
    border-radius: 3px;
    border: 1px solid #3a3a3a;
    vertical-align: middle;
    display: inline;
      margin: 0 0.2em;
}

/* 针对段落中的行内代码微调 */
.postarticle-content p code {
    transform: translateY(-0.5px);
}

/* 针对justify对齐的段落 */
.postarticle-content p[style*="justify"] code {
    transform: translateY(-0.5px);
}

/* 行内代码在链接中 */
.postarticle-content a code {
    background-color: rgba(0, 132, 255, 0.1);
    border-color: rgba(0, 132, 255, 0.3);
    color: #0084ff;
}

/* 行内代码在标题中 */
.postarticle-content h1 code,
.postarticle-content h2 code,
.postarticle-content h3 code,
.postarticle-content h4 code,
.postarticle-content h5 code,
.postarticle-content h6 code {
    font-size: 0.8em;
    padding: 0.05em 0.3em;
    background-color: rgba(0, 132, 255, 0.15);
    border-color: rgba(0, 132, 255, 0.25);
    color: #66b3ff;
    transform: translateY(-1px);
}