/* ==========================================
   文献解读页面样式 - view_literature.css
   参考整站设计风格，保持高度一致性
   ========================================== */

/* ==========================================
   页面主容器
   ========================================== */
.literature-main {
    min-height: 100vh;
    background: var(--bg-secondary);
}

 /* ==========================================
    文献标题英雄区域 - 移动端优先
    ========================================== */
 .literature-hero-section {
     background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 50%, #60a5fa 100%);
     padding: 80px 0 60px;  /* 增加下边距以容纳视频播放器 */
     position: relative;
     overflow: hidden;
 }
 
 .literature-hero-section::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: 
         radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.08) 0%, transparent 50%),
         radial-gradient(circle at 80% 50%, rgba(255, 255, 255, 0.05) 0%, transparent 50%);
     pointer-events: none;
 }

.literature-hero-section .container {
    position: relative;
    z-index: 1;
}

/* 面包屑导航 */
.breadcrumb {
    font-size: 0.9rem;
    color: var(--text-inverse-secondary);
    margin-bottom: 1rem;  /* 移动端默认 */
    text-align: left;
}

.breadcrumb a {
    color: var(--text-inverse-secondary);
    text-decoration: none;
    transition: all 0.3s ease;
}

.breadcrumb a:hover {
    color: var(--text-inverse);
}

 /* 文献标题 - 移动端默认 */
 .literature-title {
     font-size: 1.1rem;  /* 移动端默认 */
     font-weight: 600;
     color: var(--text-inverse-secondary);
     margin-bottom: 0.5rem;  /* 移动端默认 */
     line-height: 1.4;
     text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
 }
 
 /* 文献副标题（更重要，更突出） - 移动端默认 */
 .literature-subtitle {
     font-size: 1.5rem;  /* 移动端默认 */
     font-weight: 700;
     color: var(--text-inverse);
     margin: 0 0 1rem 0;  /* 移动端默认 */
     line-height: 1.3;
     text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
     letter-spacing: -0.02em;
 }
 
 /* 文献元信息 - 移动端默认垂直布局 */
.literature-meta {
    display: flex;
    flex-direction: column;  /* 移动端默认垂直 */
    align-items: flex-start;
    gap: 0.5rem;  /* 移动端默认 */
    font-size: 0.95rem;
    color: var(--text-inverse-soft);
}

.literature-meta .meta-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.literature-meta .meta-item i {
    font-size: 0.9rem;
}

.literature-meta .meta-highlight {
    color: inherit; /* 使用默认白色 */
    font-weight: 400;
    font-size: 1em;
}

.literature-meta .meta-item a {
    color: var(--text-inverse-soft);
    text-decoration: none;
}

.literature-meta .meta-divider {
    color: var(--text-inverse-secondary);
    display: none;  /* 移动端默认隐藏 */
}

/* ==========================================
   视频播放区域 - 左右两列布局
   ========================================== */
.video-container-wrapper {
    margin-top: 2rem;
    width: 100%;
}

.video-grid {
    display: grid;
    grid-template-columns: 1fr;  /* 移动端默认单列 */
    gap: 1.5rem;
    align-items: start;
}

/* 左侧视频播放器列 */
.video-player-column {
    width: 100%;
}

/* 右侧信息侧边栏列 */
.video-sidebar-column {
    width: 100%;
}

/* 移动端：视频列表侧边栏全宽显示 */
@media (max-width: 767px) {
    .video-container-wrapper {
        margin-top: 1.5rem;
    }
    
    .literature-video-list {
        margin-top: 1.5rem;
    }
    
    .chapter-list {
        max-height: 300px;
    }
    
    .video-tabs li a {
        padding: 0.75rem 0.5rem;
        font-size: 0.85rem;
    }
    
    /* 相关文章 - 移动端单列（仅针对主内容区的grid布局） */
    .literature-main .related-articles {
        grid-template-columns: 1fr !important;
        gap: 1rem;
    }
    
    .related-article-card {
        padding: 1.25rem;
    }
    
    .related-article-card h4 {
        font-size: 0.95rem;
        min-height: auto;
    }
    
    .article-desc {
        font-size: 0.85rem;
        min-height: auto;
    }
}

