/* ================================ */
/* AI生成内容统一样式 - 完整优化版 */
/* ================================ */

/* 基础容器设置 - 确保所有AI内容都有统一的外观 */
.ai-generated-content,
.ai-content-wrapper,
.ai-content,
.ai-content-section {
    /* 基础字体设置 */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif !important;
    font-size: 16px !important; /* 基础字体大小 */
    line-height: 1.8 !important;
    color: #2c3e50 !important;
    
    /* 容器设置 */
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    
    /* 文字渲染优化 */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* ===== 标题样式统一规范 ===== */

/* H1 - 主标题（文章标题） */
.ai-content-section h1,
.ai-generated-content h1 {
    font-size: 32px !important;
    font-weight: 700 !important;
    color: #1a202c !important;
    margin: 32px 0 24px 0 !important;
    padding: 0 0 16px 0 !important;
    border-bottom: 3px solid #667eea !important;
    line-height: 1.4 !important;
    letter-spacing: -0.5px !important;
}

/* H2 - 二级标题（主要章节） */
.ai-content-section h2,
.ai-generated-content h2 {
    font-size: 26px !important;
    font-weight: 600 !important;
    color: #2d3748 !important;
    margin: 36px 0 20px 0 !important;
    padding: 12px 0 12px 20px !important;
    border-left: 4px solid #667eea !important;
    background: linear-gradient(90deg, rgba(102, 126, 234, 0.08) 0%, transparent 50%) !important;
    line-height: 1.5 !important;
    letter-spacing: -0.3px !important;
}

/* H3 - 三级标题（子章节） */
.ai-content-section h3,
.ai-generated-content h3 {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #4a5568 !important;
    margin: 28px 0 16px 0 !important;
    padding: 0 !important; /* 移除左边距，因为不再有箭头图标 */
    position: relative !important;
    line-height: 1.5 !important;
    letter-spacing: -0.2px !important;
}

/* 移除h3的::before伪元素，不再显示箭头图标 */
/* .ai-content-section h3::before,
.ai-generated-content h3::before {
    content: '▸' !important;
    position: absolute !important;
    left: 0 !important;
    color: #667eea !important;
    font-size: 18px !important;
} */

/* H4 - 四级标题（小节） */
.ai-content-section h4,
.ai-generated-content h4 {
    font-size: 19px !important;
    font-weight: 600 !important;
    color: #4a5568 !important;
    margin: 24px 0 12px 0 !important;
    padding: 0 0 0 12px !important;
    border-left: 3px solid #cbd5e0 !important;
    line-height: 1.5 !important;
}

/* ===== 正文内容样式 ===== */

/* 段落 */
.ai-content-section p,
.ai-generated-content p {
    font-size: 16px !important;
    line-height: 1.85 !important;
    color: #4a5568 !important;
    margin: 0 0 20px 0 !important;
    text-align: justify !important;
    word-break: break-word !important;
    letter-spacing: 0.3px !important;
}

/* 强调文本 */
.ai-content-section strong,
.ai-generated-content strong,
.ai-content-section b,
.ai-generated-content b {
    font-weight: 600 !important;
    color: #2d3748 !important;
    font-size: inherit !important;
}

/* 斜体文本 */
.ai-content-section em,
.ai-generated-content em,
.ai-content-section i:not(.fa):not(.fas):not(.far),
.ai-generated-content i:not(.fa):not(.fas):not(.far) {
    font-style: italic !important;
    color: #667eea !important;
    font-size: inherit !important;
}

/* ===== 列表样式 ===== */

/* 无序列表 */
.ai-content-section ul,
.ai-generated-content ul {
    margin: 20px 0 !important;
    padding: 0 0 0 20px !important;
    list-style: none !important;
}

.ai-content-section ul li,
.ai-generated-content ul li {
    position: relative !important;
    font-size: 16px !important;
    line-height: 1.8 !important;
    color: #4a5568 !important;
    margin: 0 0 12px 0 !important;
    padding: 8px 0 8px 28px !important;
    background: linear-gradient(90deg, rgba(102, 126, 234, 0.04) 0%, transparent 100%) !important;
    border-radius: 6px !important;
    transition: all 0.3s ease !important;
}

.ai-content-section ul li::before,
.ai-generated-content ul li::before {
    content: '•' !important;
    position: absolute !important;
    left: 10px !important;
    top: 8px !important;
    color: #667eea !important;
    font-size: 18px !important;
    font-weight: bold !important;
}

.ai-content-section ul li:hover,
.ai-generated-content ul li:hover {
    background: linear-gradient(90deg, rgba(102, 126, 234, 0.08) 0%, transparent 100%) !important;
    transform: translateX(4px) !important;
}

/* 有序列表 */
.ai-content-section ol,
.ai-generated-content ol {
    margin: 20px 0 !important;
    padding: 0 0 0 20px !important;
    counter-reset: ol-counter !important;
    list-style: none !important;
}

.ai-content-section ol li,
.ai-generated-content ol li {
    position: relative !important;
    font-size: 16px !important;
    line-height: 1.8 !important;
    color: #4a5568 !important;
    margin: 0 0 12px 0 !important;
    padding: 8px 0 8px 36px !important;
    counter-increment: ol-counter !important;
    background: linear-gradient(90deg, rgba(118, 75, 162, 0.04) 0%, transparent 100%) !important;
    border-radius: 6px !important;
    transition: all 0.3s ease !important;
}

.ai-content-section ol li::before,
.ai-generated-content ol li::before {
    content: counter(ol-counter) !important;
    position: absolute !important;
    left: 10px !important;
    top: 8px !important;
    color: #764ba2 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    background: rgba(118, 75, 162, 0.15) !important;
    width: 22px !important;
    height: 22px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ===== 表格样式 ===== */

.ai-content-section table,
.ai-generated-content table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin: 24px 0 !important;
    background: #ffffff !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08) !important;
    font-size: 15px !important;
}

.ai-content-section th,
.ai-generated-content th {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: #ffffff !important;
    padding: 14px 16px !important;
    text-align: left !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    border: none !important;
    letter-spacing: 0.3px !important;
}

.ai-content-section td,
.ai-generated-content td {
    padding: 12px 16px !important;
    border-bottom: 1px solid #e2e8f0 !important;
    font-size: 15px !important;
    color: #4a5568 !important;
    line-height: 1.6 !important;
}

.ai-content-section tr:last-child td,
.ai-generated-content tr:last-child td {
    border-bottom: none !important;
}

.ai-content-section tr:nth-child(even) td,
.ai-generated-content tr:nth-child(even) td {
    background: rgba(102, 126, 234, 0.02) !important;
}

.ai-content-section tr:hover td,
.ai-generated-content tr:hover td {
    background: rgba(102, 126, 234, 0.05) !important;
}

/* ===== 引用块样式 ===== */

.ai-content-section blockquote,
.ai-generated-content blockquote {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%) !important;
    border-left: 4px solid #667eea !important;
    border-radius: 8px !important;
    padding: 20px 24px !important;
    margin: 24px 0 !important;
    position: relative !important;
}

