/* ========================================
   农技服务中心 - 页面样式与响应式布局
======================================== */

/* 列表页面导航 */
.unified-header {
    background: rgba(255, 255, 255, 1);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.brand-title {
    color: #1a1a1a;
}
.brand-subtitle {
    color: #888888;
}
.nav-item > a {
    color: #1a1a1a;
}
/* 页面容器 */
.nsfw-service-container {
    width: 100%;
    background: #fafafa;
    min-height: 100vh;
    padding-top: 80px;
}

/* ========================================
   页面头部
======================================== */
.service-hero {
    position: relative;
    height: 400px;
    overflow: hidden;
}

.service-hero-bg {
    position: absolute;
    inset: 0;
}

.service-hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.service-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0,153,68,0.75) 0%, rgba(0,122,53,0.85) 100%);
}

.service-hero-content {
    position: relative;
    z-index: 10;
    max-width: 1440px;
    margin: 0 auto;
    padding: 60px 40px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #fff;
}

/* 面包屑导航 */
.service-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
    font-size: 14px;
}

.service-breadcrumb a {
    color: rgba(255,255,255,0.8);
    text-decoration: none;
    transition: color 0.3s;
}

.service-breadcrumb a:hover {
    color: #fff;
}

.service-breadcrumb span {
    color: rgba(255,255,255,0.5);
}

.service-breadcrumb .current {
    color: #fff;
}

.service-hero-title {
    font-size: 48px;
    font-weight: bold;
    margin-bottom: 16px;
    letter-spacing: 2px;
}

.service-hero-subtitle {
    font-size: 18px;
    opacity: 0.9;
    margin-bottom: 30px;
    max-width: 600px;
}

/* 迷你统计 */
.service-stats-mini {
    display: flex;
    gap: 40px;
}

.stat-item {
    text-align: center;
}

.stat-number {
    display: block;
    font-size: 32px;
    font-weight: bold;
    color: #fff;
}

.stat-label {
    font-size: 13px;
    opacity: 0.8;
}

/* ========================================
   服务导航
======================================== */
.service-nav-section {
    position: relative;
    height: auto;
    /*position: sticky;
    top: 95px;
    z-index: 1;*/
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.service-nav-container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 30px;
}

.service-nav-list {
    display: flex;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.service-nav-item {
    margin: 10px 0;
    padding: 10px 24px;
    color: #666;
    text-decoration: none;
    font-size: 15px;
    transition: all 0.3s;
    display: block;
    background-color: #ffffff;
    border-radius: 9999px;
    border: 1px solid #f5f5f5;
}

.service-nav-item:hover,
.service-nav-item.active {
    color: #ffffff;
    background-color: #009944;

}

/* ========================================
   服务区域
======================================== */
.service-section {
    padding: 100px 0 60px 0;
}

.service-section.alt-bg {
    background: #fff;
}

.service-section-container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 40px;
}

.section-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 40px;
}

.section-icon {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, #009944 0%, #00c853 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    color: #fff;
    flex-shrink: 0;
}

.section-info {
    flex: 1;
}

.section-title {
    font-size: 32px;
    font-weight: bold;
    color: #1a1a1a;
    margin-bottom: 8px;
}

.section-desc {
    font-size: 16px;
    color: #666;
}

/* 内容网格 */
.service-content-grid {
    display: flex;
    gap: 30px;
    align-items: center;
}

.service-content-grid .service-main-content {
    flex: 1;
    min-width: 0;
}

.service-content-grid .service-sidebar {
    width: 380px;
    flex-shrink: 0;
}

/* 反向布局：侧边栏在左边 */
.service-content-grid.reverse {
    flex-direction: row-reverse;
}

.service-main-content {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.service-main-content.full-width {
    width: 100%;
}

/* ========================================
   服务详情卡片
======================================== */
.service-detail-card {
    background: #fff;
    border-radius: 16px;
    padding: 32px;
    border: 1px solid #e8f5e9;
}

.service-detail-card h3 {
    font-size: 20px;
    color: #1a1a1a;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid #e8f5e9;
}

.service-detail-card > p {
    font-size: 15px;
    color: #666;
    line-height: 1.8;
    margin-bottom: 24px;
}

/* 特色功能网格 */
.service-features-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}



.feature-item {
    display: flex;
    gap: 16px;
    padding: 16px;
    background: #f8fffb;
    border-radius: 12px;
    transition: all 0.3s;
    align-items: center;
}

.feature-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,153,68,0.1);
}

.feature-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #009944 0%, #00c853 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #fff;
    flex-shrink: 0;
}

.feature-text h4 {
    font-size: 15px;
    color: #1a1a1a;
    margin-bottom: 4px;
}

.feature-text p {
    font-size: 13px;
    color: #666;
}