/* ==========================================
   主内容区域布局 - 移动端优先
   ========================================== */
.literature-content-wrapper {
    padding: 2rem 0;  /* 移动端默认 */
}

.literature-layout {
    display: grid;
    grid-template-columns: 1fr;  /* 移动端默认单列 */
    gap: 1.5rem;  /* 移动端默认 */
    align-items: start;
}

/* ==========================================
   文章主内容区 - 整体容器
   ========================================== */
.literature-article {
    background: var(--bg-primary);
    border-radius: 12px;
    overflow: hidden; /* 确保子元素不会溢出圆角 */
    box-shadow: var(--shadow-small);
    transition: all 0.3s ease;
}

.literature-article:hover {
    box-shadow: var(--shadow-medium);
}

/* ==========================================
   通用卡片样式 - 移动端优先
   ========================================== */
.literature-info-card {
    background: var(--bg-primary);
    border-radius: 12px;
    padding: 1.5rem;  /* 移动端默认 */
    box-shadow: var(--shadow-small);
    transition: all 0.3s ease;
}

/* literature-article 内部的区块 - 不需要背景和圆角 */
.literature-article > .video-section,
.literature-article > .summary-section,
.literature-article > .article-content,
.literature-article > .resources-section,
.literature-article > .learning-guide-section,
.literature-article > .discussion-section {
    background: transparent;
    border-radius: 0;
    padding: 1.5rem;  /* 移动端默认 */
    box-shadow: none;
}

/* 文章底部标签区域 - 移动端也不需要 padding */
.literature-article > .article-footer-section {
    background: transparent;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
}

/* 独立的区块（不在 literature-article 内） */
.related-section,
.share-section {
    background: var(--bg-primary);
    border-radius: 12px;
    padding: 1.5rem;  /* 移动端默认 */
    box-shadow: var(--shadow-small);
    transition: all 0.3s ease;
}

.literature-info-card:hover,
.related-section:hover,
.share-section:hover {
    box-shadow: var(--shadow-medium);
}

/* ==========================================
   区域标题样式
   ========================================== */
.section-header {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--border-light);
    display: flex;
    flex-direction: column;  /* 移动端默认垂直排列 */
    gap: 0.5rem;
}

.section-header h2 {
    font-size: 1.5rem;  /* 移动端默认 */
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0;
}

.section-header h2 i {
    color: var(--primary-color);
    font-size: 1.5rem;
}

.section-header .section-desc {
    font-size: 0.95rem;
    color: var(--text-secondary);
    margin: 0;
}

/* ==========================================
   文章元信息（简约样式）
   ========================================== */
