/**
 * 文章详情页样式
 * 灰白相间视觉效果
 */

/* 页面主体容器 */
.detail-page-wrapper {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto clamp(16px, 3vw, 24px);
    padding: clamp(12px, 3vw, 24px) clamp(12px, 5vw, 60px);
    box-sizing: border-box;
    background: #FFFFFF;
    border-radius: 0 0 clamp(8px, 2vw, 16px) clamp(8px, 2vw, 16px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    min-height: calc(100vh - 140px);
}

.detail-page-wrapper *,
.detail-page-wrapper *::before,
.detail-page-wrapper *::after {
    box-sizing: border-box;
}

/* 所有区块统一全宽 */
.detail-page-wrapper > nav,
.detail-page-wrapper > article,
.detail-page-wrapper > section {
    width: 100% !important;
    max-width: none !important;
    float: none !important;
    display: block;
}

/* 面包屑导航 */
.detail-breadcrumb {
    width: 100% !important;
    background: #EEF1F5;
    padding: 10px 16px;
    border-radius: 8px;
    margin-bottom: 16px;
    border: 1px solid #E8ECF0;
}

.detail-breadcrumb ol {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

.detail-breadcrumb li {
    display: flex;
    align-items: center;
}

.detail-breadcrumb li a {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #64748B;
    text-decoration: none;
    font-size: 14px;
    transition: color 0.2s;
}

.detail-breadcrumb li a:hover {
    color: #5B5FC7;
}

.detail-breadcrumb li span {
    color: #1F2937;
    font-size: 14px;
}

.detail-breadcrumb .sep {
    padding: 0 10px;
    color: #CBD5E1;
    font-size: 12px;
}

/* 文章主体区块 - 白色卡片 */
.detail-article-block {
    width: 100% !important;
    background: #FFFFFF;
    margin-bottom: clamp(12px, 2.5vw, 20px);
    padding: clamp(16px, 4vw, 32px) clamp(12px, 4vw, 40px);
    border-radius: clamp(8px, 2vw, 12px);
    border: 1px solid #E8ECF0;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

/* 文章头部 */
.detail-header {
    text-align: center;
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid #E8ECF0;
}

.detail-title {
    font-size: clamp(18px, 4vw, 24px);
    font-weight: 600;
    color: #1F2937;
    margin: 0 0 clamp(8px, 2vw, 12px) 0;
    line-height: 1.4;
}

.detail-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
    font-size: 13px;
    color: #64748B;
}

.detail-meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.detail-meta-item i {
    color: #94A3B8;
}

.detail-meta-item a {
    color: #5B5FC7;
    text-decoration: none;
}

.detail-meta-item a:hover {
    text-decoration: underline;
}

/* 封面图 */
.detail-cover {
    margin-bottom: 24px;
    border-radius: 12px;
    overflow: hidden;
}

.detail-cover img {
    width: 100%;
    height: auto;
    display: block;
}

/* 文章内容 */
.detail-content {
    font-size: clamp(14px, 3.5vw, 16px);
    line-height: 1.8;
    color: #374151;
}

.detail-content p {
    margin-bottom: 16px;
}

.detail-content img {
    max-width: 100%;
    border-radius: 8px;
    margin: 16px 0;
}

.detail-content h2, .detail-content h3, .detail-content h4 {
    margin-top: 24px;
    margin-bottom: 16px;
    color: #1F2937;
}

.detail-content pre {
    background: #F8FAFC;
    padding: 16px;
    border-radius: 8px;
    overflow-x: auto;
}

.detail-content blockquote {
    border-left: 4px solid #5B5FC7;
    padding-left: 16px;
    margin: 16px 0;
    color: #64748B;
    font-style: italic;
}

/* 内容隐藏提示 */
.detail-hidden-tip {
    background: #F8FAFC;
    border-radius: 10px;
    border: 1px solid #E8ECF0;
    padding: clamp(16px, 4vw, 32px);
    text-align: center;
}

.detail-hidden-tip .icon {
    width: clamp(40px, 8vw, 56px);
    height: clamp(40px, 8vw, 56px);
    background: #EEF1F5;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px;
}

.detail-hidden-tip .icon i {
    font-size: 22px;
    color: #64748B;
}

.detail-hidden-tip h3 {
    font-size: 16px;
    font-weight: 600;
    color: #1F2937;
    margin: 0 0 6px 0;
}

.detail-hidden-tip p {
    font-size: 13px;
    color: #64748B;
    margin: 0 0 16px 0;
}

.detail-hidden-tip .actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.detail-hidden-tip .btn-login {
    background: #5B5FC7;
    color: white;
    padding: 8px 20px;
    border-radius: 6px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    transition: background 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.detail-hidden-tip .btn-login:hover {
    background: #4B4FB7;
}

.detail-hidden-tip .btn-register {
    background: transparent;
    color: #64748B;
    padding: 8px 20px;
    border: 1px solid #E5E7EB;
    border-radius: 6px;
    text-decoration: none;
    font-size: 13px;
    transition: all 0.2s;
}

.detail-hidden-tip .btn-register:hover {
    border-color: #5B5FC7;
    color: #5B5FC7;
}

.detail-hidden-tip .or-text {
    color: #94A3B8;
    font-size: 13px;
}

/* 付费购买信息 */
.detail-hidden-tip .purchase-info {
    margin-top: 16px;
}

/* 购买按钮 */
.detail-hidden-tip .btn-purchase {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    background: linear-gradient(135deg, #10B981 0%, #059669 100%);
    color: white;
    font-size: 15px;
    font-weight: 600;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.4);
}

.detail-hidden-tip .btn-purchase:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.5);
}

.detail-hidden-tip .btn-purchase:active {
    transform: translateY(0);
}

.detail-hidden-tip .btn-purchase i {
    font-size: 14px;
}

/* 广告容器 */
.detail-ad {
    margin: 20px 0;
    border-radius: 8px;
    overflow: hidden;
}

.detail-ad img {
    width: 100%;
    display: block;
}

.detail-ad a {
    display: block;
}

/* 原创徽章 */
.detail-badge-original {
    display: inline-block;
    padding: 2px 10px;
    background: linear-gradient(135deg, #5B5FC7 0%, #7C3AED 100%);
    color: white;
    font-size: 12px;
    font-weight: 500;
    border-radius: 12px;
}

/* 版权声明 */
.detail-copyright {
    margin-top: 16px;
    padding: 12px 16px;
    background: #F8FAFC;
    border-radius: 6px;
    border-left: 3px solid #5B5FC7;
}

.detail-copyright p {
    margin: 0;
    font-size: 13px;
    color: #64748B;
}

.detail-copyright strong {
    color: #1F2937;
}

.detail-copyright a {
    color: #5B5FC7;
    text-decoration: none;
}

.detail-copyright a:hover {
    text-decoration: underline;
}

/* 文章标签 */
.detail-tags {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #E8ECF0;
}

.detail-tags i {
    color: #94A3B8;
    font-size: 13px;
}

.detail-tags a {
    display: inline-block;
    padding: 3px 10px;
    background: #F1F5F9;
    border-radius: 12px;
    font-size: 12px;
    color: #64748B;
    text-decoration: none;
    transition: all 0.2s;
    border: 1px solid transparent;
}

.detail-tags a:hover {
    background: #5B5FC7;
    color: white;
}

/* 上下篇导航 - 灰色背景 */
.detail-nav-block {
    width: 100% !important;
    background: #EEF1F5 !important;
    margin-bottom: clamp(12px, 2.5vw, 20px);
    padding: clamp(12px, 3vw, 16px) clamp(12px, 3vw, 20px);
    border-radius: clamp(8px, 2vw, 12px);
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px;
}

.detail-nav-item {
    flex: 1;
    min-width: 0;
    background: #FFFFFF;
    padding: 14px 18px;
    border-radius: 8px;
    border: 1px solid #E8ECF0;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
    transition: all 0.2s;
}

.detail-nav-item:hover {
    border-color: #5B5FC7;
    box-shadow: 0 2px 8px rgba(91, 95, 199, 0.1);
}

.detail-nav-item.empty {
    background: transparent;
    border: 1px dashed #D1D5DB;
    box-shadow: none;
}

.detail-nav-item .label {
    display: block;
    font-size: 12px;
    color: #94A3B8;
    margin-bottom: 4px;
}

.detail-nav-item .label i {
    margin: 0 4px;
}

.detail-nav-item a {
    font-size: 14px;
    color: #1F2937;
    text-decoration: none;
    font-weight: 500;
    line-height: 1.4;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.detail-nav-item a:hover {
    color: #5B5FC7;
}

.detail-nav-item.next {
    text-align: right;
}

/* 相关推荐 - 白色卡片 */
.detail-related-block {
    width: 100% !important;
    background: #FFFFFF;
    margin-bottom: 20px;
    border-radius: 12px;
    border: 1px solid #E8ECF0;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
    overflow: hidden;
}

.detail-related-header {
    padding: 16px 20px;
    border-bottom: 1px solid #E8ECF0;
    background: #FAFBFC;
}

.detail-related-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    color: #1F2937;
    margin: 0;
}

.detail-related-title i {
    color: #5B5FC7;
}

.detail-related-body {
    padding: 16px 20px;
}

.detail-related-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 12px !important;
}

.detail-related-item {
    background: #F8FAFC;
    border-radius: 8px;
    border: 1px solid #E8ECF0;
    overflow: hidden;
    text-decoration: none;
    transition: all 0.2s;
}

.detail-related-item:hover {
    background: #FFFFFF;
    border-color: #5B5FC7;
    box-shadow: 0 4px 12px rgba(91, 95, 199, 0.1);
    transform: translateY(-2px);
}

.detail-related-item .cover {
    height: 100px;
    background: #EEF1F5;
    display: flex;
    align-items: center;
    justify-content: center;
}

.detail-related-item .cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.detail-related-item .cover i {
    font-size: 32px;
    color: #94A3B8;
}

.detail-related-item .title {
    padding: 10px 12px;
    font-size: 13px;
    color: #1F2937;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: #FFFFFF;
}

/* 评论区 - 灰色背景 */
.detail-comment-block {
    width: 100% !important;
    background: #EEF1F5 !important;
    margin-bottom: 24px;
    padding: 20px;
    border-radius: 12px;
}

.detail-comment-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #DDE2E8;
}