/* ========================================
   侧边栏卡片
======================================== */
.service-sidebar {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.sidebar-card {
    background: #fff;
    border-radius: 16px;
    padding: 24px;
    border: 1px solid #e8f5e9;
}

.sidebar-card h3 {
    font-size: 17px;
    color: #1a1a1a;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.sidebar-card h3 i {
    color: #009944;
}

/* 服务流程 */
.process-steps {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.process-step {
    display: flex;
    align-items: center;
    gap: 12px;
}

.step-number {
    width: 28px;
    height: 28px;
    background: linear-gradient(135deg, #009944 0%, #00c853 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: bold;
    color: #fff;
    flex-shrink: 0;
}

.step-content h4 {
    font-size: 14px;
    color: #1a1a1a;
    margin-bottom: 2px;
}

.step-content p {
    font-size: 12px;
    color: #999;
}

/* 联系卡片 */
.contact-card {
    background: linear-gradient(135deg, #009944 0%, #00c853 100%);
    color: #fff;
}

.contact-card h3 {
    color: #fff;
}

.contact-card h3 i {
    color: #fff;
}

.contact-desc {
    font-size: 14px;
    opacity: 0.9;
    margin-bottom: 16px;
}

.contact-phone {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 16px;
}

.contact-btn {
    width: 100%;
    padding: 12px;
    background: #fff;
    color: #009944;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s;
}

.contact-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

/* ========================================
   成功案例
======================================== */
.service-case-card {
    background: #fff;
    border-radius: 16px;
    padding: 32px;
    border: 1px solid #e8f5e9;
}

.service-case-card h3 {
    font-size: 20px;
    color: #1a1a1a;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.service-case-card h3 i {
    color: #f5a623;
}

.case-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.case-item {
    display: flex;
    gap: 20px;
    padding: 20px;
    background: #f8fffb;
    border-radius: 12px;
    transition: all 0.3s;
}

.case-item:hover {
    transform: translateX(4px);
    box-shadow: 0 4px 16px rgba(0,153,68,0.1);
}

.case-image {
    width: 140px;
    height: 100px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
}

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

.case-info h4 {
    font-size: 15px;
    color: #1a1a1a;
    margin-bottom: 8px;
}

.case-info p {
    font-size: 13px;
    color: #666;
    line-height: 1.6;
    margin-bottom: 10px;
}

.case-tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.case-tags span {
    padding: 4px 10px;
    background: #e8f5e9;
    color: #009944;
    border-radius: 4px;
    font-size: 12px;
}

/* ========================================
   专家团队
======================================== */
.expert-team-card {
    background: #fff;
    border-radius: 16px;
    padding: 32px;
    border: 1px solid #e8f5e9;
}

.expert-team-card h3 {
    font-size: 20px;
    color: #1a1a1a;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.expert-team-card h3 i {
    color: #009944;
}

.expert-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.expert-item {
    text-align: center;
    padding: 20px;
    background: #f8fffb;
    border-radius: 12px;
}

/* ========================================
   服务项目列表
======================================== */
.service-item-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.service-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: #f8fffb;
    border-radius: 8px;
}

.item-icon {
    width: 32px;
    height: 32px;
    background: #e8f5e9;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #009944;
    flex-shrink: 0;
}

.item-text h4 {
    font-size: 14px;
    color: #1a1a1a;
    margin-bottom: 2px;
}

.item-text p {
    font-size: 12px;
    color: #666;
}

/* ========================================
   微信咨询
======================================== */
.wechat-service {
    text-align: center;
}

.wechat-qr {
    width: 120px;
    height: 120px;
    margin: 0 auto 12px;
    padding: 8px;
    background: #fff;
    border: 1px solid #e8f5e9;
    border-radius: 8px;
}

.wechat-qr img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.wechat-tip {
    font-size: 13px;
    color: #666;
}

/* ========================================
   AI识别区域
======================================== */
.ai-feature-section {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid #e8f5e9;
}

.ai-feature-section h3 {
    font-size: 18px;
    color: #1a1a1a;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ai-feature-section h3 i {
    color: #009944;
}

.ai-demo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.ai-upload-area {
    padding: 40px 20px;
    background: linear-gradient(135deg, #f8fffb 0%, #e8f5e9 100%);
    border: 2px dashed #b2dfdb;
    border-radius: 12px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s;
}

.ai-upload-area:hover {
    border-color: #009944;
    background: #e8f5e9;
}

.ai-upload-area i {
    font-size: 48px;
    color: #009944;
    margin-bottom: 12px;
}

.ai-upload-area p {
    font-size: 15px;
    color: #1a1a1a;
    margin-bottom: 4px;
}

.ai-upload-area span {
    font-size: 12px;
    color: #666;
}

.ai-result {
    padding: 20px;
    background: #fff;
    border: 1px solid #e8f5e9;
    border-radius: 12px;
}

.result-placeholder {
    height: 100%;
    min-height: 140px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #999;
}

.result-placeholder i {
    font-size: 40px;
    margin-bottom: 8px;
}

/* ========================================
   病虫害图谱
======================================== */
.common-pest-card {
    background: #fff;
    border-radius: 16px;
    padding: 32px;
    border: 1px solid #e8f5e9;
}

.common-pest-card h3 {
    font-size: 20px;
    color: #1a1a1a;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.common-pest-card h3 i {
    color: #009944;
}

.pest-gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.pest-item {
    background: #f8fffb;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s;
    cursor: pointer;
}

.pest-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0,153,68,0.15);
}

.pest-image {
    height: 100px;
    overflow: hidden;
}

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

.pest-info {
    padding: 12px;
    text-align: center;
}

.pest-info h4 {
    font-size: 14px;
    color: #1a1a1a;
    margin-bottom: 4px;
}

.pest-info p {
    font-size: 12px;
    color: #666;
}

/* ========================================
   绿色防控卡片
======================================== */
.green-card {
    background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
}

.green-desc {
    font-size: 14px;
    color: #1a1a1a;
    margin-bottom: 20px;
    line-height: 1.6;
}

.green-methods {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.green-method {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px;
    background: #fff;
    border-radius: 8px;
}

.green-method i {
    font-size: 24px;
    color: #009944;
}

.green-method span {
    font-size: 13px;
    color: #1a1a1a;
}

/* ========================================
   紧急求助卡片
======================================== */
.emergency-contact {
    margin-bottom: 16px;
}

.emergency-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.emergency-item > i {
    width: 48px;
    height: 48px;
    background: #ff4d4f;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 20px;
}

.emergency-item .label {
    display: block;
    font-size: 12px;
    color: #666;
}

.emergency-item .phone {
    display: block;
    font-size: 18px;
    font-weight: bold;
    color: #1a1a1a;
}

.emergency-btn {
    width: 100%;
    padding: 12px;
    background: #ff4d4f;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s;
}

.emergency-btn:hover {
    background: #ff7875;
    transform: translateY(-2px);
}

/* ========================================
   视频区域
======================================== */
.video-category-tabs {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.video-tab {
    padding: 10px 20px;
    border: 1px solid #e0e0e0;
    background: #fff;
    border-radius: 20px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s;
}

.video-tab:hover,
.video-tab.active {
    background: #009944;
    color: #fff;
    border-color: #009944;
}

.video-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.video-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #e8f5e9;
    transition: all 0.3s;
    cursor: pointer;
}

.video-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0,153,68,0.15);
}

.video-card.large {
    grid-column: span 1;
}

.video-thumbnail {
    position: relative;
    height: 180px;
    overflow: hidden;
}

.video-card.large .video-thumbnail {
    height: 220px;
}

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

.video-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}

