/* 布局为中栏 + 右侧栏，与首页保持一致视觉 */
.detail-grid { 
    display: grid !important; 
    grid-template-columns: 64px 760px 919px !important; 
    gap: 16px !important; 
    margin-top: 0 !important; 
    padding-top: 12px !important; /* 统一顶部基线，避免与导航重叠 */
    width: 100% !important;
    justify-content: center;
    transform: translateX(310px) !important; /* 仅水平位移 */
    align-items: start !important;
}
.detail-main { min-width: 0; margin-top: 0 !important; padding-top: 0; margin-left: 0 !important }

@media (max-width: 1200px) { 
    .detail-grid { grid-template-columns: 64px 1fr 300px !important } 
}
@media (max-width: 991px) { 
    .detail-grid { grid-template-columns: 1fr !important } 
}
/* 文章详情页专用样式（与主页分离） */
.detail-wrap { 
    background:#fff; 
    border:1px solid var(--dividerColor); 
    border-radius: 8px; 
    padding: 22px 24px; 
    max-width: none; 
    margin: 0;
    width: 100%;
}
.detail-header { margin-bottom: 14px }
.detail-title { font-size: 30px; font-weight: 800; margin: 0 0 10px 0; color: #1f2328; letter-spacing: -.2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden }
.detail-header { min-height: 120px }
.detail-meta { display:flex; flex-wrap:wrap; align-items:center; gap:10px; color:#8a8f99; font-size:13px }
.detail-meta .meta-avatar img { width: 28px; height: 28px; border-radius: 50%; display: block }
.detail-meta .meta-author, .detail-meta .meta-author a { color: var(--primary) }
.detail-meta .meta-sep { color:#c4c9cf; margin: 0 4px }
.detail-content { color:#1f2328; line-height: 1.9; font-size:16.5px; overflow: visible; }
.detail-container-fix { overflow: visible; }
.detail-content p { margin: 0 0 1em 0 }
.detail-content h2 { font-size: 22px; margin: 1.4em 0 .6em; font-weight: 700 }
.detail-content h3 { font-size: 18px; margin: 1.2em 0 .5em; font-weight: 700 }
.detail-content img { max-width: 100%; height: auto; display: block; margin: .6em auto }
.detail-content ul, .detail-content ol { padding-left: 1.2em; margin: .6em 0 }
.detail-content blockquote { margin: 1em 0; padding: .6em .8em; border-left: 3px solid var(--dividerColor); background: #fafbfc; color: #4b4f5c }
.detail-tags { margin-top: 16px }
.author-extras { margin-top: 24px; padding: 16px; background: #f6f7f9; border-radius: 8px }
.author-extras .extras-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px }
.author-extras h3 { margin: 0 0 10px 0; font-size: 20px; font-weight: 800; color: #1f2328 }
.author-extras .extras-list { margin: 0; padding: 0; list-style: none }
.author-extras .extras-list li { padding: 8px 0; border-bottom: none !important }
.author-extras .extras-list li:last-child { border-bottom: 0 }
.author-extras .extras-list a { color: #1f2328; text-decoration: none !important; border-bottom: none !important }
.author-extras .extras-list a:hover { color: var(--primary); text-decoration: none !important; border-bottom: none !important }
.author-extras .extras-actions { text-align: center; padding: 16px 0 }
.author-extras .btn { padding: 10px 22px; border-radius: 8px; border: 1px solid var(--dividerColor); background: #fff; cursor: pointer; color: #111 }
.author-extras .btn-primary { background: var(--primary); color: #fff; border-color: var(--primary) }
.author-extras .btn-ghost { margin: 0 8px; color: #111 }
.author-extras .extras-actions-hint { margin-top: 12px; color: #6b7280 }
.author-extras .extras-actions-row { margin-top: 16px }
.author-extras .extras-action { display: inline-flex; align-items: center; gap: 8px }
.author-extras .extras-action.clicked { border-color: var(--primary); color: var(--primary) }
.author-extras .extras-action .count { font-weight: 700; color: #6b7280 }
.detail-pager { margin: 24px 0 0; padding-top: 16px; border-top: 1px dashed var(--dividerColor); display:flex; justify-content: space-between; gap: 12px }
.detail-comments { margin-top: 24px }

/* 左侧社交互动栏 - 水平排列 */
.social-sidebar {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 0;
    position: static;
}

/* 仅详情页：左侧社交栏与中栏一起上移，右栏保持不动 */
.social-sidebar { margin-top: 0 !important }

/* 仅上移左侧社交栏与中栏 260px，右侧栏不动 */
/* 保持整体基线稳定，避免正文被负向位移挤上去 */
/* 取消上移：让内容与评论自然向下增长 */
.social-sidebar { transform: none !important; align-self: start !important; }
.detail-main { transform: none !important; align-self: start !important; }

.social-actions {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
}

.social-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    padding: 12px 8px;
    border-radius: 8px;
    transition: background-color 0.2s;
    min-width: 44px;
}

.social-item:hover {
    background-color: var(--primary);
}

.social-icon {
    font-size: 20px;
    margin-bottom: 6px;
}

.social-count {
    font-size: 16px;
    font-weight: 700;
    color: #333;
    margin-bottom: 8px;
}

.social-label {
    font-size: 12px;
    color: #666;
    text-align: center;
}

/* 面包屑导航 */
.breadcrumb { 
    margin: 6px 0 12px 0; 
    padding: 6px 0; 
    font-size: 14px; 
    color: #666; 
    transform: none !important;
}

/* 仅详情页：压缩导航与正文间距（使用自然间距，不用位移） */
.blog-header { margin-bottom: 8px !important; }
main.container.detail-grid { margin-top: 0 !important; }
.breadcrumb a { 
    color: var(--primary); 
    text-decoration: none; 
}
.breadcrumb a:hover { 
    color: var(--primaryHover); 
}
.breadcrumb span { 
    color: #999; 
}

/* 详情页右侧栏保持原位，不随中栏上移 */
.detail-grid .side-bar { width: 100%; margin-top: 50px !important; margin-left: 0 !important; transform: none !important; }

/* VIP专享模块样式 */
.detail-grid .vip-section .widget li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px dashed #e5e7eb;
}

.detail-grid .vip-section .widget li:last-child {
    border-bottom: none;
}

.detail-grid .vip-section .rank-vip {
    flex: 0 0 40px;
    height: 40px;
    background: #e8f5e8;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    font-weight: 700;
    position: relative;
    font-size: 14px;
}

.detail-grid .vip-section .rank-vip::before {
    content: 'NO';
    font-size: 10px;
    line-height: 1;
    color: #95a3ab;
    font-weight: 600;
    margin-bottom: 2px;
}

.detail-grid .vip-section .title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    color: #333;
}