.detail-comment-title {
    font-size: 15px;
    font-weight: 600;
    color: #1F2937;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.detail-comment-title i {
    color: #5B5FC7;
}

.detail-comment-count {
    background: #5B5FC7;
    color: white;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
}

/* 评论表单 */
.detail-comment-form {
    background: #FFFFFF;
    border-radius: 10px;
    border: 1px solid #E8ECF0;
    padding: 20px;
    margin-bottom: 16px;
}

.detail-comment-form .comment-form-wrapper {
    display: flex;
    gap: 14px;
}

.detail-comment-form .comment-avatar {
    width: clamp(32px, 7vw, 42px);
    height: clamp(32px, 7vw, 42px);
    border-radius: 50%;
    background: linear-gradient(135deg, #5B5FC7, #7C7FD9);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 14px;
    font-weight: 600;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(91, 95, 199, 0.25);
}

.detail-comment-form .comment-avatar span {
    color: white !important;
}

.detail-comment-form .comment-input-wrapper {
    flex: 1;
}

.detail-comment-form .comment-textarea {
    width: 100%;
    min-height: 70px;
    padding: 12px 14px;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    background: #F9FAFB;
    color: #1F2937;
    font-size: 14px;
    resize: vertical;
    outline: none;
    transition: all 0.2s;
}

.detail-comment-form .comment-textarea:focus {
    border-color: #5B5FC7;
    background: #FFFFFF;
    box-shadow: 0 0 0 3px rgba(91, 95, 199, 0.1);
}

.detail-comment-form .comment-form-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 12px;
}