.article-meta-simple {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-light);
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.article-meta-simple .meta-simple-item {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.article-meta-simple .meta-simple-item i {
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.article-meta-simple .meta-simple-divider {
    color: var(--border-color);
    margin: 0 0.25rem;
}

/* 可复现性评分 */
.reproducibility-score {
    background: var(--bg-secondary);
    border-radius: 8px;
    padding: 1.5rem;
    margin-top: 1.5rem;
}

.score-header h3 {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 1rem 0;
}

.score-header h3 i {
    color: var(--success-color);
}

.score-items {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.score-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    background: var(--bg-primary);
    border-radius: 6px;
}

.score-item.overall {
    background: var(--primary-alpha-10);
    border: 1px solid var(--primary-color);
    font-weight: 600;
}

.score-label {
    font-size: 0.95rem;
    color: var(--text-primary);
}

.score-stars {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.score-stars i {
    color: var(--warning-color);
    font-size: 1rem;
}

.score-stars .fa-star {
    color: var(--warning-color);
}

.score-stars .fa-star-half-alt {
    color: var(--warning-color);
}

.score-text {
    margin-left: 0.75rem;
    font-size: 0.9rem;
    color: var(--text-secondary);
    font-weight: 600;
}

.score-text.overall-score {
    color: var(--primary-color);
    font-weight: 700;
}

/* ==========================================
   视频讲解区域
   ========================================== */
.video-wrapper {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 宽高比 */
    background: var(--bg-dark);
    border-radius: 8px; /* 添加圆角让视频更美观 */
    overflow: hidden;
}

.bilibili-iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.video-info {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* ==========================================
   视频列表侧边栏样式
   ========================================== */
.literature-video-list {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

/* 作者信息区域 */
.video-list-author {
    padding: 1.25rem;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, rgba(96, 165, 250, 0.05) 100%);
    border-bottom: 1px solid rgba(59, 130, 246, 0.1);
}

.author-grid {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.author-avatar {
    position: relative;
    flex-shrink: 0;
}

.author-avatar .avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(59, 130, 246, 0.3);
}

.author-avatar .author-badge {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 16px;
    height: 16px;
    background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%);
    border-radius: 50%;
    border: 2px solid #ffffff;
}

.author-avatar .author-badge::before {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #ffffff;
    font-size: 10px;
    font-weight: bold;
}

.author-info {
    flex: 1;
    min-width: 0;
}

.author-name {
    margin-bottom: 0.25rem;
}

.author-name a {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    text-decoration: none;
    transition: color 0.3s ease;
}

.author-name a:hover {
    color: var(--primary-color);
}

.bilibili-badge {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.15rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: #00a1d6;
    background: rgba(0, 161, 214, 0.1);
    border: 1px solid rgba(0, 161, 214, 0.3);
    border-radius: 4px;
    white-space: nowrap;
}

.author-desc {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 标签切换导航 */
.video-list-content {
    padding: 0;
}

.video-tabs {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    background: rgba(248, 250, 252, 0.5);
    border-bottom: 2px solid rgba(59, 130, 246, 0.1);
}

.video-tabs li {
    flex: 1;
}

.video-tabs li a {
    display: block;
    padding: 0.875rem 1rem;
    text-align: center;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-secondary);
    text-decoration: none;
    transition: all 0.3s ease;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
}

.video-tabs li.active a,
.video-tabs li a:hover {
    color: var(--primary-color);
    background: rgba(59, 130, 246, 0.05);
    border-bottom-color: var(--primary-color);
}

/* 标签内容区域 */
.video-tabs-content {
    position: relative;
}

.tab-pane {
    display: none;
    padding: 1rem;
    animation: fadeIn 0.3s ease;
}

.tab-pane.active {
    display: block;
}

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

/* 章节列表 */
/* 美化滚动条 */
.video-tabs-content::-webkit-scrollbar {
    width: 6px;
}

.video-tabs-content::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 3px;
}

.video-tabs-content::-webkit-scrollbar-thumb {
    background: rgba(59, 130, 246, 0.3);
    border-radius: 3px;
    transition: background 0.3s ease;
}

.video-tabs-content::-webkit-scrollbar-thumb:hover {
    background: rgba(59, 130, 246, 0.5);
}

/* 小横幅 */
.video-list-minibanner {
    overflow: hidden;
    border-top: 1px solid rgba(226, 232, 240, 0.5);
    height: 50px; /* 设置固定高度 */
}

.video-list-minibanner a {
    display: block;
    overflow: hidden;
    height: 100%;
}

.video-list-minibanner img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover; /* 保持比例填充 */
}

/* ==========================================
   内容区域标题
   ========================================== */
.content-section-title {
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 1.5rem;
    padding-left: 1rem;
    border-left: 4px solid var(--primary-color);
}

/* ==========================================
   一句话总结
   ========================================== */
.summary-box {
    display: flex;
    gap: 1.5rem;
    background: linear-gradient(135deg, var(--primary-alpha-10) 0%, var(--secondary-lighter) 100%);
    border-left: 4px solid var(--primary-color);
    padding: 1.5rem;
    border-radius: 8px;
}

.summary-icon {
    font-size: 2rem;
    color: var(--primary-color);
    opacity: 0.6;
}

.summary-content h3 {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--primary-color);
    margin: 0 0 0.75rem 0;
}