.video-card:hover .video-overlay {
    background: rgba(0,0,0,0.4);
}

.play-btn {
    width: 56px;
    height: 56px;
    background: rgba(255,255,255,0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #009944;
    transition: all 0.3s;
}

.video-card:hover .play-btn {
    transform: scale(1.1);
    background: #fff;
}

.video-duration {
    position: absolute;
    bottom: 10px;
    right: 10px;
    padding: 4px 8px;
    background: rgba(0,0,0,0.7);
    color: #fff;
    border-radius: 4px;
    font-size: 12px;
}

.video-tag {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 4px 10px;
    background: #ff7800;
    color: #fff;
    border-radius: 4px;
    font-size: 12px;
}

.video-tag.new {
    background: #009944;
}

.video-info {
    padding: 16px;
}

.video-info h3 {
    font-size: 15px;
    color: #1a1a1a;
    line-height: 1.4;
    margin-bottom: 12px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.video-card.large .video-info h3 {
    font-size: 18px;
}

.video-meta {
    display: flex;
    gap: 16px;
    font-size: 12px;
    color: #999;
}

.video-meta span {
    display: flex;
    align-items: center;
    gap: 4px;
}

.load-more {
    text-align: center;
    margin-top: 40px;
}

.load-more-btn {
    padding: 14px 40px;
    border: 1px solid #009944;
    background: #fff;
    color: #009944;
    border-radius: 24px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.load-more-btn:hover {
    background: #009944;
    color: #fff;
}

.load-more-btn .rotating {
    animation: rotate 1s linear infinite;
}

@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ========================================
   服务优势
======================================== */
.service-advantages {
    background: linear-gradient(135deg, #009944 0%, #00c853 100%);
    padding: 80px 0;
    color: #fff;
}

.advantages-header {
    text-align: center;
    margin-bottom: 50px;
}

.advantages-header h2 {
    font-size: 32px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.advantages-header p {
    font-size: 16px;
    opacity: 0.9;
}

.advantages-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

.advantage-item {
    text-align: center;
    padding: 30px 20px;
    background: rgba(255,255,255,0.1);
    border-radius: 16px;
    backdrop-filter: blur(10px);
    transition: all 0.3s;
}

.advantage-item:hover {
    transform: translateY(-8px);
    background: rgba(255,255,255,0.2);
}

.advantage-icon {
    width: 70px;
    height: 70px;
    background: rgba(255,255,255,0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    margin: 0 auto 20px;
}

.advantage-item h3 {
    font-size: 20px;
    margin-bottom: 12px;
}

.advantage-item p {
    font-size: 14px;
    opacity: 0.9;
    line-height: 1.6;
}

/* ========================================
   底部CTA
======================================== */
.service-cta {
    padding: 80px 0;
    background: #f8fffb;
    text-align: center;
}

.cta-content h2 {
    font-size: 32px;
    color: #1a1a1a;
    margin-bottom: 12px;
}

.cta-content p {
    font-size: 16px;
    color: #666;
    margin-bottom: 30px;
}

.cta-buttons {
    display: flex;
    justify-content: center;
    gap: 16px;
}

.cta-btn {
    padding: 14px 32px;
    border-radius: 28px;
    font-size: 15px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s;
}

.cta-btn.primary {
    background: linear-gradient(135deg, #009944 0%, #00c853 100%);
    color: #fff;
}

.cta-btn.primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,153,68,0.3);
}

.cta-btn.secondary {
    background: #fff;
    color: #009944;
    border: 1px solid #009944;
}

.cta-btn.secondary:hover {
    background: #e8f5e9;
}

/* ========================================
   响应式布局 - 1200px以下
======================================== */
@media (max-width: 1200px) {
    .service-hero {
        height: 350px;
    }

    .service-hero-title {
        font-size: 40px;
    }

    .service-hero-content {
        padding: 50px 30px;
    }

    .service-nav-container {
        padding: 0 30px;
    }

    .service-section-container {
        padding: 0 30px;
    }

    .service-content-grid .service-sidebar {
        width: 340px;
    }

    .advantages-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ========================================
   内容工具栏
======================================== */
.content-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    margin-bottom: 10px;
    flex-wrap: wrap;
    gap: 10px;
}

.result-count {
    font-size: 14px;
    color: #666;
}

.sort-options {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sort-label {
    font-size: 14px;
    color: #999;
}

.sort-item {
    font-size: 14px;
    color: #666;
    text-decoration: none;
    transition: color 0.3s;
}

.sort-item:hover {
    color: #009944;
}

.sort-item.active {
    color: #009944;
    font-weight: 500;
}

.sort-separator {
    color: #ddd;
}

.nsfw-page-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 10px;
}

.nsfw-page-title h3 {
    padding: 0;
    margin: 20px 0 5px 0;
    font-size: 28px;
    color: #1a1a1a;
}
.nsfw-page-title > span {
    color: #888888;
}

/* 搜索框 */
.search-box {
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid #e8f5e9;
    border-radius: 10px;
    overflow: hidden;
    transition: all 0.3s;

}

.search-box:focus-within {
    border-color: #009944;
    box-shadow: 0 0 0 3px rgba(0,153,68,0.1);
}

.search-page-input {
    width: 400px;
    padding: 8px 16px;
    border: none;
    outline: none;
    font-size: 13px;
    color: #333;
    background: transparent;
    height: 56px;
}

.search-input::placeholder {
    color: #999;
}

.search-page-btn {
    padding: 8px 24px;
    border: none;
    background: linear-gradient(135deg, #009944 0%, #00c853 100%);
    color: #fff;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 44px;
}

.search-page-btn:hover {
    background: linear-gradient(135deg, #007a35 0%, #009944 100%);
}

.search-page-btn i {
    font-size: 16px;
}

/* ========================================
   主内容区域布局
======================================== */
.main-content-wrapper {
    max-width: 1440px;
    margin: 0 auto;
    padding: 10px 20px;
    display: flex;
    gap: 30px;
}

.content-left {
    flex: 1;
    min-width: 0;
}

.content-right {
    width: 380px;
    flex-shrink: 0;
    padding-top: 20px;
}

/* ========================================
   大选项卡导航
======================================== */
.tab-navigation {
    padding: 16px 10px;
    margin-bottom: 20px;
    border-bottom: 1px solid #f0f0f0;
}

.tab-nav-container {
    display: flex;
    gap: 12px;
}

.tab-nav-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 20px;
    background: #ffffff;
    border: 1px solid #e8f5e9;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.3s;
    font-size: 15px;
    color: #666;
}

.tab-nav-btn i {
    font-size: 20px;
}

.tab-nav-btn:hover {
    background: #e8f5e9;
    border-color: #009944;
}

.tab-nav-btn.active {
    background: linear-gradient(135deg, #009944 0%, #00c853 100%);
    color: #fff;
    border-color: transparent;
}

.tab-nav-btn.active i {
    color: #fff;
}

/* ========================================
   选项卡内容区
======================================== */
.tab-content {
    display: none;
}

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

/* 小分类选项卡 */
.sub-category-tabs {
    display: flex;
    gap: 12px;
    margin-bottom: 10px;
    padding: 8px 16px;
    border-radius: 12px;
    /*background: #fff;
    border: 1px solid #e8f5e9;*/
}

.sub-tab-btn {
    padding: 8px 20px;
    background: transparent;
    border: 1px solid #e0e0e0;
    border-radius: 20px;
    cursor: pointer;
    font-size: 14px;
    color: #666;
    transition: all 0.3s;
}

.sub-tab-btn:hover {
    border-color: #009944;
    color: #009944;
}

.sub-tab-btn.active {
    background: #009944;
    color: #fff;
    border-color: #009944;
}

/* 子内容区 */
.sub-content {
    display: none;
}

.sub-content.active {
    display: block;
}

/* 两列卡片网格 */
.content-grid-2col {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

/* 内容卡片 */
.content-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #e8f5e9;
    transition: all 0.3s;
}

.content-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0,153,68,0.15);
}

.card-image {
    position: relative;
    height: 12rem;
    overflow: hidden;
}

.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.content-card:hover .card-image img {
    transform: scale(1.05);
}

.card-tag {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 4px 12px;
    background: rgba(220,252,231,0.9);
    color: #009944;
    border-radius: 999px;
    font-size: 12px;
}

.card-tag.orange {
    background-color: rgba(254,243,199,0.9);
    color: #ff7800;
}

.card-tag.hot {
    background-color: rgba(239,68,68,0.9);
    color: #ffffff;
    padding: 4px 8px;
    gap: 2px;
}

.card-tag.top-right {
    top: 12px;
    right: 12px;
    left: auto;
}

.card-tag.recommend {
    background-color: rgba(219,234,254,0.9);
    color: #1890ff;
}

.card-body {
    padding: 15px 20px;
}

.card-title {
    font-size: 16px;
    color: #1a1a1a;
    margin-bottom: 10px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card-desc {
    font-size: 13px;
    color: #666;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ========================================
   右侧固定栏
======================================== */
.right-sidebar-card {
    background: #fff;
    border-radius: 16px;
    padding: 10px 24px;
    border: 1px solid #e8f5e9;
    margin-bottom: 24px;
}

.sidebar-card-title {
    font-size: 16px;
    color: #1a1a1a;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e8f5e9;
}

.sidebar-card-title i {
    color: #009944;
    font-size: 20px;
}

/* 通知公告 */
.notice-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.notice-li {
    background-color: #ef4444;
    border-radius: 999px;
    width: 6px;
    height: 6px;
    margin-top: 6px;
}
.notice-item {
    text-decoration: none;
    padding: 12px;
    background: #fafafa;
    border-radius: 8px;
    transition: all 0.3s;
}

.notice-item:hover {
    background: #e8f5e9;
    transform: translateX(4px);
}

.notice-date {
    display: block;
    font-size: 12px;
    color: #999;
    margin-bottom: 4px;
}

.notice-text {
    font-size: 13px;
    color: #333;
    line-height: 1.5;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.more-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #e8f5e9;
    color: #009944;
    font-size: 13px;
    text-decoration: none;
    transition: color 0.3s;
}

.more-link:hover {
    color: #007a35;
}

/* 专家团队 */
.expert-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.expert-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: #fafafa;
    border-radius: 8px;
}

.expert-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    border: 2px solid #e8f5e9;
}

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

.expert-info {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.expert-info h4 {
    font-size: 14px;
    color: #1a1a1a;
    margin: 0;
    white-space: nowrap;
}

.expert-info p {
    font-size: 12px;
    color: #009944;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 咨询窗口 */
.consult-card {
    background: linear-gradient(135deg, #009944 0%, #00c853 100%);
    color: #fff;
}

.consult-card .sidebar-card-title {
    color: #fff;
    border-bottom-color: rgba(255,255,255,0.2);
}

.consult-card .sidebar-card-title i {
    color: #fff;
}

.consult-desc {
    font-size: 14px;
    opacity: 0.9;
    margin-bottom: 16px;
    text-align: center;
}

.consult-phone {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 20px;
}

.consult-wechat {
    text-align: center;
    margin-bottom: 20px;
}

.wechat-qr-box {
    width: 100px;
    height: 100px;
    margin: 0 auto 10px;
    padding: 8px;
    background: #fff;
    border-radius: 8px;
}

.wechat-qr-box img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.wechat-tip {
    font-size: 12px;
    opacity: 0.9;
    margin: 0;
}

.consult-btn {
    width: 100%;
    padding: 12px;
    background: #fff;
    color: #009944;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s;
}

.consult-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.item-right {
    margin-left: auto;
}



/* ========================================
   分页组件样式
======================================== */
.pagination-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 24px;
    padding: 16px 0;
    flex-wrap: wrap;
}

.pagination-info {
    font-size: 14px;
    color: #666;
}

.pagination-info .page-start,
.pagination-info .page-end,
.pagination-info .page-total {
    color: #009944;
    font-weight: 500;
}

.pagination {
    display: flex;
    align-items: center;
    gap: 4px;
}

.page-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid #e8f5e9;
    background: #fff;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s;
    color: #666;
    font-size: 18px;
}

.page-btn:hover:not(.disabled) {
    background: #009944;
    border-color: #009944;
    color: #fff;
}

.page-btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.page-numbers {
    display: flex;
    gap: 4px;
}

.page-num {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 8px;
    border: 1px solid #e8f5e9;
    background: #fff;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s;
    font-size: 14px;
    color: #666;
}

.page-num:hover {
    border-color: #009944;
    color: #009944;
}

.page-num.active {
    background: linear-gradient(135deg, #009944 0%, #00c853 100%);
    border-color: #009944;
    color: #fff;
    font-weight: 500;
}

.pagination-select {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #666;
}

.page-size-select {
    padding: 6px 10px;
    border: 1px solid #e8f5e9;
    border-radius: 6px;
    font-size: 14px;
    color: #666;
    background: #fff;
    cursor: pointer;
    outline: none;
    transition: all 0.3s;
}

.page-size-select:hover,
.page-size-select:focus {
    border-color: #009944;
}

.pagination-wrapper.hidden {
    display: none;
}
/* ========================================
   农技服务详情页 - 页面样式
======================================== */

.nsfw-service-detail-container {
    width: 100%;
    background: #fafafa;
    min-height: 100vh;
    padding-top: 80px;
}

.breadcrumb-current {
    color: #009944;
    font-weight: 500;
}

/* ========================================
   主内容区域布局
======================================== */
.detail-main-wrapper {
    max-width: 1440px;
    margin: 0 auto;
    padding: 20px;
    display: flex;
    gap: 30px;
}

.detail-content-left {
    flex: 1;
    min-width: 0;
    background: #fff;
    border-radius: 16px;
    padding: 32px;
    border: 1px solid #e8f5e9;
    margin-bottom: 40px;
}

.detail-sidebar-right {
    width: 380px;
    flex-shrink: 0;
    padding-top: 0;
}

/* ========================================
   类型标识
======================================== */
.detail-type-badge {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.type-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 16px;
    background: linear-gradient(135deg, #009944 0%, #00c853 100%);
    color: #fff;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
}

.type-sub-tag {
    display: inline-flex;
    align-items: center;
    padding: 5px 14px;
    background: rgba(220, 252, 231, 0.9);
    color: #009944;
    border-radius: 999px;
    font-size: 12px;
}

.type-hot-tag {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 5px 14px;
    background: rgba(239, 68, 68, 0.9);
    color: #fff;
    border-radius: 999px;
    font-size: 12px;
}

/* ========================================
   标题区
======================================== */
.detail-title {
    font-size: 30px;
    font-weight: bold;
    color: #1a1a1a;
    line-height: 1.5;
    margin-bottom: 10px;
}

/* ========================================
   元信息
======================================== */
.detail-meta {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 16px 0;
    border-bottom: 1px solid #f0f0f0;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.detail-meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #999;
}

.detail-meta-item i {
    font-size: 16px;
    color: #bbb;
}
.detail-about {
    gap: 10px;
    margin-bottom: 20px;
    align-items: start;
}
.detail-about-icon {
    background-color: rgb(240 253 244 / var(--tw-bg-opacity, 1));
    border-radius: 9999px;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    display: flex;
    flex-shrink: 0;
}
.detail-about-text h3 {
    margin-bottom: 5px;
    font-size: 17px;
}
.detail-about-text p {
    margin-bottom: 5px;
    font-size: 15px;
    line-height: 22px;
}
/* ========================================
   视频播放区域
======================================== */
.detail-video-section {
    margin-bottom: 24px;
}

.video-player-wrapper {
    border-radius: 16px;
    overflow: hidden;
    background: #000;
}

.video-player {
    position: relative;
    width: 100%;
}

.video-player video {
    width: 100%;
    display: block;
    border-radius: 16px 16px 0 0;
    max-height: 500px;
    object-fit: contain;
    background: #000;
}

.video-overlay-play {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    cursor: pointer;
    transition: background 0.3s;
    border-radius: 16px 16px 0 0;
}

.video-overlay-play:hover {
    background: rgba(0, 0, 0, 0.5);
}

.video-play-btn-large {
    width: 72px;
    height: 72px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    color: #009944;
    transition: all 0.3s;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.video-overlay-play:hover .video-play-btn-large {
    transform: scale(1.1);
    background: #fff;
}

.video-overlay-play span {
    color: #fff;
    font-size: 14px;
    opacity: 0.9;
}

.video-player-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    background: #1a1a1a;
    border-radius: 0 0 16px 16px;
}

.video-info-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.video-duration,
.video-resolution {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: #aaa;
}

.video-info-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.video-action-btn {
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    color: #aaa;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}

.video-action-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

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

.detail-cover-image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 12px;
}

/* ========================================
   文章正文
======================================== */
.detail-article-body {
    font-size: 15px;
    line-height: 1.9;
    color: #333;
}

.detail-article-body h2 {
    font-size: 20px;
    font-weight: bold;
    color: #1a1a1a;
    margin: 32px 0 16px;
    padding-left: 14px;
    border-left: 4px solid #009944;
    line-height: 1.4;
}

.detail-article-body h2:first-child {
    margin-top: 0;
}

.detail-article-body p {
    margin-bottom: 16px;
    text-align: justify;
}

.detail-article-body strong {
    color: #1a1a1a;
    font-weight: 600;
}

.detail-article-img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 24px auto;
    border-radius: 12px;
}

/* 高亮提示框 */
.detail-highlight-box {
    display: flex;
    gap: 16px;
    padding: 20px;
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border-radius: 12px;
    border: 1px solid #bbf7d0;
    margin: 20px 0;
}

.highlight-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #009944 0%, #00c853 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #fff;
    flex-shrink: 0;
}

.highlight-content h4 {
    font-size: 16px;
    color: #1a1a1a;
    margin-bottom: 8px;
}

.highlight-content ul {
    list-style: none;
    padding: 0;
}

.highlight-content ul li {
    font-size: 15px;
    color: #333;
    line-height: 1.8;
    padding-left: 16px;
    position: relative;
}

.highlight-content ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10px;
    width: 6px;
    height: 6px;
    background: #009944;
    border-radius: 50%;
}

/* 警告提示框 */
.detail-warning-box {
    display: flex;
    gap: 16px;
    padding: 20px;
    background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
    border-radius: 12px;
    border: 1px solid #fed7aa;
    margin: 20px 0;
}

.warning-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #fff;
    flex-shrink: 0;
}

.warning-content h4 {
    font-size: 15px;
    color: #1a1a1a;
    margin-bottom: 8px;
}

.warning-content p {
    font-size: 14px;
    color: #333;
    margin-bottom: 4px;
}

/* 数据表格 */
.detail-table-wrapper {
    overflow-x: auto;
    margin: 16px 0 24px;
    border-radius: 12px;
    border: 1px solid #e8f5e9;
}

.detail-data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.detail-data-table thead {
    background: linear-gradient(135deg, #f0fdf4 0%, #e8f5e9 100%);
}

.detail-data-table th {
    padding: 14px 16px;
    text-align: left;
    font-weight: 600;
    color: #1a1a1a;
    border-bottom: 2px solid #bbf7d0;
    white-space: nowrap;
}

.detail-data-table td {
    padding: 12px 16px;
    border-bottom: 1px solid #f0f0f0;
    color: #333;
}

.detail-data-table tbody tr:hover {
    background: #f8fffb;
}

.detail-data-table tbody tr:last-child td {
    border-bottom: none;
}

.star-rating {
    color: #f5a623;
    letter-spacing: 2px;
}

/* 步骤流程 */
.detail-steps {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 16px 0 24px;
}

.step-item {
    display: flex;
    gap: 16px;
    padding: 20px;
    background: #f8fffb;
    border-radius: 12px;
    border: 1px solid #e8f5e9;
    transition: all 0.3s;
}

.step-item:hover {
    transform: translateX(4px);
    box-shadow: 0 4px 16px rgba(0, 153, 68, 0.1);
}

.step-num {
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, #009944 0%, #00c853 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    flex-shrink: 0;
}

.step-content h4 {
    font-size: 15px;
    color: #1a1a1a;
    margin-bottom: 6px;
}

.step-content p {
    font-size: 14px;
    color: #666;
    line-height: 1.7;
    margin: 0;
}

/* 信息卡片网格 */
.detail-info-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin: 16px 0 24px;
}

.info-card {
    padding: 20px;
    background: #fff;
    border-radius: 12px;
    border: 1px solid #e8f5e9;
    transition: all 0.3s;
}

.info-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 153, 68, 0.1);
}

.info-card-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-bottom: 12px;
}

.info-card h4 {
    font-size: 15px;
    color: #1a1a1a;
    margin-bottom: 8px;
}

.info-card p {
    font-size: 13px;
    color: #666;
    line-height: 1.7;
    margin: 0;
}

/* 列表样式 */
.detail-list {
    list-style: none;
    padding: 0;
    margin: 16px 0 24px;
}

.detail-list li {
    padding: 10px 16px;
    margin-bottom: 8px;
    background: #f8fffb;
    border-radius: 8px;
    font-size: 14px;
    color: #333;
    line-height: 1.7;
    border-left: 3px solid #009944;
}

/* 统计卡片 */
.detail-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin: 16px 0 24px;
}