.detail-comment-form .comment-submit {
    padding: 8px 20px;
    background: #5B5FC7;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
}

.detail-comment-form .comment-submit:hover {
    background: #4A4EB8;
}

/* 评论列表容器 */
.detail-comment-list {
    background: #FFFFFF;
    border-radius: 10px;
    border: 1px solid #E8ECF0;
    padding: 0;
    overflow: hidden;
}

/* 评论项 */
.detail-comment-list .comment-item {
    padding: 16px 20px;
    border-bottom: 1px solid #E8ECF0;
    background: #FFFFFF;
    transition: background 0.2s;
}

.detail-comment-list .comment-item:last-child {
    border-bottom: none;
}

.detail-comment-list .comment-item:hover {
    background: #FAFBFC;
}

/* 评论头像 */
.detail-comment-list .comment-avatar {
    width: clamp(32px, 7vw, 40px);
    height: clamp(32px, 7vw, 40px);
    border-radius: 50%;
    background: linear-gradient(135deg, #5B5FC7, #7C7FD9);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 14px;
    font-weight: 600;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(91, 95, 199, 0.25);
}

/* 评论者信息 */
.detail-comment-list .comment-author {
    font-weight: 600;
    color: #1F2937;
    font-size: 14px;
}

.detail-comment-list .comment-time {
    font-size: 12px;
    color: #94A3B8;
}

/* 评论内容 */
.detail-comment-list .comment-text {
    font-size: 14px;
    line-height: 1.6;
    color: #4B5563;
    margin-top: 8px;
}

/* 评论操作 */
.detail-comment-list .comment-action {
    font-size: 12px;
    color: #94A3B8;
    background: none;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.2s;
}

.detail-comment-list .comment-action:hover {
    background: #EEF1F5;
    color: #5B5FC7;
}

/* 空状态 */
.detail-comment-empty {
    padding: 40px 24px;
    text-align: center;
    background: #FFFFFF;
    border-radius: 10px;
    border: 1px solid #E8ECF0;
}

.detail-comment-empty .icon {
    width: 56px;
    height: 56px;
    background: #EEF1F5;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
}

.detail-comment-empty .icon i {
    font-size: 24px;
    color: #94A3B8;
}

.detail-comment-empty p {
    font-size: 14px;
    color: #94A3B8;
    margin: 0;
}

/* 加载更多 */
.detail-comment-more {
    text-align: center;
    padding: 12px 0;
    border-top: 1px solid #E8ECF0;
    background: #FAFBFC;
}

.detail-comment-more a {
    font-size: 13px;
    color: #5B5FC7;
    text-decoration: none;
}

.detail-comment-more a:hover {
    text-decoration: underline;
}

/* 登录提示 */
.detail-login-tip {
    background: #FFFFFF;
    border-radius: 10px;
    border: 1px solid #E8ECF0;
    padding: clamp(16px, 4vw, 32px);
    text-align: center;
    margin-bottom: 16px;
}

.detail-login-tip .icon {
    width: clamp(40px, 8vw, 56px);
    height: clamp(40px, 8vw, 56px);
    background: #EEF1F5;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px;
}

.detail-login-tip .icon i {
    font-size: 22px;
    color: #64748B;
}

.detail-login-tip .tip-text {
    font-size: 14px;
    color: #64748B;
    margin: 0 0 16px 0;
}

.detail-login-tip .tip-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.detail-login-tip .btn-login {
    background: #5B5FC7;
    color: white;
    padding: 8px 20px;
    border-radius: 6px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    transition: background 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.detail-login-tip .btn-login:hover {
    background: #4B4FB7;
}

.detail-login-tip .tip-or {
    color: #94A3B8;
    font-size: 13px;
}

.detail-login-tip .btn-register {
    background: transparent;
    color: #64748B;
    padding: 8px 20px;
    border: 1px solid #E5E7EB;
    border-radius: 6px;
    text-decoration: none;
    font-size: 13px;
    transition: all 0.2s;
}

.detail-login-tip .btn-register:hover {
    border-color: #5B5FC7;
    color: #5B5FC7;
}

/* 响应式 */
@media (max-width: 1100px) {
    .detail-related-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .detail-article-block {
        padding: clamp(12px, 4vw, 24px) clamp(10px, 3vw, 20px);
    }
    
    .detail-meta {
        flex-wrap: wrap;
        gap: clamp(8px, 2vw, 12px);
    }
    
    .detail-nav-block {
        grid-template-columns: 1fr;
    }
    
    .detail-nav-item.next {
        text-align: left;
    }
    
    .detail-related-grid {
        grid-template-columns: 1fr;
    }
}

/* ==================== 暗黑主题 ==================== */
body.dark-theme .detail-page-wrapper {
    background: #1e1e1e;
}

body.dark-theme .detail-breadcrumb {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
}

body.dark-theme .detail-breadcrumb li a {
    color: #888;
}

body.dark-theme .detail-breadcrumb li a:hover {
    color: #ccc;
}

body.dark-theme .detail-breadcrumb li span {
    color: #ccc;
}

body.dark-theme .detail-breadcrumb .sep {
    color: #555;
}

body.dark-theme .detail-article-block {
    background: #252525;
    border-color: rgba(255, 255, 255, 0.08);
}

body.dark-theme .detail-header {
    border-color: rgba(255, 255, 255, 0.08);
}

body.dark-theme .detail-title {
    color: #e0e0e0;
}

body.dark-theme .detail-meta {
    color: #888;
}

body.dark-theme .detail-meta-item i {
    color: #666;
}

body.dark-theme .detail-meta-item a {
    color: #aaa;
}

body.dark-theme .detail-content {
    color: #ccc;
}

body.dark-theme .detail-content h2,
body.dark-theme .detail-content h3,
body.dark-theme .detail-content h4 {
    color: #e0e0e0;
}

body.dark-theme .detail-content pre {
    background: rgba(255, 255, 255, 0.04);
}

body.dark-theme .detail-content blockquote {
    border-color: #666;
    color: #888;
}

body.dark-theme .detail-hidden-tip {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
}

body.dark-theme .detail-hidden-tip .icon {
    background: rgba(255, 255, 255, 0.06);
}

body.dark-theme .detail-hidden-tip .tip-text {
    color: #aaa;
}

body.dark-theme .detail-hidden-tip .btn-login {
    background: #555;
}

body.dark-theme .detail-hidden-tip .btn-login:hover {
    background: #666;
}

body.dark-theme .detail-hidden-tip .btn-register {
    color: #aaa;
}

body.dark-theme .detail-hidden-tip h3 {
    color: #E5E7EB;
}

body.dark-theme .detail-hidden-tip p {
    color: #9CA3AF;
}

body.dark-theme .detail-hidden-tip .btn-purchase {
    background: linear-gradient(135deg, #10B981 0%, #059669 100%);
}

body.dark-theme .detail-login-tip {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
}

body.dark-theme .detail-login-tip .icon {
    background: rgba(255, 255, 255, 0.06);
}

body.dark-theme .detail-login-tip .icon i {
    color: #888;
}

body.dark-theme .detail-login-tip .tip-text {
    color: #aaa;
}

body.dark-theme .detail-login-tip .tip-or {
    color: #666;
}

body.dark-theme .detail-login-tip .btn-login {
    background: #555;
}

body.dark-theme .detail-login-tip .btn-login:hover {
    background: #666;
}

body.dark-theme .detail-login-tip .btn-register {
    color: #888;
    border-color: rgba(255, 255, 255, 0.15);
}

body.dark-theme .detail-login-tip .btn-register:hover {
    color: #ccc;
    border-color: rgba(255, 255, 255, 0.3);
}

/* 上下篇导航暗色 */
body.dark-theme .detail-nav-block {
    background: #252525 !important;
    border-color: rgba(255, 255, 255, 0.08);
}

body.dark-theme .detail-nav-item {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
}

body.dark-theme .detail-nav-item:hover {
    border-color: rgba(255, 255, 255, 0.15);
}

body.dark-theme .detail-nav-item .label {
    color: #888;
}

body.dark-theme .detail-nav-item a {
    color: #ccc;
}

body.dark-theme .detail-nav-item:hover a {
    color: #e0e0e0;
}

body.dark-theme .detail-nav-label {
    color: #666;
}

body.dark-theme .detail-nav-title {
    color: #ccc;
}

body.dark-theme .detail-nav-item a:hover .detail-nav-title {
    color: #e0e0e0;
}

/* 相关文章暗色 */
body.dark-theme .detail-related-block {
    background: #252525;
    border-color: rgba(255, 255, 255, 0.08);
}

body.dark-theme .detail-related-header {
    background: rgba(255, 255, 255, 0.03);
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

body.dark-theme .detail-related-title {
    color: #e0e0e0;
}

body.dark-theme .detail-related-title i {
    color: #888;
}

body.dark-theme .detail-related-body {
    background: transparent;
}

body.dark-theme .detail-related-item {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.06);
}

body.dark-theme .detail-related-item:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

body.dark-theme .detail-related-item .cover {
    background: rgba(255, 255, 255, 0.06);
}

body.dark-theme .detail-related-item .cover i {
    color: #666;
}

body.dark-theme .detail-related-item .title {
    background: rgba(255, 255, 255, 0.04);
    color: #ccc;
}

body.dark-theme .detail-related-item-icon {
    background: rgba(255, 255, 255, 0.06);
}

body.dark-theme .detail-related-item-icon i {
    color: #888;
}

body.dark-theme .detail-related-item-title {
    color: #ccc;
}

body.dark-theme .detail-related-card {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.06);
}

body.dark-theme .detail-related-card:hover {
    border-color: rgba(255, 255, 255, 0.12);
}

body.dark-theme .detail-related-card h4 {
    color: #ccc;
}

body.dark-theme .detail-related-card span {
    color: #666;
}

/* 评论区暗色 */
body.dark-theme .detail-comment-block {
    background: #252525 !important;
}

body.dark-theme .detail-comment-header {
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

body.dark-theme .detail-comment-title {
    color: #e0e0e0;
}

body.dark-theme .detail-comment-title i {
    color: #888;
}

body.dark-theme .detail-comment-count {
    background: #555;
}

body.dark-theme .detail-comments-block {
    background: #252525;
    border-color: rgba(255, 255, 255, 0.08);
}

body.dark-theme .detail-comments-title {
    color: #e0e0e0;
    border-color: rgba(255, 255, 255, 0.08);
}

body.dark-theme .comment-item {
    border-color: rgba(255, 255, 255, 0.06);
}

body.dark-theme .comment-author {
    color: #ccc;
}

body.dark-theme .comment-time {
    color: #666;
}

body.dark-theme .comment-content {
    color: #aaa;
}

body.dark-theme .comment-reply-btn {
    color: #666;
}

body.dark-theme .comment-reply-btn:hover {
    color: #aaa;
}

/* 评论表单暗色 */
body.dark-theme .comment-form textarea {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.1);
    color: #ccc;
}

body.dark-theme .comment-form textarea:focus {
    border-color: rgba(255, 255, 255, 0.2);
}

body.dark-theme .comment-submit-btn {
    background: #555;
}

body.dark-theme .comment-submit-btn:hover {
    background: #666;
}

/* 评论验证码暗色 */
body.dark-theme .comment-captcha-row input {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #ccc;
}

body.dark-theme .comment-captcha-row input::placeholder {
    color: #666;
}

/* 评论表单暗色 */
body.dark-theme .detail-comment-form {
    background: #252525;
    border-color: rgba(255, 255, 255, 0.08);
}

body.dark-theme .detail-comment-form .comment-textarea {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.1);
    color: #ccc;
}

body.dark-theme .detail-comment-form .comment-textarea:focus {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.15);
}