.summary-text {
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--text-primary);
    font-weight: 500;
    margin: 0;
}

/* ==========================================
   文章内容
   ========================================== */
.article-content {
    padding: 2.5rem;
}

.content-wrapper {
    font-size: 1rem;
    line-height: 1.8;
    color: var(--text-primary);
}

.content-wrapper h2,
.content-wrapper h3,
.content-wrapper h4 {
    margin-bottom: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.content-wrapper h2 {
    font-size: 1.8rem;
    padding-bottom: 0.5rem;
}

.content-wrapper h3 {
    font-size: 1.5rem;
}

.content-wrapper h4 {
    font-size: 1.2rem;
}

.content-wrapper p {
    margin-bottom: 1rem;
}

.content-wrapper ul,
.content-wrapper ol {
    margin-bottom: 1rem;
    padding-left: 2rem;
}

.content-wrapper li {
    margin-bottom: 0.5rem;
}

.content-wrapper img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 1.5rem 0;
    box-shadow: var(--shadow-medium);
}

.content-wrapper code {
    background: var(--bg-secondary);
    padding: 0.2rem 0.4rem;
    border-radius: 3px;
    font-family: 'Courier New', monospace;
    font-size: 0.9em;
    color: var(--accent-color);
}

.content-wrapper pre {
    background: var(--bg-dark);
    color: var(--text-inverse);
    padding: 1rem;
    border-radius: 6px;
    overflow-x: auto;
    margin: 1rem 0;
}

.content-wrapper blockquote {
    border-left: 4px solid var(--primary-color);
    background: var(--bg-secondary);
    padding: 1rem 1.5rem;
    margin: 1rem 0;
    border-radius: 4px;
}

.content-wrapper table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
    font-size: 0.95rem;
}

.content-wrapper th,
.content-wrapper td {
    border: 1px solid var(--border-primary);
    padding: 0.75rem;
    text-align: left;
}

.content-wrapper th {
    background: var(--bg-secondary);
    font-weight: 600;
    color: var(--text-primary);
}

.content-wrapper tr:hover {
    background: var(--bg-tertiary);
}

/* ==========================================
   资源下载区域
   ========================================== */
.resources-group {
    margin-bottom: 2rem;
}

.resources-group:last-child {
    margin-bottom: 0;
}

.resources-group-title {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0 0 1.5rem 0;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-primary);
}

.resources-group-title i {
    color: var(--success-color);
}

.resources-group.premium .resources-group-title i {
    color: var(--warning-color);
}

.vip-badge {
    background: linear-gradient(135deg, var(--warning-color) 0%, var(--warning-dark) 100%);
    color: var(--text-primary);
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 700;
    margin-left: auto;
}

.resources-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

.resource-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: 8px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.resource-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
}

.resource-card.free {
    border-color: var(--success-color);
}

.resource-card.premium {
    border-color: var(--warning-color);
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.05) 0%, rgba(255, 193, 7, 0.02) 100%);
}

.resource-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-alpha-10);
    border-radius: 8px;
    font-size: 1.5rem;
    color: var(--primary-color);
}

.resource-card.free .resource-icon {
    background: var(--success-bg);
    color: var(--success-color);
}

.resource-card.premium .resource-icon {
    background: var(--warning-bg);
    color: var(--warning-color);
}

.resource-info h4 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.resource-info p {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin: 0;
}

.resource-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem;
    background: var(--success-color);
    color: var(--text-inverse);
    text-decoration: none;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    margin-top: auto;
}

.resource-btn:hover {
    background: var(--success-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-small);
}

.premium-btn {
    background: var(--warning-color);
    color: var(--text-primary);
}

.premium-btn:hover {
    background: var(--warning-dark);
}

.vip-notice {
    background: var(--warning-bg);
    border: 1px solid var(--warning-color);
    border-radius: 6px;
    padding: 1rem;
    margin-top: 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.95rem;
    color: var(--text-primary);
}

.vip-notice i {
    color: var(--warning-color);
    font-size: 1.2rem;
}