.detail-stat-item {
    text-align: center;
    padding: 24px 16px;
    background: linear-gradient(135deg, #f0fdf4 0%, #e8f5e9 100%);
    border-radius: 12px;
    border: 1px solid #bbf7d0;
}

.stat-value {
    font-size: 28px;
    font-weight: bold;
    color: #009944;
    line-height: 1.3;
    margin-bottom: 6px;
}

.stat-unit {
    font-size: 14px;
    font-weight: normal;
    color: #666;
}

.stat-label {
    font-size: 13px;
    color: #666;
}

/* ========================================
   标签区域
======================================== */
.detail-tags-section {
    margin: 24px 0;
    padding: 20px 0;
    border-top: 1px solid #f0f0f0;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.detail-tags-label {
    font-size: 14px;
    color: #666;
    margin-right: 8px;
}

.detail-tag {
    display: inline-block;
    padding: 6px 16px;
    background: #f8fffb;
    color: #009944;
    border-radius: 20px;
    font-size: 13px;
    text-decoration: none;
    transition: all 0.3s;
}

.detail-tag:hover {
    background: #009944;
    color: #fff;
}

/* ========================================
   互动操作栏
======================================== */
.detail-action-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 0;
    border-bottom: 1px solid #f0f0f0;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    background: #f8fffb;
    border: 1px solid #e8f5e9;
    border-radius: 999px;
    cursor: pointer;
    font-size: 14px;
    color: #666;
    transition: all 0.3s;
}