body.dark-theme .detail-comment-form .comment-submit {
    background: #555;
}

body.dark-theme .detail-comment-form .comment-submit:hover {
    background: #666;
}

/* 评论列表暗色 */
body.dark-theme .detail-comment-list {
    background: #252525;
    border-color: rgba(255, 255, 255, 0.08);
}

body.dark-theme .detail-comment-list .comment-item {
    background: #252525;
    border-color: rgba(255, 255, 255, 0.06);
}

body.dark-theme .detail-comment-list .comment-item:hover {
    background: rgba(255, 255, 255, 0.02);
}

body.dark-theme .detail-comment-list .comment-author {
    color: #ccc;
}

body.dark-theme .detail-comment-list .comment-time {
    color: #666;
}

body.dark-theme .detail-comment-list .comment-content {
    color: #aaa;
}

body.dark-theme .detail-comment-list .comment-text {
    color: #aaa;
}

body.dark-theme .detail-comment-list .comment-action {
    color: #666;
}

body.dark-theme .detail-comment-list .comment-action:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #aaa;
}

/* 评论加载更多暗色 */
body.dark-theme .detail-comment-more {
    background: rgba(255, 255, 255, 0.03);
    border-top-color: rgba(255, 255, 255, 0.08);
}

body.dark-theme .detail-comment-more a {
    color: #888;
}

body.dark-theme .detail-comment-more a:hover {
    color: #ccc;
}

/* 评论空状态暗色 */
body.dark-theme .detail-comment-empty {
    background: rgba(255, 255, 255, 0.04);
}