.ai-content-section blockquote p,
.ai-generated-content blockquote p {
    margin: 0 !important;
    font-size: 16px !important;
    line-height: 1.7 !important;
    color: #4a5568 !important;
    font-style: italic !important;
}

/* ===== 代码样式 ===== */

/* 行内代码 */
.ai-content-section code,
.ai-generated-content code {
    background: #f1f5f9 !important;
    color: #e53e3e !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace !important;
    font-size: 14px !important;
    border: 1px solid #e2e8f0 !important;
}

/* 代码块 */
.ai-content-section pre,
.ai-generated-content pre {
    background: #1a202c !important;
    color: #e2e8f0 !important;
    padding: 20px !important;
    border-radius: 8px !important;
    overflow-x: auto !important;
    margin: 24px 0 !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
}

.ai-content-section pre code,
.ai-generated-content pre code {
    background: transparent !important;
    color: inherit !important;
    padding: 0 !important;
    border: none !important;
    font-size: 14px !important;
}

/* ===== 链接样式 ===== */

.ai-content-section a,
.ai-generated-content a {
    color: #667eea !important;
    text-decoration: none !important;
    border-bottom: 1px solid transparent !important;
    transition: all 0.3s ease !important;
    font-size: inherit !important;
}

.ai-content-section a:hover,
.ai-generated-content a:hover {
    color: #5a67d8 !important;
    border-bottom-color: #5a67d8 !important;
}

/* ===== 图片样式 ===== */

.ai-content-section img,
.ai-generated-content img {
    max-width: 100% !important;
    height: auto !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
    margin: 20px 0 !important;
    display: block !important;
}

/* ===== 水平分割线 ===== */