.vip-notice a {
    color: var(--primary-color);
    font-weight: 600;
    text-decoration: none;
}

.vip-notice a:hover {
    text-decoration: underline;
}

/* ==========================================
   学习指导区域
   ========================================== */
.guide-block {
    margin-bottom: 2rem;
}

.guide-block:last-child {
    margin-bottom: 0;
}

.guide-block h3 {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0 0 1.5rem 0;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-primary);
}

.guide-block h3 i {
    color: var(--primary-color);
}

.guide-content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* 适合人群标签 */
.audience-tags {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.audience-tag {
    background: var(--primary-alpha-10);
    border: 1px solid var(--primary-color);
    border-radius: 8px;
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 600;
    color: var(--text-primary);
    transition: all 0.3s ease;
}

.audience-tag:hover {
    background: var(--primary-alpha-20);
    transform: translateY(-2px);
}

.audience-tag i {
    font-size: 1.5rem;
    color: var(--primary-color);
}

/* 前置知识 */
.prerequisites {
    background: var(--bg-secondary);
    border-radius: 8px;
    padding: 1.5rem;
}

.prerequisites h4 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 1rem 0;
}

.prerequisites ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.prerequisites li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.95rem;
    color: var(--text-primary);
}

.prerequisites li i {
    color: var(--success-color);
    font-size: 1rem;
}

/* 学习路径 */
.learning-path {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.path-step {
    display: flex;
    gap: 1.5rem;
    position: relative;
}

.path-step::after {
    content: '';
    position: absolute;
    left: 22px;
    top: 50px;
    width: 2px;
    height: calc(100% + 1.5rem);
    background: var(--border-primary);
}

.path-step:last-child::after {
    display: none;
}

.step-number {
    width: 45px;
    height: 45px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    color: var(--text-inverse);
    font-size: 1.2rem;
    font-weight: 700;
    border-radius: 50%;
    box-shadow: var(--shadow-medium);
    z-index: 1;
    position: relative;
}

.step-content {
    flex: 1;
    background: var(--bg-secondary);
    border-radius: 8px;
    padding: 1.5rem;
    border-left: 3px solid var(--primary-color);
}

.step-content h4 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.5rem 0;
}

.step-content p {
    font-size: 0.95rem;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.6;
}

/* 相关资源链接 */
.related-resources {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.related-resource-link {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: 6px;
    text-decoration: none;
    color: var(--text-primary);
    transition: all 0.3s ease;
}

.related-resource-link:hover {
    background: var(--primary-alpha-10);
    border-color: var(--primary-color);
}

.related-resource-link i:first-child {
    color: var(--primary-color);
    font-size: 1.2rem;
}

.related-resource-link span {
    flex: 1;
    font-weight: 500;
}

.related-resource-link i:last-child {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

/* ==========================================
   相关推荐区域 - 简化版（移除标签页）
   ========================================== */

/* 相关文章列表 */
/* 主内容区的相关文章 - 默认2列Grid布局 */
.literature-main .related-articles {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
}

.related-article-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: 10px;
    padding: 1.5rem;
    transition: all 0.3s ease;
    cursor: pointer;
}

.related-article-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-hover);
    border-color: var(--primary-color);
}

.related-article-card h4 {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 0.875rem 0;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 3.2rem;
}

.related-article-card h4 a {
    color: var(--text-primary);
    text-decoration: none;
    transition: color 0.3s ease;
}

.related-article-card h4 a:hover {
    color: var(--primary-color);
}

.article-desc {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.8rem;
}

.article-footer {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
    padding-top: 0.875rem;
    border-top: 1px solid var(--border-light);
}

.article-journal,
.article-date,
.article-if {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.article-journal i,
.article-date i,
.article-if i {
    color: var(--primary-color);
    font-size: 0.75rem;
}

/* 查看更多 */
.view-more {
    margin-top: 2rem;
    text-align: center;
}

.view-more .view-all-link {
    display: inline-flex;
    align-items: center;
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
    transition: all 0.2s ease;
}

.view-more .view-all-link:hover {
    color: var(--primary-dark);
    text-decoration: underline;
}

.view-more .view-all-link i {
    font-size: 0.8rem;
    margin-left: 4px;
    transition: transform 0.2s ease;
}

.view-more .view-all-link:hover i {
    transform: translateX(3px);
}

/* 旧版相关卡片样式（保留兼容） */
.related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
}