.action-btn i {
    font-size: 18px;
}

.action-btn:hover {
    border-color: #009944;
    color: #009944;
    background: #e8f5e9;
}

.action-btn.active {
    background: #009944;
    color: #fff;
    border-color: #009944;
}

.like-btn.active i {
    color: #fff;
}

.collect-btn.active i {
    color: #fff;
}

.download-btn {
    margin-left: auto;
    background: linear-gradient(135deg, #009944 0%, #00c853 100%);
    color: #fff;
    border-color: transparent;
}

.download-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 153, 68, 0.3);
    background: linear-gradient(135deg, #007a35 0%, #009944 100%);
    color: #fff;
}

/* ========================================
   专家咨询卡
======================================== */
.detail-expert-consult {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    background: linear-gradient(135deg, #f0fdf4 0%, #e8f5e9 100%);
    border-radius: 12px;
    border: 1px solid #bbf7d0;
    margin-bottom: 32px;
    gap: 20px;
    flex-wrap: wrap;
}

.expert-consult-left {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
    min-width: 0;
}

.expert-consult-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    border: 2px solid #009944;
}

.expert-consult-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.expert-consult-info h4 {
    font-size: 15px;
    color: #1a1a1a;
    margin-bottom: 4px;
}

.expert-title {
    display: inline-block;
    padding: 2px 8px;
    background: linear-gradient(135deg, #009944 0%, #00c853 100%);
    color: #fff;
    border-radius: 4px;
    font-size: 11px;
    margin-left: 6px;
    vertical-align: middle;
}

.expert-consult-info p {
    font-size: 13px;
    color: #666;
    line-height: 1.5;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.expert-consult-right {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

.consult-online-btn,
.consult-phone-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s;
    border: none;
}

.consult-online-btn {
    background: linear-gradient(135deg, #009944 0%, #00c853 100%);
    color: #fff;
}

.consult-online-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 153, 68, 0.3);
}

.consult-phone-btn {
    background: #fff;
    color: #009944;
    border: 1px solid #009944;
}

.consult-phone-btn:hover {
    background: #e8f5e9;
}

/* ========================================
   评论区
======================================== */
.detail-section-title {
    font-size: 18px;
    font-weight: bold;
    color: #1a1a1a;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f0f0f0;
}

.detail-section-title i {
    color: #009944;
    font-size: 22px;
}

.comment-count {
    font-size: 14px;
    font-weight: normal;
    color: #999;
}

.comment-input-area {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
}

.comment-avatar {
    width: 40px;
    height: 40px;
    background: #f0f0f0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 20px;
    color: #bbb;
}

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

.comment-input {
    width: 100%;
    height: 80px;
    padding: 12px 16px;
    border: 1px solid #e8f5e9;
    border-radius: 12px;
    font-size: 14px;
    resize: vertical;
    outline: none;
    transition: all 0.3s;
    font-family: inherit;
}

.comment-input:focus {
    border-color: #009944;
    box-shadow: 0 0 0 3px rgba(0, 153, 68, 0.1);
}

.comment-input-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 8px;
}

