/* 首屏稳定性优化：占位与滚动条 */
    .post-container {
        min-height: 80vh;
    }
    .post-side-actions,
    .author-card {
        min-height: 120px;
    }
    body { 
        margin: 0; 
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        background: var(--bg);
        color: var(--text);
        line-height: 1.6;
        overflow-x: visible; /* 必须显式允许滚动，防止某些全局样式设置了 hidden 破坏 sticky */
    }
    html {
        overflow-x: visible;
    }
    .post-container {
        width: min(1400px, calc(100% - 24px));
        margin: 50px auto 40px auto;
        box-sizing: border-box;
        padding-right: 50px;
        display: flex;
        align-items: stretch; 
        gap: 32px;
        max-width: 100%;
        position: relative; /* 为左侧固定栏提供定位参考 */
    }
    
    /* 左侧固定操作栏 */
    .post-side-actions {
        position: fixed;
        top: 50%;
        transform: translateY(-50%);
        left: calc(50% - min(700px, (50vw - 12px)) - 85px);
        width: 60px;
        z-index: 100;
    }
    .sticky-actions-wrap {
        display: flex;
        flex-direction: column;
        gap: 12px;
        align-items: center;
        padding: 20px 0;
    }
    .side-action-item {
        width: 50px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        text-decoration: none;
        color: var(--muted);
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        cursor: pointer;
        background: none;
        border: none;
        padding: 0;
    }
    .side-action-icon {
        width: 44px;
        height: 44px;
        background: var(--panel);
        border: 1.5px solid var(--line);
        border-radius: 14px; /* 改为更有个性的圆角矩形 */
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
        color: var(--muted);
    }
    .side-action-icon svg {
        width: 20px;
        height: 20px;
        stroke-width: 2.2;
    }
    .side-action-text {
        font-size: 10px;
        font-weight: 800;
        white-space: nowrap;
        opacity: 0.8;
    }
    .side-action-item:hover .side-action-icon {
        transform: scale(1.1) rotate(5deg);
        border-color: var(--primary);
        color: var(--primary);
        background: var(--primary-soft);
        box-shadow: 0 8px 20px var(--primary-soft);
    }
    .side-action-item:hover .side-action-text {
        color: var(--primary);
        opacity: 1;
    }

    /* 晚星社区通用模态框样式 */
    .晚星社区-modal-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(15, 23, 42, 0.6);
        backdrop-filter: blur(8px);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 9999;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .晚星社区-modal-overlay.is-show {
        opacity: 1;
        visibility: visible;
    }
    .晚星社区-modal-content {
        background: var(--panel);
        border: 1px solid var(--line);
        border-radius: 28px;
        padding: 32px;
        width: min(420px, 90%);
        text-align: center;
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
        transform: translateY(20px);
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .晚星社区-modal-overlay.is-show .晚星社区-modal-content {
        transform: translateY(0);
    }
    .晚星社区-checkin-icon {
        font-size: 48px;
        margin-bottom: 20px;
        display: inline-block;
    }
    .晚星社区-modal-title {
        font-size: 20px;
        font-weight: 800;
        margin: 0 0 12px 0;
        color: var(--text);
    }
    .晚星社区-modal-msg {
        font-size: 15px;
        color: var(--muted);
        margin-bottom: 24px;
        line-height: 1.6;
    }
    .晚星社区-modal-btn {
        flex: 1;
        padding: 14px;
        border-radius: 16px;
        font-weight: 800;
        font-size: 15px;
        cursor: pointer;
        transition: all 0.2s;
        border: none;
        background: var(--primary);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .晚星社区-modal-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px var(--primary-soft);
        opacity: 0.9;
    }
    .side-action-item.active .side-action-icon {
        background: var(--primary);
        color: #fff;
        border-color: var(--primary);
    }
    .side-action-item.liked .side-action-icon {
        border-color: var(--primary);
        color: var(--primary);
        background: var(--primary-soft);
    }
    .side-action-item.liked .side-action-icon svg {
        fill: var(--primary);
    }
    .side-action-item.liked .side-action-text {
        color: var(--primary);
        opacity: 1;
    }

    .back-nav-area { display: none; } /* 隐藏旧的返回区域 */

    /* 帖子主内容区 */
    .post-main-content { 
        flex: 1; 
        min-width: 0;
        background: var(--panel);
        border: 1px solid var(--line);
        border-radius: 32px;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
        overflow: hidden;
    }
    
    /* 侧边栏容器 */
    .post-sidebar {
        width: 340px;
        flex-shrink: 0;
        position: relative;
        align-self: stretch; /* 核心：让侧边栏容器拉伸到与主内容一致的高度 */
    }
    .sticky-sidebar {
        position: sticky;
        top: 50px; /* 避开顶部导航栏 */
        z-index: 10;
        display: flex;
        flex-direction: column;
        gap: 24px;
        height: fit-content; /* 重要：防止 sticky 元素拉伸到父容器高度 */
    }
    
    .post-card {
        background: transparent;
        border-radius: 0;
        border: none;
        padding: 20px 40px 24px 40px; /* 进一步压缩顶部内边距 */
        margin-bottom: 0;
        box-shadow: none;
    }
    
    .post-header { 
        margin-bottom: 16px; 
        position: relative; 
        padding-bottom: 20px;
        border-bottom: none;
    }
    .post-header::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 1px;
        background: #000;
        pointer-events: none;
    }
    .post-header::before {
        display: none;
    }
    .post-title-area {
        line-height: 1.4;
    }
    .post-title { 
        font-size: 24px; /* 进一步优化标题字号 */
        font-weight: 900; 
        color: var(--text); 
        line-height: 1.3; 
        margin: 0; 
        letter-spacing: -0.5px; 
        display: inline;
        vertical-align: middle;
    }
    .post-meta-top { 
        display: flex; 
        align-items: center; 
        gap: 16px; 
        font-size: 13px; 
        color: var(--muted); 
        font-weight: 700; 
        margin-top: 8px; /* 极致压缩元信息与标题的间距 */
        clear: both;
    }
    .meta-item {
        display: flex;
        align-items: center;
        gap: 6px;
    }
    .meta-item svg {
        opacity: 0.8;
        color: var(--primary);
    }
    
    /* 作者操作按钮 */
    .post-author-actions { 
        float: right; 
        display: flex; 
        gap: 12px; 
        margin-left: 20px;
        margin-bottom: 10px;
    }
    .btn-action-small { padding: 8px 16px; border-radius: 10px; font-size: 13px; font-weight: 800; cursor: pointer; display: flex; align-items: center; gap: 6px; transition: all 0.2s; border: 1px solid var(--line); background: var(--panel); color: var(--muted); }
    .btn-action-small:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); transform: translateY(-2px); }
    .btn-delete:hover { border-color: #ef4444; color: #ef4444; background: #fee2e2; }
    .comment-delete-btn:hover { border-color: #ef4444; color: #ef4444; background: #fee2e2; }

    /* 编辑模式样式 */
    .edit-mode-active .post-view-mode { display: none; }
    .post-edit-mode { display: none; }
    .edit-mode-active .post-edit-mode { display: block; }
    .edit-input { width: 100%; padding: 16px 20px; background: var(--bg); border: 2px solid var(--line); border-radius: 16px; font-size: 18px; font-weight: 800; color: var(--text); margin-bottom: 20px; transition: all 0.3s; }
    .edit-input:focus { outline: none; border-color: var(--primary); background: var(--panel); }
    .edit-textarea { width: 100%; min-height: 400px; padding: 20px; background: var(--bg); border: 2px solid var(--line); border-radius: 20px; font-size: 16px; line-height: 1.8; color: var(--text); font-family: inherit; resize: vertical; margin-bottom: 20px; transition: all 0.3s; }
    .edit-textarea:focus { outline: none; border-color: var(--primary); background: var(--panel); }
    .edit-actions { display: flex; gap: 16px; justify-content: flex-end; align-items: stretch; }
    .btn-edit-cancel { padding: 14px 28px; background: var(--bg); color: var(--muted); border: 1px solid var(--line); border-radius: 16px; font-size: 15px; font-weight: 800; cursor: pointer; transition: all 0.2s; display: flex; align-items: center; justify-content: center; }
    .btn-edit-cancel:hover { border-color: var(--primary); color: var(--primary); background: var(--panel); transform: translateY(-2px); }
    
    /* 编辑记录样式 */
    .edit-history-info { margin-top: 24px; padding-top: 16px; border-top: 1px dashed var(--line); font-size: 12px; color: var(--muted); }
    .edit-history-tag { display: inline-block; padding: 2px 8px; background: var(--bg); border-radius: 4px; margin-right: 8px; font-weight: 700; }

    .badge { 
        padding: 4px 12px; 
        border-radius: 10px; 
        font-size: 12px; 
        font-weight: 800; 
        background: var(--primary-soft); 
        color: var(--primary); 
        text-decoration: none;
        display: inline-block;
        transition: all 0.2s;
    }
    .badge:hover {
        background: var(--primary);
        color: #fff;
        transform: translateY(-2px);
    }
    .badge-sticky {
        background: #fee2e2;
        color: #ef4444;
    }
    .post-title-badges {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        vertical-align: middle;
        margin-right: 8px;
        margin-bottom: 4px;
    }

    /* 右下角简约悬浮按钮组 */
    .floating-actions {
        position: fixed;
        bottom: 112px;
        right: max(132px, calc(50% - 632px));
        display: flex;
        flex-direction: column;
        background: var(--panel);
        border-radius: 12px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
        border: 1px solid var(--line);
        overflow: hidden;
        z-index: 1000;
        opacity: 0;
        visibility: hidden;
        transform: translateY(20px);
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        backdrop-filter: blur(8px);
    }
    .floating-actions.is-visible {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
    .float-btn {
        width: 44px;
        height: 44px;
        background: transparent;
        border: none;
        color: var(--muted);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.2s ease;
    }
    .float-btn:hover {
        color: var(--primary);
        background: var(--primary-a1);
    }
    .float-btn:first-child {
        border-bottom: 1px solid var(--line);
    }
    html[data-theme="dark"] .floating-actions {
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    }
    
    @media (max-width: 1000px) {
        .floating-actions {
            bottom: calc(100px + env(safe-area-inset-bottom));
            right: 20px;
        }
        .float-btn {
            width: 36px;
            height: 36px;
        }
        .float-btn svg {
            width: 16px;
            height: 16px;
        }
    }
    
    /* Markdown 渲染样式 */
    .post-body { 
        font-size: 17px;
        color: var(--text) !important;
        line-height: 1.8;
        word-wrap: break-word;
        padding-bottom: 8px;
    }
    .markdown-body { color: var(--text) !important; } /* 确保整个 Markdown 正文用正确颜色 */
    .markdown-body * { color: inherit !important; } /* 强制所有子元素继承父级颜色，覆盖第三方库（如 Vditor）的硬编码颜色 */
    #rendered-post-content { color: var(--text) !important; }
    #rendered-post-content * { color: inherit !important; }
    .markdown-body > *:first-child { margin-top: 0 !important; }
    .markdown-body h1, .markdown-body h2, .markdown-body h3 { margin-top: 1em; margin-bottom: 0.5em; font-weight: 900; color: var(--text) !important; }
    .markdown-body code { background: rgba(0,0,0,0.05); padding: 2px 6px; border-radius: 4px; font-family: monospace; color: var(--text) !important; }
    html[data-theme="dark"] .markdown-body code { background: rgba(255,255,255,0.1); }
    .markdown-body pre { background: #1e293b; color: #e2e8f0 !important; padding: 20px; border-radius: 16px; overflow-x: auto; margin: 1.5em 0; box-shadow: 0 10px 30px rgba(0,0,0,0.1); }
    .markdown-body pre * { color: inherit !important; }
    html[data-theme="dark"] .markdown-body pre { background: #0f172a; border: 1px solid #334155; }
    .markdown-body img { 
        max-width: 100%; 
        height: auto !important; /* 强制高度自适应，防止被压缩 */
        border-radius: 12px; 
        box-shadow: 0 4px 12px rgba(0,0,0,0.05); 
        display: block; /* 恢复为块级元素，确保大图正常换行 */
        margin: 1.5em auto !important; /* 强制居中 */
        cursor: zoom-in;
        position: relative;
        background: #f1f5f9; 
        opacity: 1; /* 直接显示，不做淡入动画，避免闪烁 */
    }
    /* 针对表情包图片的特殊优化 - 必须带有 .emoticon-render 类名 */
    .markdown-body img.emoticon-render {
        display: inline-block !important; /* 表情包允许行内显示 */
        vertical-align: middle !important;
        margin: 0 2px !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        background: transparent !important;
        max-height: 2em !important; /* 只有表情包限制高度 */
        width: auto !important;
        opacity: 1 !important;
    }
    /* 兼容性：如果图片在段落中且不是唯一元素，也视为行内图（如混在文字中的图片） */
    .markdown-body p img:not(:only-child) {
        display: inline-block;
        margin: 0 4px;
        vertical-align: middle;
    }
    
    /* 图片正在加载或加载完成的状态 */
    .markdown-body img.img-loading {
        opacity: 1;
        background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
        background-size: 200% 100%;
        animation: img-skeleton 1.5s infinite;
    }
    
    .markdown-body img.img-loaded {
        opacity: 1;
        background: transparent;
    }
    
    .markdown-body img.img-error {
        opacity: 1;
        background: #fee2e2;
        min-height: 100px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    @keyframes img-skeleton {
        0% { background-position: 200% 0; }
        100% { background-position: -200% 0; }
    }

    .markdown-body img:hover { transform: scale(1.01); }
    
    .post-footer { margin-top: 16px; padding-top: 32px; border-top: 1px solid var(--line); display: flex; gap: 20px; }
    
    /* 投票组件样式 */
    .post-poll-card {
        background: var(--bg);
        border-radius: 24px;
        border: 1px solid var(--line);
        padding: 24px;
        margin: 32px 0;
    }
    .poll-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 20px;
    }
    .poll-title {
        font-size: 18px;
        font-weight: 900;
        color: var(--text);
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .poll-badge {
        font-size: 11px;
        padding: 4px 10px;
        background: var(--primary-soft);
        color: var(--primary);
        border-radius: 8px;
        font-weight: 800;
    }
    .poll-options-list {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
    .poll-option-item {
        position: relative;
        background: var(--panel);
        border: 1px solid var(--line);
        border-radius: 14px;
        padding: 14px 18px;
        cursor: pointer;
        transition: all 0.2s;
        overflow: hidden;
        display: flex;
        align-items: center;
        gap: 12px;
    }
    .poll-option-item:hover {
        border-color: var(--primary);
        transform: translateX(4px);
    }
    .poll-option-item.voted {
        border-color: var(--primary);
        background: var(--primary-soft);
    }
    .poll-option-item input {
        display: none;
    }
    .poll-option-content {
        flex: 1;
        font-size: 14px;
        font-weight: 700;
        color: var(--text);
        z-index: 1;
    }
    .poll-option-result {
        font-size: 12px;
        font-weight: 800;
        color: var(--muted);
        z-index: 1;
    }
    .poll-progress-bar {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        background: var(--primary-soft);
        z-index: 0;
    }
    .poll-footer {
        margin-top: 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 12px;
        color: var(--muted);
        font-weight: 700;
    }
    .btn-vote {
        padding: 10px 24px;
        background: var(--primary);
        color: #fff;
        border: none;
        border-radius: 12px;
        font-size: 14px;
        font-weight: 800;
        cursor: pointer;
        transition: all 0.2s;
        box-shadow: 0 4px 12px var(--primary-soft);
    }
    .btn-vote:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px var(--primary-soft);
    }
    .btn-vote:disabled {
        background: var(--line);
        color: var(--muted);
        cursor: not-allowed;
        box-shadow: none;
    }
    .poll-ended-badge {
        background: #f1f5f9;
        color: #94a3b8;
    }

    /* 抽奖组件样式 - 清新风格 */
    .post-lottery-card {
        background: var(--panel);
        border-radius: 28px;
        border: 2px solid #fb7185;
        padding: 32px;
        margin: 32px 0;
        position: relative;
        overflow: hidden;
        box-shadow: 0 15px 35px rgba(251, 113, 133, 0.1);
    }
    .lottery-badge-status {
        position: absolute;
        top: 20px;
        right: 20px;
        padding: 6px 16px;
        border-radius: 12px;
        font-size: 12px;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: 1px;
    }
    .status-active { background: #fb7185; color: #fff; box-shadow: 0 4px 12px rgba(251, 113, 133, 0.3); }
    .status-ended { background: #94a3b8; color: #fff; }
    
    .lottery-header {
        display: flex;
        align-items: center;
        gap: 16px;
        margin-bottom: 24px;
    }
    .lottery-icon-box {
        width: 60px;
        height: 60px;
        background: rgba(251, 113, 133, 0.1);
        border-radius: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 32px;
    }
    .lottery-title-wrap { flex: 1; }
    .lottery-prize-label { font-size: 13px; color: #fb7185; font-weight: 800; margin-bottom: 4px; display: block; }
    .lottery-prize-name { font-size: 24px; font-weight: 900; color: var(--text); margin: 0; }
    
    .lottery-info-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
        background: var(--bg);
        padding: 20px;
        border-radius: 20px;
        margin-bottom: 24px;
    }
    .lottery-info-item { text-align: center; }
    .lottery-info-val { font-size: 18px; font-weight: 900; color: var(--text); display: block; }
    .lottery-info-label { font-size: 11px; color: var(--muted); font-weight: 700; text-transform: uppercase; margin-top: 4px; display: block; }
    
    .lottery-conditions {
        margin-bottom: 28px;
        padding: 16px 20px;
        background: rgba(251, 113, 133, 0.05);
        border-left: 4px solid #fb7185;
        border-radius: 0 12px 12px 0;
    }
    .condition-title { font-size: 13px; font-weight: 800; color: #e11d48; margin-bottom: 8px; display: block; }
    .condition-list { display: flex; flex-wrap: wrap; gap: 12px; }
    .condition-tag { font-size: 12px; font-weight: 700; color: var(--muted); display: flex; align-items: center; gap: 6px; }
    .condition-tag.met { color: var(--primary); }
    .condition-tag.not-met { color: #ef4444; }
    
    .btn-lottery-join {
        width: 100%;
        padding: 18px;
        background: linear-gradient(135deg, #fb7185 0%, #e11d48 100%);
        color: #fff;
        border: none;
        border-radius: 20px;
        font-size: 16px;
        font-weight: 900;
        cursor: pointer;
        transition: all 0.3s;
        box-shadow: 0 10px 25px rgba(225, 29, 72, 0.2);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
    }
    .btn-lottery-join:hover { transform: translateY(-3px); box-shadow: 0 15px 35px rgba(225, 29, 72, 0.3); }
    .btn-lottery-join:disabled { background: #e2e8f0; color: #94a3b8; cursor: not-allowed; box-shadow: none; }
    .btn-lottery-joined { background: #d1fae5; color: #1e293b; cursor: default; box-shadow: none; pointer-events: none; }

    .lottery-winners-section {
        margin-top: 32px;
        padding-top: 24px;
        border-top: 1px dashed var(--line);
    }
    .winners-title { font-size: 16px; font-weight: 900; color: var(--text); margin-bottom: 20px; text-align: center; }
    .winners-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 16px; justify-content: center; }
    .winner-item { display: flex; flex-direction: column; align-items: center; gap: 8px; text-decoration: none; }
    .winner-avatar { width: 48px; height: 48px; border-radius: 16px; border: 2px solid #fb7185; padding: 2px; background: #fff; }
    .winner-name { font-size: 11px; font-weight: 800; color: var(--text); text-align: center; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    .btn-action { padding: 12px 24px; border-radius: 16px; font-size: 15px; font-weight: 800; cursor: pointer; display: flex; align-items: center; gap: 8px; transition: all 0.2s; border: none; }
    .btn-like { background: var(--primary-soft); color: var(--primary); }
    .btn-like:hover { background: var(--primary); color: #fff; transform: translateY(-2px); }
    .btn-share { background: var(--bg); color: var(--muted); border: 1px solid var(--line); }
    .btn-share:hover { border-color: var(--primary); color: var(--primary); transform: translateY(-2px); }

    @keyframes fadeInUp {
        from { opacity: 0; transform: translateY(20px); }
        to { opacity: 1; transform: translateY(0); }
    }

    /* 全屏编辑器样式 */
    .fullscreen-editor-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: var(--panel);
        z-index: 10000;
        display: none;
        flex-direction: column;
        animation: fadeIn 0.3s ease;
    }
    .fullscreen-editor-overlay.show {
        display: flex;
    }
    .fullscreen-header {
        height: 60px;
        padding: 0 24px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid var(--line);
        background: var(--panel);
    }
    .fullscreen-title {
        font-weight: 900;
        font-size: 18px;
        color: var(--text);
    }
    .btn-fullscreen-close {
        padding: 8px 20px;
        background: var(--bg);
        border: 1px solid var(--line);
        border-radius: 12px;
        font-weight: 800;
        cursor: pointer;
        transition: all 0.2s;
    }
    .btn-fullscreen-close:hover {
        background: #fee2e2;
        color: #ef4444;
        border-color: #fecaca;
    }
    .fullscreen-container {
        flex: 1;
        display: flex;
        overflow: hidden;
    }
    .fullscreen-edit-pane, .fullscreen-preview-pane {
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
    .fullscreen-edit-pane {
        border-right: 1px solid var(--line);
    }
    .pane-header {
        padding: 10px 20px;
        background: var(--bg);
        font-size: 12px;
        font-weight: 800;
        color: var(--muted);
        text-transform: uppercase;
        border-bottom: 1px solid var(--line);
    }
    #fullscreen-textarea {
        flex: 1;
        padding: 30px;
        border: none;
        resize: none;
        font-family: 'Fira Code', 'Monaco', 'Consolas', monospace;
        font-size: 16px;
        line-height: 1.6;
        background: var(--panel);
        color: var(--text);
        outline: none;
    }
    #fullscreen-preview-content {
        flex: 1;
        padding: 30px;
        overflow-y: auto;
        background: var(--panel);
    }
    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    .markdown-body blockquote { border-left: 5px solid var(--primary); padding: 16px 24px; background: var(--primary-soft); border-radius: 8px 16px 16px 8px; color: var(--text); font-style: normal; margin: 1.5em 0; position: relative; }
    .markdown-body blockquote::before { content: '"'; position: absolute; top: -10px; left: 10px; font-size: 40px; color: var(--primary); opacity: 0.2; font-family: serif; }
    .markdown-body ul, .markdown-body ol { padding-left: 24px; margin: 1em 0; }
    .markdown-body hr { border: none; border-top: 2px solid var(--line); margin: 2em 0; }
    .markdown-body table, 
    .vditor-reset table { 
        border-collapse: collapse; 
        width: 100% !important; 
        min-width: 100% !important;
        margin: 1.5em 0 !important; 
        font-size: 14px; 
        table-layout: auto !important; 
        display: table !important;
    }
    .markdown-body th, .markdown-body td,
    .vditor-reset th, .vditor-reset td { 
        padding: 14px 20px; 
        border: 1px solid var(--line); 
        text-align: left; 
    }
    .table-wrapper { width: 100%; overflow-x: auto; margin: 2em 0; border-radius: 16px; border: 1px solid var(--line); box-shadow: 0 4px 12px rgba(0,0,0,0.03); background: var(--panel); }
    .table-wrapper table { margin: 0 !important; border: none !important; width: 100% !important; }
    .markdown-body th { background: var(--table-header-bg); font-weight: 800; color: var(--text); text-transform: uppercase; letter-spacing: 0.5px; font-size: 13px; }
    .markdown-body tr:nth-child(even) { background: var(--table-stripe); }
    .markdown-body tr:hover { background: var(--table-hover); }
    .markdown-body strong { font-weight: 800; color: var(--text); }
    
    /* 图片放大预览样式 */
    .image-zoom-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.9);
        backdrop-filter: blur(5px);
        z-index: 9999;
        display: none;
        place-items: center;
        cursor: zoom-out;
        opacity: 0;
        transition: opacity 0.3s ease;
    }
    .image-zoom-overlay.show {
        display: grid;
        opacity: 1;
    }
    .image-zoom-content {
        max-width: 95%;
        max-height: 95%;
        border-radius: 8px;
        box-shadow: 0 0 40px rgba(0, 0, 0, 0.5);
        transform: scale(0.9);
        transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    .image-zoom-overlay.show .image-zoom-content {
        transform: scale(1);
    }

    /* 评论区 */
    .comments-section {
        background: transparent;
        border-radius: 0;
        border: none;
        position: relative;
        padding: 24px 40px 20px; /* 减小上下内边距 */
        box-shadow: none;
    }
    .comments-section::before {
        content: "";
        position: absolute;
        top: 0;
        left: 40px;
        right: 40px;
        height: 14px;
        background:
            linear-gradient(
                90deg,
                transparent 0%,
                var(--primary-soft) 8%,
                var(--primary) 22%,
                var(--line) 50%,
                var(--primary) 78%,
                var(--primary-soft) 92%,
                transparent 100%
            ) center / 100% 2px no-repeat;
        opacity: 0.9;
        pointer-events: none;
    }
    .comments-section::after {
        content: "";
        position: absolute;
        top: -1px;
        left: 50%;
        width: 14px;
        height: 14px;
        transform: translateX(-50%);
        border-radius: 999px;
        background:
            radial-gradient(circle at center, var(--primary) 0 30%, var(--panel) 32% 62%, transparent 64%);
        box-shadow: 0 0 0 6px var(--panel);
        pointer-events: none;
    }
    .comments-header { 
        font-size: 16px; /* 进一步减小字号 */
        font-weight: 900; 
        margin-bottom: 0; 
        padding-bottom: 16px;
        border-bottom: 1px dashed var(--line); /* 标题与第一条评论之间的虚线 */
        display: flex; 
        align-items: center; 
        gap: 12px; 
        color: var(--text);
    }
    .comments-header svg {
        width: 20px;
        height: 20px;
        color: var(--primary);
        stroke-width: 2.5;
    }
    
    .comment-form { 
        display: flex; 
        gap: 20px; 
        padding-top: 12px; /* 极致紧凑间距 */
    }
    .comment-avatar { width: 48px; height: 48px; border-radius: 16px; flex-shrink: 0; }
    .comment-input-wrap { flex: 1; }
    .comment-textarea { width: 100%; padding: 20px; background: var(--bg); border: 1px solid var(--line); border-radius: 20px; font-size: 15px; color: var(--text); font-weight: 600; resize: vertical; min-height: 100px; box-sizing: border-box; transition: all 0.3s; }
    .comment-textarea::placeholder { color: var(--muted); opacity: 0.9; }
    .comment-textarea:focus { outline: none; border-color: var(--primary); background: var(--panel); box-shadow: 0 0 0 4px var(--primary-soft); }
    .btn-comment { margin-top: 12px; padding: 14px 28px; background: var(--primary); color: #fff; border: none; border-radius: 16px; font-size: 15px; font-weight: 800; cursor: pointer; transition: all 0.2s; box-shadow: 0 8px 16px var(--primary-soft); }
    .btn-comment:hover { transform: translateY(-2px); box-shadow: 0 12px 20px var(--primary-soft); }

    .comment-list { display: flex; flex-direction: column; }
    .comment-item { 
        display: flex; 
        gap: 20px; 
        padding: 16px 0; /* 减小内边距，节省空间 */
        border-bottom: 1px dashed var(--line);
        transition: all 0.3s ease;
        position: relative;
    }
    .comment-item:hover { background: var(--table-hover); margin: 0 -20px; padding: 16px 20px; border-radius: 16px; }
    
    .comment-item .comment-delete-btn {
        opacity: 0.3;
        transition: all 0.2s ease;
    }
    .comment-item:hover .comment-delete-btn {
        opacity: 1;
        border-color: #fecaca;
        color: #ef4444;
    }
    
    .comment-floor {
        font-size: 11px;
        color: var(--muted);
        font-weight: 800;
        opacity: 0.5;
        font-family: monospace;
    }

    /* 评论内容引用样式 */
    .comment-quote {
        background: var(--bg);
        border-radius: 12px;
        padding: 12px 16px;
        margin-bottom: 12px;
        border-left: 3px solid var(--line);
        font-size: 13px;
        color: var(--muted);
        display: flex;
        flex-direction: column;
        gap: 4px;
        cursor: pointer;
        transition: all 0.2s;
    }
    .comment-quote:hover {
        background: var(--primary-soft);
        border-left-color: var(--primary);
    }
    .quote-user {
        font-weight: 800;
        color: var(--primary);
        font-size: 12px;
    }
    .quote-content {
        line-height: 1.5;
        font-style: italic;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    /* 评论删除按钮 */
    /* 评论操作按钮：点赞、回复、编辑、删除 */
    .comment-actions {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-top: 12px;
        flex-wrap: wrap;
    }
    .comment-action-btn, .comment-edit-btn-small, .comment-delete-btn {
        padding: 6px 12px;
        border-radius: 10px;
        background: var(--bg);
        color: var(--muted);
        font-size: 12px;
        font-weight: 800;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 6px;
        transition: all 0.2s;
        border: 1px solid var(--line);
        user-select: none;
        height: 32px;
        box-sizing: border-box;
        position: relative;
        opacity: 1 !important;
        visibility: visible !important;
        right: auto !important;
        top: auto !important;
    }
    .comment-action-btn svg, .comment-edit-btn-small svg, .comment-delete-btn svg {
        width: 14px;
        height: 14px;
        stroke-width: 2.5;
    }
    .comment-action-btn:hover, .comment-edit-btn-small:hover, .comment-delete-btn:hover {
        background: var(--panel);
        border-color: var(--primary);
        color: var(--primary);
        transform: translateY(-2px);
    }
    .comment-action-btn.liked {
        background: var(--primary-soft);
        color: var(--primary);
        border-color: var(--primary);
    }
    .comment-action-btn.liked svg {
        fill: var(--primary);
    }
    .comment-delete-btn:hover {
        border-color: #ef4444;
        color: #ef4444;
        background: rgba(239, 68, 68, 0.05);
    }
    
    .comment-main { flex: 1; min-width: 0; }
    .comment-user-info { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
    .comment-user-name { font-weight: 800; font-size: 15px; color: var(--text); }
    .comment-date { font-size: 12px; color: var(--muted); }
    .comment-content { font-size: 15px; color: var(--text) !important; line-height: 1.6; }
    .comment-content.markdown-body { font-size: 15px; color: var(--text) !important; }
    .comment-content.markdown-body * { color: var(--text) !important; }
    .comment-content.markdown-body pre, .comment-content.markdown-body code { color: #fff !important; } /* 代码块文字强制保持白色 */
    .comment-content.markdown-body a { color: var(--primary) !important; } /* 链接颜色保护 */
    .comment-content.markdown-body blockquote { color: var(--muted) !important; } /* 引用文字稍微淡一点 */
    .comment-content.markdown-body pre { padding: 12px; margin: 12px 0; border-radius: 12px; font-size: 13px; }
    .comment-content.markdown-body code { font-size: 13px; }
    .comment-content.markdown-body blockquote { padding: 8px 16px; margin: 12px 0; font-size: 14px; }
    .comment-content.markdown-body h1, .comment-content.markdown-body h2 { font-size: 18px; margin-top: 0.8em; }
    .comment-content.markdown-body ul, .comment-content.markdown-body ol { margin: 0.8em 0; padding-left: 20px; }
    .comment-content.markdown-body p { margin-bottom: 0.8em; }
    .comment-content.markdown-body p:last-child { margin-bottom: 0; }
    
    .comment-signature-text {
        line-height: 1.4;
        word-break: break-all;
    }
    .comment-signature-text.markdown-body {
        font-size: 13px !important;
        color: inherit !important;
    }
    .comment-signature-text.markdown-body p,
    .comment-signature-text.markdown-body li,
    .comment-signature-text.markdown-body span,
    .comment-signature-text.markdown-body div {
        font-size: 13px !important;
        color: inherit !important;
    }
    .comment-signature-text.markdown-body pre { padding: 8px; margin: 8px 0; border-radius: 8px; font-size: 11px; background: var(--bg); border: 1px solid var(--line); }
    .comment-signature-text.markdown-body code { font-size: 11px; background: var(--bg); padding: 2px 4px; border-radius: 4px; }
    .comment-signature-text.markdown-body blockquote { padding: 4px 12px; margin: 8px 0; border-left: 3px solid var(--line); font-size: 12px; color: var(--muted); }
    .comment-signature-text.markdown-body h1, .comment-signature-text.markdown-body h2, .comment-signature-text.markdown-body h3 { font-size: 14px; margin-top: 0.5em; margin-bottom: 0.3em; }
    .comment-signature-text.markdown-body ul, .comment-signature-text.markdown-body ol { margin: 0.5em 0; padding-left: 15px; }
    .comment-signature-text.markdown-body p {
        margin-bottom: 0.5em;
    }
    .comment-signature-text.markdown-body p:last-child {
        margin-bottom: 0;
    }
    .comment-signature-text a {
        color: var(--muted);
        text-decoration: none;
        border-bottom: 1px solid transparent;
        transition: all 0.2s;
    }
    .comment-signature-text a:hover {
        color: var(--primary);
        border-bottom-color: var(--primary);
    }

    /* 评论区 Markdown 工具栏 */
    .editor-toolbar {
        display: flex;
        gap: 6px;
        margin-bottom: 12px;
        flex-wrap: wrap;
        padding: 8px;
        background: var(--bg);
        border: 1px solid var(--line);
        border-radius: 12px;
        position: relative;
    }
    .toolbar-btn {
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--panel);
        border: 1px solid var(--line);
        border-radius: 8px;
        color: var(--text);
        cursor: pointer;
        transition: all 0.2s;
        font-size: 14px;
    }
    .toolbar-btn:hover {
        border-color: var(--primary);
        color: var(--primary);
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.05);
    }
    .toolbar-btn svg {
        width: 16px;
        height: 16px;
    }
    .toolbar-divider {
        width: 1px;
        height: 20px;
        background: var(--line);
        margin: 6px 4px;
        opacity: 0.5;
    }

    /* 表情包选择器样式 */
    .emoticon-picker {
        position: absolute;
        bottom: 100%;
        left: 0;
        width: 480px;
        background: var(--panel);
        border: 1px solid var(--line);
        border-radius: 16px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        display: none;
        z-index: 1000;
        margin-bottom: 10px;
        overflow: hidden;
    }
    .emoticon-picker.active {
        display: block;
        animation: fadeInScale 0.2s ease-out;
    }
    @keyframes fadeInScale {
        from { opacity: 0; transform: scale(0.95) translateY(10px); }
        to { opacity: 1; transform: scale(1) translateY(0); }
    }
    .emoticon-tabs {
        display: flex;
        overflow-x: auto;
        background: var(--bg);
        border-bottom: 1px solid var(--line);
        scrollbar-width: none;
    }
    .emoticon-tabs::-webkit-scrollbar { display: none; }
    .emoticon-tab {
        padding: 10px 15px;
        font-size: 13px;
        font-weight: 800;
        color: var(--muted);
        cursor: pointer;
        white-space: nowrap;
        border-bottom: 2px solid transparent;
    }
    .emoticon-tab.active {
        color: var(--primary);
        border-bottom-color: var(--primary);
        background: var(--panel);
    }
    .emoticon-content {
        height: 320px;
        overflow-y: auto;
        padding: 6px;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 4px;
    }
    .emoticon-img {
        width: 100%;
        aspect-ratio: 1;
        object-fit: contain;
        cursor: pointer;
        border-radius: 6px;
        transition: transform 0.2s, background 0.2s;
        padding: 4px;
        background: var(--bg);
        min-height: 72px;
    }
    .emoticon-img:hover {
        transform: scale(1.2);
        background: var(--primary-soft);
    }
    /* 专门针对正文和评论中的表情包样式 */
    .markdown-body img.emoticon-render,
    .markdown-body img[src*="/img/emoji/"] {
        display: inline-block !important;
        vertical-align: middle !important;
        max-height: 80px !important;
        height: 80px !important;
        width: 80px !important;
        max-width: 80px !important;
        min-height: 80px !important;
        min-width: 80px !important;
        margin: 0 4px !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        background: transparent !important;
        opacity: 1 !important;
        visibility: visible !important;
        float: none !important;
        position: static !important;
        z-index: auto !important;
    }
    
    /* 确保 Vditor 渲染的图片不会被隐藏 */
    .markdown-body img[src*="/img/emoji/"] {
        display: inline-block !important;
    }

    .uploading-overlay {
        position: absolute;
        inset: 0;
        background: rgba(0,0,0,0.1);
        backdrop-filter: blur(2px);
        display: none;
        align-items: center;
        justify-content: center;
        border-radius: 16px;
        z-index: 10;
    }
    .uploading-overlay.active { display: flex; }
    .uploading-spinner {
        width: 32px;
        height: 32px;
        border: 3px solid #fff;
        border-top-color: var(--primary);
        border-radius: 50%;
        animation: spin 0.8s linear infinite;
    }
    @keyframes spin { to { transform: rotate(360deg); } }

    /* 侧边栏通用小工具样式 */
    .sidebar-widget {
        background: var(--panel);
        border-radius: 28px;
        border: 1px solid var(--line);
        padding: 24px;
        margin-bottom: 24px;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
        transition: all 0.3s ease;
    }
    .sidebar-widget:hover {
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08);
    }

    /* 侧边栏作者卡片 - 紧凑美观版 */
    .sidebar-widget.author-card {
        padding: 20px;
        position: relative;
        overflow: hidden;
    }
    .sidebar-widget.author-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 104px;
        background: var(--author-bg, 
            radial-gradient(circle at top left, var(--primary-a2), transparent 58%),
            radial-gradient(circle at top right, rgba(148, 163, 184, 0.16), transparent 52%),
            linear-gradient(180deg, var(--primary-a12) 0%, rgba(255,255,255,0) 55%, rgba(255,255,255,0) 100%)
        );
        background-size: cover;
        background-position: center;
        pointer-events: none;
        z-index: 0;
    }
    html[data-theme="dark"] .sidebar-widget.author-card::before {
        background: var(--author-bg, 
            radial-gradient(circle at top left, var(--primary-a15), transparent 58%),
            radial-gradient(circle at top right, rgba(148, 163, 184, 0.10), transparent 52%),
            linear-gradient(180deg, var(--primary-a1) 0%, rgba(30,41,59,0) 55%, rgba(30,41,59,0) 100%)
        );
        background-size: cover;
        background-position: center;
    }
    .sidebar-widget.author-card > * {
        position: relative;
        z-index: 1;
    }
    .author-card-header {
        display: flex;
        align-items: center;
        gap: 16px;
        margin-bottom: 16px;
        padding-bottom: 16px;
    }
    .author-avatar-compact {
        width: 56px;
        height: 56px;
        min-width: 56px;
        min-height: 56px;
        border-radius: 18px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.08);
        border: 2px solid #fff;
        flex-shrink: 0;
        object-fit: cover;
    }
    .author-info-compact {
        display: flex;
        flex-direction: column;
        gap: 4px;
        flex: 1;
        min-width: 0;
    }
    .author-name-compact {
        font-size: 17px;
        font-weight: 900;
        color: var(--text);
        margin: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .author-badges-compact {
        display: flex;
        align-items: center;
        gap: 6px;
        flex-wrap: wrap;
    }
    .author-role-compact {
        font-size: 10px;
        padding: 1px 8px;
        border-radius: 6px;
        background: var(--primary-soft);
        color: var(--primary);
        font-weight: 800;
        white-space: nowrap;
    }
    /* 不同角色的特殊样式 */
    .author-role-compact.role-webmaster {
        background: rgba(239, 68, 68, 0.1);
        color: #ef4444;
    }
    .author-role-compact.role-admin {
        background: rgba(245, 158, 11, 0.1);
        color: #f59e0b;
    }
    .author-role-compact.role-moderator {
        background: rgba(59, 130, 246, 0.1);
        color: #3b82f6;
    }
    .author-level-compact {
        font-size: 10px;
        padding: 1px 8px;
        border-radius: 6px;
        background: var(--bg);
        color: var(--muted);
        border: 1px solid var(--line);
        font-weight: 800;
        white-space: nowrap;
    }
    .author-sig-compact {
        font-size: 12px;
        color: var(--muted);
        margin: 0 0 16px 0;
        line-height: 1.5;
        opacity: 0.8;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        font-style: italic;
    }
    .author-exp-wrap {
        margin-bottom: 16px;
    }
    .author-stats-compact {
        display: flex;
        background: var(--bg);
        border-radius: 16px;
        padding: 12px;
        margin-bottom: 16px;
        border: 1px solid var(--line);
        box-shadow: inset 0 2px 4px rgba(0,0,0,0.02);
    }
    .stat-item-compact {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
    }
    .stat-val-compact {
        font-size: 15px;
        font-weight: 900;
        color: var(--primary);
    }
    .stat-label-compact {
        font-size: 10px;
        color: var(--muted);
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    .stat-divider-compact {
        width: 1px;
        background: var(--line);
        margin: 4px 0;
    }
    .author-actions-compact {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    .btn-row-compact {
        display: flex;
        gap: 8px;
    }
    .btn-compact {
        flex: 1;
        padding: 10px;
        border-radius: 12px;
        font-size: 13px;
        font-weight: 800;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        transition: all 0.2s;
        border: none;
        cursor: pointer;
        text-decoration: none;
        position: relative;
    }
    .btn-compact .normal-text {
        display: flex;
        align-items: center;
        gap: 6px;
        transition: opacity 0.2s;
    }
    .btn-compact .hover-text {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        opacity: 0;
        transition: opacity 0.2s;
    }
    .btn-compact:hover .normal-text {
        opacity: 0;
    }
    .btn-compact:hover .hover-text {
        opacity: 1;
    }
    .btn-compact-primary { background: var(--primary); color: #fff; box-shadow: 0 4px 12px var(--primary-soft); }
    .btn-compact-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 16px var(--primary-soft); }
    .btn-compact-soft { background: var(--primary-soft); color: var(--primary); border: 1px solid var(--line); transition: all 0.2s; }
    .btn-compact-soft:not(.active):hover { background: var(--primary); color: #fff; transform: translateY(-2px); }
    .btn-compact-soft.active { background: transparent; }
    .btn-compact-soft.active:hover { background: #fee2e2 !important; color: #ef4444 !important; border-color: #fca5a5 !important; }
    .btn-compact-outline { background: var(--panel); color: var(--text); border: 1px solid var(--line); }
    .btn-compact-outline:hover { border-color: var(--primary); color: var(--primary); background: var(--bg); transform: translateY(-2px); }
    .btn-compact.active { opacity: 0.8; }

    .btn-back-community {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 10px 18px;
        background: var(--panel);
        border: 1px solid var(--line);
        border-radius: 12px;
        color: var(--muted);
        font-size: 14px;
        font-weight: 700;
        text-decoration: none;
        margin-bottom: 20px;
        transition: all 0.2s;
        margin-left: 4px; /* 预留位移空间 */
    }
    .btn-back-community:hover {
        background: var(--bg);
        color: var(--primary);
        border-color: var(--primary);
        transform: translateX(-4px);
    }

    /* 响应式优化 */
    @media (max-width: 1000px) {
        .post-side-actions {
            display: none !important; /* 彻底隐藏 PC 端侧边栏 */
        }
        .post-container {
            flex-direction: column;
            margin: 20px auto;
            gap: 24px;
        }
        .post-sidebar {
            width: 100%;
            order: 2; /* 侧边栏移到下方 */
        }
        .sticky-sidebar {
            position: static; /* 手机端取消固定 */
        }
        .post-main-content {
            border-radius: 24px;
        }
        .post-card {
            padding: 30px 20px 24px;
        }
        .post-header::before {
            width: 10px;
            height: 10px;
            box-shadow: 0 0 0 5px var(--panel);
        }
        .post-title { font-size: 24px; margin-bottom: 16px; }
        .comments-section {
            padding: 24px 20px 20px;
            border-radius: 0;
        }
        .comments-section::before {
            left: 20px;
            right: 20px;
        }
        .comments-section::after {
            width: 12px;
            height: 12px;
            box-shadow: 0 0 0 5px var(--panel);
        }
    }

    /* 手机端底部操作栏 */
    .mobile-action-bar {
        display: none;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: var(--panel);
        border-top: 1px solid var(--line);
        padding: 10px 20px calc(10px + env(safe-area-inset-bottom));
        z-index: 1000;
        box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.05);
        justify-content: space-around;
        align-items: center;
    }

    html[data-theme="dark"] .mobile-action-bar {
        background: var(--panel);
        box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.2);
    }

    @media (max-width: 1000px) {
        .mobile-action-bar {
            display: flex;
        }
        .post-container {
            margin-bottom: 80px; /* 为底部操作栏留出空间 */
        }
    }

    .mobile-action-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        color: var(--muted);
        text-decoration: none;
        background: none;
        border: none;
        padding: 4px 12px;
        font-size: 11px;
        font-weight: 800;
        transition: all 0.2s;
    }

    .mobile-action-item svg {
        width: 22px;
        height: 22px;
        stroke-width: 2.2;
    }

    .mobile-action-item:active {
        transform: scale(0.9);
        color: var(--primary);
    }

    .mobile-action-item.active {
        color: var(--primary);
    }

    .meta-time-relative { display: none; }
    
    @media (max-width: 600px) {
        .meta-time-full { display: none; }
        .meta-time-relative { display: inline; }
        .post-meta-top { 
            gap: 12px; 
            overflow: hidden; 
            white-space: nowrap;
            text-overflow: ellipsis;
        }
        .meta-item {
            gap: 4px;
        }
        .meta-item svg {
            width: 14px;
            height: 14px;
        }
        .post-title-area {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 8px;
        }
        .post-title-badges {
            margin-right: 0;
            margin-bottom: 0;
        }
        .badge {
            padding: 2px 8px;
            font-size: 10px;
            border-radius: 8px;
        }
        .post-main-content { border-radius: 20px; }
        .post-card { padding: 24px 16px 20px; }
        .post-header { margin-bottom: 24px; }
        .post-title { font-size: 20px; line-height: 1.4; }
        .post-meta-top { font-size: 12px; gap: 10px; flex-wrap: wrap; }
        .comments-section { padding: 20px 16px 16px; }
        .comments-section::before {
            left: 16px;
            right: 16px;
        }
        .post-footer { margin-top: 32px; padding-top: 24px; flex-direction: column; }
        .btn-action { width: 100%; justify-content: center; }
        
        .comment-form { gap: 12px; }
        .comment-avatar { width: 36px; height: 36px; border-radius: 10px; }
        .comment-textarea { padding: 14px; border-radius: 16px; font-size: 14px; }
        .comment-item { gap: 12px; }
        .comment-user-info { flex-wrap: wrap; }
        .comment-actions { gap: 6px; }
        .comment-action-btn, .comment-edit-btn-small, .comment-delete-btn {
            padding: 5px 10px;
            font-size: 11px;
            height: 28px;
            gap: 4px;
        }
    }

    /* 分页组件样式 */
    .pagination {
        display: flex;
        justify-content: center;
        gap: 8px;
        margin-top: 32px; /* 增加上方间距 */
        margin-bottom: 16px; /* 增加下方间距 */
        padding-top: 24px;
        border-top: 1px dashed var(--line); /* 改为虚线与评论列表统一 */
    }
    .page-item {
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 12px;
        background: var(--bg);
        color: var(--muted);
        text-decoration: none;
        font-weight: 700;
        font-size: 14px;
        transition: all 0.2s;
        border: 1px solid var(--line);
    }
    .page-item:hover {
        background: var(--primary-soft);
        color: var(--primary);
        border-color: var(--primary);
        transform: translateY(-2px);
    }
    .page-item.active {
        background: var(--primary);
        color: #fff;
        border-color: var(--primary);
        box-shadow: 0 4px 12px rgba(30, 41, 59, 0.2);
    }
    .page-item.disabled {
        opacity: 0.5;
        cursor: not-allowed;
        pointer-events: none;
    }
    .page-dot {
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--muted);
    }

    /* 小巧居中的复制提示模态框 - 修改为顶部显示，避免遮挡中心模态框 */
    .star-toast {
        position: fixed;
        top: 40px;
        left: 50%;
        transform: translateX(-50%) scale(0.9);
        background: rgba(15, 23, 42, 0.9);
        backdrop-filter: blur(10px);
        color: #fff;
        padding: 16px 32px;
        border-radius: 20px;
        z-index: 1000000; /* 提高层级，确保在所有模态框之上 */
        display: none;
        flex-direction: row; /* 改为横向布局，更节省空间 */
        align-items: center;
        gap: 12px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.3);
        border: 1px solid rgba(255,255,255,0.1);
        opacity: 0;
        transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
        pointer-events: auto;
        overflow: hidden;
    }
    .star-toast.show {
        display: flex;
        opacity: 1;
        transform: translateX(-50%) scale(1);
    }
    .star-toast.error .copy-icon { background: #ef4444; }
    .toast-close {
        position: absolute;
        top: 12px;
        right: 12px;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        font-size: 14px;
        color: rgba(255,255,255,0.4);
        transition: all 0.2s;
    }
    .toast-close:hover {
        background: rgba(239, 68, 68, 0.2);
        color: #ef4444;
    }
    .toast-progress-wrap {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 3px;
        background: rgba(255,255,255,0.1);
        border-radius: 0 0 20px 20px;
        overflow: hidden;
        /* 强制切除超出圆角的子元素 */
        -webkit-mask-image: -webkit-radial-gradient(white, black);
    }
    .toast-progress {
        height: 100%;
        width: 100%;
        background: var(--primary);
        transform-origin: left;
        /* 确保进度条本身也带圆角，双重保障 */
        border-radius: 0 0 20px 20px;
    }
    .star-toast.error .toast-progress { background: #ef4444; }
    .star-toast.animating .toast-progress {
        animation: toast-countdown 2s linear forwards;
    }
    @keyframes toast-countdown {
        from { transform: scaleX(1); }
        to { transform: scaleX(0); }
    }
    .copy-icon {
        width: 32px;
        height: 32px;
        background: var(--primary);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
    }
    .copy-text {
        font-size: 14px;
        font-weight: 800;
        letter-spacing: 0.5px;
    }

    /* 自定义确认模态框 */
    .star-modal-overlay {
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, 0.6);
        backdrop-filter: blur(8px);
        z-index: 1000000;
        display: none;
        align-items: center;
        justify-content: center;
        padding: 20px;
        opacity: 0;
        transition: opacity 0.3s ease;
    }
    .star-modal-overlay.show {
        display: flex;
        opacity: 1;
    }
    .star-modal {
        background: var(--panel);
        width: 100%;
        max-width: 480px;
        border-radius: 28px;
        border: 1px solid var(--line);
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
        padding: 32px;
        transform: scale(0.9);
        transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    .star-modal-overlay.show .star-modal {
        transform: scale(1);
    }
    .modal-header {
        display: flex;
        align-items: center;
        gap: 16px;
        margin-bottom: 20px;
    }
    .modal-icon-wrap {
        width: 48px;
        height: 48px;
        border-radius: 14px;
        background: #fee2e2;
        color: #ef4444;
        display: grid;
        place-items: center;
        font-size: 24px;
        flex-shrink: 0;
    }
    .modal-icon-wrap svg {
        width: 28px;
        height: 28px;
    }
    .modal-title {
        font-size: 20px;
        font-weight: 900;
        color: var(--text);
    }
    .modal-body {
        font-size: 15px;
        line-height: 1.6;
        color: var(--muted);
        margin-bottom: 32px;
    }
    .modal-body strong {
        color: var(--text);
        font-weight: 800;
        word-break: break-all;
    }
    .modal-footer {
        display: flex;
        gap: 16px;
        justify-content: flex-end;
    }
    .btn-modal {
        padding: 12px 24px;
        border-radius: 12px;
        font-size: 14px;
        font-weight: 800;
        cursor: pointer;
        transition: all 0.2s;
        border: none;
    }
    .btn-modal-cancel {
        background: var(--bg);
        color: var(--muted);
        border: 1px solid var(--line);
    }
    .btn-modal-cancel:hover {
        background: #fff;
        border-color: var(--line);
        color: var(--text);
    }
    .btn-modal-confirm {
        background: #ef4444;
        color: #fff;
        box-shadow: 0 8px 16px rgba(239, 68, 68, 0.2);
    }
    .btn-modal-confirm:hover {
        background: #dc2626;
        transform: translateY(-2px);
        box-shadow: 0 12px 20px rgba(239, 68, 68, 0.3);
    }