.ai-content-section hr,
.ai-generated-content hr {
    border: none !important;
    height: 2px !important;
    background: linear-gradient(90deg, transparent, #667eea, transparent) !important;
    margin: 32px 0 !important;
}

/* ===== 特殊内容区域 ===== */

/* 新版FAQ结构样式 - 使用ai-faq前缀的类 */
.ai-faq-section {
    margin: 40px 0 !important;
    padding: 30px !important;
    background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%) !important;
    border-radius: 16px !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06) !important;
}

.ai-faq-title {
    font-size: 24px !important;
    font-weight: 700 !important;
    color: #1a202c !important;
    margin: 0 0 28px 0 !important;
    padding: 0 0 16px 0 !important;
    border-bottom: 3px solid #667eea !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.ai-faq-icon {
    font-size: 28px !important;
    display: inline-block !important;
}

.ai-faq-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
}

.ai-faq-item {
    background: #ffffff !important;
    border-radius: 12px !important;
    border: 1px solid #e2e8f0 !important;
    padding: 20px !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

.ai-faq-item:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.15) !important;
    border-color: #667eea !important;
}

.ai-faq-q {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    margin-bottom: 16px !important;
    padding: 16px !important;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.08) 0%, rgba(118, 75, 162, 0.05) 100%) !important;
    border-radius: 10px !important;
    border-left: 3px solid #667eea !important;
}

.ai-faq-q-num {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 28px !important;
    height: 28px !important;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: #ffffff !important;
    border-radius: 50% !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    flex-shrink: 0 !important;
}

.ai-faq-q-text {
    font-size: 17px !important;
    font-weight: 600 !important;
    color: #2d3748 !important;
    line-height: 1.6 !important;
    flex: 1 !important;
}

.ai-faq-a {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    padding: 16px !important;
    background: rgba(245, 247, 250, 0.6) !important;
    border-radius: 10px !important;
    border-left: 3px solid #764ba2 !important;
}

.ai-faq-a-label {
    color: #764ba2 !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    flex-shrink: 0 !important;
    min-width: 32px !important;
}

.ai-faq-a-text {
    font-size: 16px !important;
    line-height: 1.8 !important;
    color: #4a5568 !important;
    flex: 1 !important;
}

/* 兼容旧版FAQ结构 */
.ai-content-section .faq-section,
.ai-generated-content .faq-section,
.ai-content-section .qa-section,
.ai-generated-content .qa-section {
    margin: 32px 0 !important;
    padding: 24px !important;
    background: #f8fafc !important;
    border-radius: 12px !important;
    border: 1px solid #e2e8f0 !important;
}

.ai-content-section .faq-title,
.ai-generated-content .faq-title {
    font-size: 20px !important;
    font-weight: 600 !important;
    color: #1a202c !important;
    margin: 0 0 20px 0 !important;
    padding: 0 0 12px 0 !important;
    border-bottom: 2px solid #667eea !important;
}

.ai-content-section .faq-item,
.ai-generated-content .faq-item {
    margin: 16px 0 !important;
    padding: 16px !important;
    background: #ffffff !important;
    border-radius: 8px !important;
    border: 1px solid #e2e8f0 !important;
}

.ai-content-section .faq-question,
.ai-generated-content .faq-question {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #2d3748 !important;
    margin: 0 0 12px 0 !important;
    padding: 16px 20px 16px 45px !important;
    position: relative !important;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.08) 0%, rgba(118, 75, 162, 0.08) 100%) !important;
    border-radius: 8px !important;
    border-left: 3px solid #667eea !important;
}

.ai-content-section .faq-question::before,
.ai-generated-content .faq-question::before {
    content: 'Q' !important;
    position: absolute !important;
    left: 15px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #667eea !important;
    font-weight: 700 !important;
    font-size: 18px !important;
    width: 24px !important;
    height: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(102, 126, 234, 0.15) !important;
    border-radius: 50% !important;
}

/* FAQ答案样式 - 最高优先级，确保始终显示 */
.ai-content-section .faq-answer,
.ai-generated-content .faq-answer,
.ai-content-wrapper .faq-answer,
.content-wrapper.ai-content-section .faq-answer,
.ai-content-wrapper.ai-content-section .faq-answer,
.faq-answer {
    display: block !important; /* 强制显示，覆盖所有其他样式 */
    opacity: 1 !important; /* 确保透明度为1 */
    visibility: visible !important; /* 确保可见性 */
    font-size: 15px !important;
    line-height: 1.8 !important;
    color: #4a5568 !important;
    padding: 16px 20px 16px 45px !important;
    position: relative !important;
    margin-bottom: 24px !important;
    background: rgba(245, 247, 250, 0.8) !important;
    border-radius: 8px !important;
    border-left: 3px solid #764ba2 !important;
    border-top: none !important; /* 移除article-detail.css的边框 */
    animation: none !important; /* 移除动画效果 */
    /* 覆盖JavaScript可能设置的样式 */
    max-height: none !important;
    overflow: visible !important;
    transition: none !important;
}