.comment-input-tools {
    display: flex;
    gap: 8px;
}

.comment-input-tools button {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: #999;
    font-size: 18px;
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}

.comment-input-tools button:hover {
    background: #f0f0f0;
    color: #009944;
}

.comment-submit-btn {
    padding: 8px 24px;
    background: linear-gradient(135deg, #009944 0%, #00c853 100%);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s;
}

.comment-submit-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 153, 68, 0.3);
}

/* 评论列表 */
.comment-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.comment-item {
    display: flex;
    gap: 12px;
}

.comment-avatar-sm {
    width: 36px;
    height: 36px;
    background: #f0f0f0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 18px;
    color: #bbb;
}

.comment-avatar-sm.expert {
    background: #e8f5e9;
    color: #009944;
}

.comment-body {
    flex: 1;
    min-width: 0;
}

.comment-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 6px;
}

.comment-name {
    font-size: 14px;
    font-weight: 500;
    color: #1a1a1a;
}

.expert-badge {
    display: inline-block;
    padding: 1px 6px;
    background: linear-gradient(135deg, #009944 0%, #00c853 100%);
    color: #fff;
    border-radius: 4px;
    font-size: 10px;
    vertical-align: middle;
}

.comment-time {
    font-size: 12px;
    color: #999;
}

.comment-text {
    font-size: 14px;
    color: #333;
    line-height: 1.7;
    margin-bottom: 8px;
}

.comment-reply-area {
    margin-top: 8px;
    padding-left: 12px;
    border-left: 2px solid #e8f5e9;
}

.comment-reply-area .comment-item {
    gap: 10px;
}

.comment-actions {
    display: flex;
    gap: 16px;
}

.comment-actions button {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    font-size: 12px;
    color: #999;
    cursor: pointer;
    padding: 0;
    transition: color 0.3s;
}

.comment-actions button:hover {
    color: #009944;
}

.comment-load-more {
    text-align: center;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #f0f0f0;
}

.comment-load-more button {
    padding: 10px 28px;
    border: 1px solid #e8f5e9;
    background: #fff;
    color: #009944;
    border-radius: 999px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.comment-load-more button:hover {
    background: #e8f5e9;
}

/* ========================================
   相关推荐
======================================== */
.detail-related-section {
    margin-top: 32px;
    padding-top: 32px;
    border-top: 1px solid #f0f0f0;
}

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

.detail-related-card {
    display: block;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #e8f5e9;
    transition: all 0.3s;
    text-decoration: none;
}

.detail-related-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 153, 68, 0.12);
}