.related-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s ease;
    text-decoration: none;
    color: inherit;
    display: block;
}

.related-card:hover {
    box-shadow: var(--shadow-hover);
    border-color: var(--primary-color);
}

.related-card-image {
    width: 100%;
    height: 180px;
    object-fit: cover;
    background: var(--bg-tertiary);
}

.related-card-content {
    padding: 1.5rem;
}

.related-card-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.75rem 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.related-card-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.related-card-meta span {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* ==========================================
   文章底部信息区域
   ========================================== */
.article-footer-section {
    background: var(--bg-secondary);
    border-radius: 12px;
    padding: 0;  /* 移除 padding，已在各自元素控制 */
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* 引用格式 */
.article-citation {
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: 8px;
    padding: 1.5rem;
}

.article-citation h3 {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0 0 1rem 0;
}

.article-citation h3 i {
    color: var(--primary-color);
}

.citation-text {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    padding: 1rem;
    border-radius: 6px;
    margin: 0 0 1rem 0;
    font-family: 'Courier New', monospace;
}

.copy-citation-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: var(--primary-color);
    color: var(--text-inverse);
    border: none;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.copy-citation-btn:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-small);
}

/* 作者信息 */
.article-author-info {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: 8px;
    padding: 1.5rem;
}

.author-avatar {
    width: 60px;
    height: 60px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-alpha-10);
    border-radius: 50%;
    color: var(--primary-color);
    font-size: 2.5rem;
}

.author-details h4 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.5rem 0;
}

.author-details p {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin: 0;
}

/* 文章底部标签 */
.article-tags-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
    padding: 1rem 1.5rem;  /* 移动端默认左右 padding */
}

/* 文章标签：标题 */
.article-tags-footer .tags-label {
    font-size: 0.9rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.article-tags-footer .tag-link {
    display: inline-block;
    padding: 0 0.25rem;
    font-size: 0.9rem;
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.2s ease;
}

/* 标签之间的竖线分隔符 */
.article-tags-footer .tag-separator {
    color: var(--text-secondary);
    margin: 0 0.25rem;
}

/* 鼠标悬停效果 */
.article-tags-footer .tag-link:hover {
    color: var(--primary-color);
}

/* 已移除：文章分享、讨论区域样式（不再使用） */

/* ==========================================
   右侧边栏
   ========================================== */
.literature-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    position: static;  /* 移动端默认不固定 */
}

.sidebar-card {
    background: var(--bg-primary);
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: var(--shadow-small);
    transition: all 0.3s ease;
}

.sidebar-card:hover {
    box-shadow: var(--shadow-medium);
}

.sidebar-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.85rem 0; /* 从 1rem 减少到 0.85rem */
    padding-bottom: 0.65rem; /* 从 0.75rem 减少到 0.65rem */
    border-bottom: 1px solid var(--border-light);
}


/* 文章封面卡片 */
.cover-card {
    padding: 0;
    overflow: hidden;
    border-radius: 12px 12px 0 0; /* 只保留顶部圆角 */
}

.article-cover {
    width: 100%;
    aspect-ratio: 16/9;
    overflow: hidden;
    background: var(--bg-secondary);
}

.article-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.cover-card:hover .article-cover img {
    transform: scale(1.05);
}

/* 文献信息卡片 */
.literature-info-card {
    padding: 1rem 1.25rem; /* 上下 1rem，左右 1.25rem */
    border-radius: 0 0 12px 12px; /* 只保留底部圆角 */
    border-top: 1px solid var(--border-light); /* 添加顶部细线分隔 */
}

.literature-info-list {
    display: flex;
    flex-direction: column;
    gap: 0; /* 从 1rem 减少到 0，改用 padding-bottom 控制 */
}