.ai-content-section .faq-answer::before,
.ai-generated-content .faq-answer::before {
    content: 'A' !important;
    position: absolute !important;
    left: 15px !important;
    top: 20px !important;
    color: #764ba2 !important;
    font-weight: 700 !important;
    font-size: 18px !important;
    width: 24px !important;
    height: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(118, 75, 162, 0.15) !important;
    border-radius: 50% !important;
}

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

@media (max-width: 768px) {
    /* FAQ响应式调整 */
    .ai-faq-section {
        padding: 20px !important;
        margin: 30px 0 !important;
    }
    
    .ai-faq-title {
        font-size: 20px !important;
    }
    
    .ai-faq-item {
        padding: 16px !important;
    }
    
    .ai-faq-q,
    .ai-faq-a {
        padding: 12px !important;
    }
    
    .ai-faq-q-text {
        font-size: 16px !important;
    }
    
    .ai-faq-a-text {
        font-size: 15px !important;
    }
    
    /* 标题字体调整 */
    .ai-content-section h1,
    .ai-generated-content h1 {
        font-size: 26px !important;
    }
    
    .ai-content-section h2,
    .ai-generated-content h2 {
        font-size: 22px !important;
    }
    
    .ai-content-section h3,
    .ai-generated-content h3 {
        font-size: 19px !important;
    }
    
    .ai-content-section h4,
    .ai-generated-content h4 {
        font-size: 17px !important;
    }
    
    /* 正文字体调整 */
    .ai-content-section p,
    .ai-generated-content p,
    .ai-content-section li,
    .ai-generated-content li {
        font-size: 15px !important;
    }
    
    /* 表格字体调整 */
    .ai-content-section table,
    .ai-generated-content table,
    .ai-content-section th,
    .ai-generated-content th,
    .ai-content-section td,
    .ai-generated-content td {
        font-size: 14px !important;
    }
    
    /* 表格内边距调整 */
    .ai-content-section th,
    .ai-generated-content th,
    .ai-content-section td,
    .ai-generated-content td {
        padding: 10px 12px !important;
    }
}

@media (max-width: 480px) {
    /* 标题字体进一步调整 */
    .ai-content-section h1,
    .ai-generated-content h1 {
        font-size: 22px !important;
    }
    
    .ai-content-section h2,
    .ai-generated-content h2 {
        font-size: 19px !important;
    }
    
    .ai-content-section h3,
    .ai-generated-content h3 {
        font-size: 17px !important;
    }
    
    .ai-content-section h4,
    .ai-generated-content h4 {
        font-size: 16px !important;
    }
    
    /* 正文字体调整 */
    .ai-content-section p,
    .ai-generated-content p,
    .ai-content-section li,
    .ai-generated-content li {
        font-size: 14px !important;
    }
    
    /* 表格字体调整 */
    .ai-content-section table,
    .ai-generated-content table,
    .ai-content-section th,
    .ai-generated-content th,
    .ai-content-section td,
    .ai-generated-content td {
        font-size: 13px !important;
    }
}

/* ===== 打印样式 ===== */

@media print {
    .ai-content-section,
    .ai-generated-content {
        font-size: 12pt !important;
    }
    
    .ai-content-section h1,
    .ai-generated-content h1 {
        font-size: 18pt !important;
    }
    
    .ai-content-section h2,
    .ai-generated-content h2 {
        font-size: 16pt !important;
    }
    
    .ai-content-section h3,
    .ai-generated-content h3 {
        font-size: 14pt !important;
    }
    
    .ai-content-section p,
    .ai-generated-content p,
    .ai-content-section li,
    .ai-generated-content li {
        font-size: 11pt !important;
    }
}

/* ===== 全局覆盖规则（确保最高优先级） ===== */

/* 防止其他样式干扰 */
.ai-content-section *,
.ai-generated-content * {
    box-sizing: border-box !important;
}