.related-card-img {
    position: relative;
    height: 140px;
    overflow: hidden;
}

.related-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.detail-related-card:hover .related-card-img img {
    transform: scale(1.05);
}

.related-type-tag {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 3px 10px;
    background: rgba(220, 252, 231, 0.9);
    color: #009944;
    border-radius: 999px;
    font-size: 11px;
}

.related-type-tag.video {
    background: rgba(255, 247, 237, 0.9);
    color: #ff7800;
}

.related-play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #ff7800;
}

.related-card-body {
    padding: 14px 16px;
}

.related-card-body h4 {
    font-size: 14px;
    color: #1a1a1a;
    margin-bottom: 6px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.related-card-body p {
    font-size: 12px;
    color: #999;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ========================================
   返回按钮
======================================== */
.detail-back-section {
    margin-top: 32px;
    text-align: center;
}

.detail-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 12px 32px;
    background: #f8fffb;
    color: #009944;
    border: 1px solid #009944;
    border-radius: 8px;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.3s;
}

.detail-back-btn:hover {
    background: #009944;
    color: #fff;
}

/* ========================================
   右侧侧边栏 - 目录
======================================== */
.toc-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.toc-item {
    display: block;
    padding: 10px 12px;
    font-size: 13px;
    color: #666;
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.3s;
    border-left: 3px solid transparent;
}

.toc-item:hover {
    background: #f8fffb;
    color: #009944;
}

.toc-item.active {
    background: #e8f5e9;
    color: #009944;
    font-weight: 500;
    border-left-color: #009944;
}

/* 右侧视频推荐 */
.sidebar-video-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sidebar-video-item {
    display: flex;
    gap: 12px;
    text-decoration: none;
    padding: 8px;
    border-radius: 8px;
    transition: all 0.3s;
}

.sidebar-video-item:hover {
    background: #f8fffb;
}

.sidebar-video-thumb {
    width: 120px;
    height: 72px;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
}

.sidebar-video-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sidebar-play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 28px;
    height: 28px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #009944;
}