.info-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    padding: 0.5rem 0; /* 进一步减小到 0.5rem */
    border-bottom: 1px solid var(--border-light);
}

.info-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.info-label {
    font-size: 0.9rem;
    color: var(--text-secondary);
    white-space: nowrap;
    font-weight: 500;
}

.info-value {
    font-size: 0.9rem;
    color: var(--text-primary);
    text-align: right;
    word-break: break-word;
}

.info-value.highlight {
    color: var(--primary-color);
    font-weight: 600;
}

.doi-link {
    color: var(--primary-color);
    text-decoration: none;
    transition: opacity 0.3s ease;
    word-break: break-all;
}

.doi-link:hover {
    opacity: 0.8;
    text-decoration: underline;
}

/* 热门文献列表 */
.hot-literature-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.hot-literature-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: var(--bg-secondary);
    border-radius: 6px;
    text-decoration: none;
    color: var(--text-primary);
    transition: all 0.3s ease;
}

.hot-literature-item:hover {
    background: var(--primary-alpha-10);
}

.hot-rank {
    flex-shrink: 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-right: 4px;
}

.hot-title {
    flex: 1;
    font-size: 0.9rem;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* 已移除：标签云和CTA卡片样式（不再使用） */

/* ==========================================
   响应式设计 - Mobile First
   ========================================== */

/* 平板端：768px - 1023px */
@media (min-width: 768px) {
    .literature-hero-section {
        padding: 90px 0 70px;
    }
    
    .breadcrumb {
        margin-bottom: 1.25rem;
    }

    .literature-title {
        font-size: 1.3rem;
        margin-bottom: 0.75rem;
    }

    .literature-subtitle {
        font-size: 1.8rem;
        margin-bottom: 1.5rem;
    }

    .literature-meta {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    .literature-meta .meta-divider {
        display: inline;
    }

    /* 视频区域 - 平板端开始两列布局 */
    .video-grid {
        grid-template-columns: 1fr 360px;  /* 左侧视频，右侧360px侧边栏 */
        gap: 1.5rem;
    }

    .video-sidebar-column {
        align-self: start;
        overflow: hidden;
        /* 高度由JS动态设置，与左侧视频等高 */
    }

    .literature-video-list {
        height: 100%;
        display: flex;
        flex-direction: column;
        overflow: hidden; /* 防止被内部元素撑开 */
    }

    .video-list-author {
        flex-shrink: 0; /* 作者信息区域不压缩 */
    }

    .video-list-content {
        flex: 1;
        min-height: 0; /* 关键：允许flex子元素缩小 */
        overflow: hidden; /* 防止被内容撑开 */
        display: flex;
        flex-direction: column;
    }

    .video-tabs {
        flex-shrink: 0; /* 标签导航不压缩 */
    }

    .video-tabs-content {
        flex: 1;
        min-height: 0; /* 关键：允许flex子元素缩小 */
        overflow-y: auto; /* 允许滚动 */
        overflow-x: hidden;
    }

    .video-list-minibanner {
        flex-shrink: 0; /* 小横幅区域不压缩 */
    }

    .literature-content-wrapper {
        padding: 2.5rem 0;
    }

    .section-header h2 {
        font-size: 1.6rem;
    }

    /* 相关文章 - 平板端保持2列 */
    .literature-main .related-articles {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* PC端：1024px+ */
@media (min-width: 1024px) {
    .literature-hero-section {
        padding: 100px 0 80px;
    }

    .breadcrumb {
        margin-bottom: 1.5rem;
    }

    .literature-title {
        font-size: 1rem;
        margin-bottom: 1rem;
    }

    .literature-subtitle {
        font-size: 2.8rem;
        margin-bottom: 2rem;
    }

    .literature-meta {
        gap: 1rem;
    }

    /* 视频区域 - PC端更宽的侧边栏 */
    .video-grid {
        grid-template-columns: 1fr 400px;  /* PC端右侧侧边栏更宽 */
        gap: 2rem;
    }

    .literature-content-wrapper {
        padding: 3rem 0;
    }

    .literature-layout {
        grid-template-columns: 1fr 320px;
        gap: 2rem;
    }

    .literature-sidebar {
        position: sticky;
        top: 90px;
    }

    /* literature-article 内部区块的 PC 端 padding */
    .literature-article > .video-section,
    .literature-article > .summary-section,
    .literature-article > .article-content,
    .literature-article > .resources-section,
    .literature-article > .learning-guide-section,
    .literature-article > .discussion-section {
        padding: 2rem;
    }
    
    /* 文献信息卡片保持上下 1rem 的 padding */
    .literature-info-card {
        padding: 1rem 2rem; /* 上下 1rem，左右 2rem（PC端） */
    }
    
    /* 文章底部标签区域不需要 padding */
    .literature-article > .article-footer-section {
        padding: 0;
    }
    
    /* 文章底部标签的左右 padding 与文章内容保持一致 */
    .article-tags-footer {
        padding: 0rem 2rem;  /* PC端左右 padding 2rem */
    }
    
    /* 独立区块的 PC 端 padding */
    .related-section,
    .share-section {
        padding: 2rem;
    }

    /* PC 端区域标题：标题和描述在一行左右对齐 */
    .section-header {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
    }

    .section-header h2 {
        font-size: 1.8rem;
    }

}

/* ==========================================
   新标签页样式 - 配套资料和相关推荐
   ========================================== */

/* 配套资料面板 */
.materials-panel {
    text-align: center;
}

.materials-panel .download-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1rem 2rem;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: #fff;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
    width: 100%;
}

.materials-panel .download-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
}

.materials-panel .download-btn i {
    font-size: 1.2rem;
}

/* 相关推荐列表（标签页内的） */
.tab-pane .related-articles {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.related-item {
    display: flex;
    align-items: center; /* 垂直居中对齐 */
    gap: 1rem;
    padding: 0.75rem;
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.related-item:hover {
    background: var(--bg-secondary);
    border-color: var(--primary-color);
    box-shadow: var(--shadow-small);
}

.related-cover {
    flex-shrink: 0;
    width: 80px;
    height: 45px;
    border-radius: 6px;
    overflow: hidden;
    background: var(--bg-tertiary);
}

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

.related-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center; /* 垂直居中 */
    min-width: 0;
}

.related-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.related-meta {
    display: flex;
    gap: 1rem;
    font-size: 0.75rem;
    color: var(--text-tertiary);
    margin: 0;
}

.related-meta span {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.related-meta i {
    font-size: 0.7rem;
}

/* 移动端适配 */
@media (max-width: 767px) {
    .tab-pane {
        padding: 0.5rem;
    }

    .materials-panel .download-btn {
        width: 100%;
        display: flex;
        justify-content: center;
        padding: 0.875rem 1.5rem;
    }

    .related-cover {
        width: 70px;
        height: 39px;
    }

    .related-title {
        font-size: 0.85rem;
    }
}

/* ==========================================
   底部固定Banner - 响应式设计
   ========================================== */
.bottom-fixed-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    background: var(--bg-primary);
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
    z-index: 9999;
    transform: translateY(0);
    transition: transform 0.3s ease-in-out;
}

.bottom-fixed-banner.hidden {
    transform: translateY(100%);
}

.bottom-banner-container {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.bottom-banner-link {
    display: block;
    width: 100%;
    line-height: 0;
}

.bottom-banner-image {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* 关闭按钮 */
.bottom-banner-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 32px;
    height: 32px;
    background: rgba(0, 0, 0, 0.6);
    color: var(--text-inverse);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    z-index: 10;
    backdrop-filter: blur(4px);
}

.bottom-banner-close:hover {
    background: rgba(0, 0, 0, 0.8);
    transform: scale(1.1);
}

.bottom-banner-close:active {
    transform: scale(0.95);
}

/* PC端样式优化 */
@media (min-width: 768px) {
    .bottom-banner-close {
        top: 12px;
        right: 12px;
        width: 36px;
        height: 36px;
        font-size: 1rem;
    }
}