/* 确保字体大小不被覆盖 */
.ai-content-section,
.ai-generated-content,
.ai-content-section *:not(h1):not(h2):not(h3):not(h4):not(th):not(code):not(pre),
.ai-generated-content *:not(h1):not(h2):not(h3):not(h4):not(th):not(code):not(pre) {
    font-size: inherit !important;
}

/* 移除可能的外部边距 */
.ai-content-section > *:first-child,
.ai-generated-content > *:first-child {
    margin-top: 0 !important;
}

.ai-content-section > *:last-child,
.ai-generated-content > *:last-child {
    margin-bottom: 0 !important;
}

/* ===== FAQ全局覆盖规则 ===== */
/* 确保所有FAQ答案都显示，无论其他样式如何设置 */
.faq-answer,
.ai-content-section .faq-answer,
.ai-generated-content .faq-answer,
.ai-content-wrapper .faq-answer,
.content-wrapper .faq-answer,
.content-wrapper.ai-content-section .faq-answer,
.ai-content-wrapper.ai-content-section .faq-answer {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    max-height: none !important;
    overflow: visible !important;
    transition: none !important;
    animation: none !important;
}

/* 覆盖可能的JavaScript样式设置 */
.faq-answer[style*="display: none"],
.ai-content-section .faq-answer[style*="display: none"],
.ai-generated-content .faq-answer[style*="display: none"] {
    display: block !important;
}

.faq-answer[style*="opacity: 0"],
.ai-content-section .faq-answer[style*="opacity: 0"],
.ai-generated-content .faq-answer[style*="opacity: 0"] {
    opacity: 1 !important;
}

.faq-answer[style*="visibility: hidden"],
.ai-content-section .faq-answer[style*="visibility: hidden"],
.ai-generated-content .faq-answer[style*="visibility: hidden"] {
    visibility: visible !important;
}

/* ===== 动画效果（可选） ===== */

.ai-content-section,
.ai-generated-content {
    animation: fadeIn 0.5s ease-in;
}

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

/* ===== 深色模式支持（可选） ===== */

@media (prefers-color-scheme: dark) {
    .ai-content-section,
    .ai-generated-content {
        /* 可以根据需要添加深色模式样式 */
    }
}

/* 最新教程文章样式 - 与AI新闻页面保持一致 */
.latest-tutorials-widget .widget-content {
    padding: 0;
}

.latest-tutorial-item {
    padding: 15px 20px;
    border-bottom: 1px solid #f0f0f0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    min-height: 55px;
}

.latest-tutorial-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.latest-tutorial-item:first-child {
    margin-top: 0;
}

.latest-tutorial-item:hover {
    background: linear-gradient(90deg, #f8f9fa 0%, #e9ecef 100%);
    transform: translateX(5px);
    border-left: 3px solid #007cba;
    padding-left: 17px;
    box-shadow: 0 2px 8px rgba(0,123,186,0.1);
}

.latest-tutorial-item a {
    color: #333;
    text-decoration: none;
    font-weight: 500;
    line-height: 1.4;
    flex: 1;
    margin-right: 10px;
    font-size: 14px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.latest-tutorial-item a:hover {
    color: #007cba;
}

.tutorial-date {
    font-size: 12px;
    color: #888;
    font-weight: 400;
    white-space: nowrap;
    background: #f8f9fa;
    padding: 5px 10px;
    border-radius: 12px;
    border: 1px solid #e9ecef;
    flex-shrink: 0;
}

/* 最新教程动画效果 */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.latest-tutorial-item {
    animation: fadeInUp 0.5s ease-out;
}

.latest-tutorial-item:nth-child(1) { animation-delay: 0.1s; }
.latest-tutorial-item:nth-child(2) { animation-delay: 0.2s; }
.latest-tutorial-item:nth-child(3) { animation-delay: 0.3s; }
.latest-tutorial-item:nth-child(4) { animation-delay: 0.4s; }
.latest-tutorial-item:nth-child(5) { animation-delay: 0.5s; }
.latest-tutorial-item:nth-child(6) { animation-delay: 0.6s; }
.latest-tutorial-item:nth-child(7) { animation-delay: 0.7s; }
.latest-tutorial-item:nth-child(8) { animation-delay: 0.8s; }

/* 响应式设计 */
@media (max-width: 768px) {
    .latest-tutorial-item {
        padding: 12px 15px;
        min-height: 50px;
    }
    
    .latest-tutorial-item a {
        font-size: 13px;
        -webkit-line-clamp: 2;
    }
    
    .tutorial-date {
        padding: 4px 8px;
        font-size: 11px;
    }
}