.sidebar-video-duration {
    position: absolute;
    bottom: 4px;
    right: 4px;
    padding: 2px 6px;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    border-radius: 4px;
    font-size: 10px;
}

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

.sidebar-video-info h4 {
    font-size: 13px;
    color: #1a1a1a;
    line-height: 1.4;
    margin-bottom: 6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sidebar-video-info span {
    font-size: 11px;
    color: #999;
    display: flex;
    align-items: center;
    gap: 3px;
}

/* ========================================
   响应式布局
======================================== */
@media (max-width: 1200px) {
    .detail-stat-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .detail-related-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 1024px) {
    .detail-main-wrapper {
        flex-direction: column;
    }

    .detail-sidebar-right {
        width: 100%;
    }

    .detail-info-cards {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .detail-content-left {
        padding: 20px;
    }

    .detail-title {
        font-size: 22px;
    }

    .detail-meta {
        flex-direction: column;
        gap: 8px;
    }

    .detail-stat-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .detail-related-grid {
        grid-template-columns: 1fr;
    }

    .detail-action-bar {
        justify-content: center;
    }

    .download-btn {
        margin-left: 0;
        width: 100%;
        justify-content: center;
    }

    .detail-expert-consult {
        flex-direction: column;
    }

    .expert-consult-right {
        width: 100%;
    }

    .consult-online-btn,
    .consult-phone-btn {
        flex: 1;
        justify-content: center;
    }
}