---
/**
 * 技术报告页面标准模板 (完整版) - 2025更新版
 * 基于 report/20250722/index.astro 的统一宽度配置优化设计
 * 使用CSS变量实现所有ReportSection的统一宽度管理
 */
import BaseLayout from '../../../layouts/BaseLayout.astro';
import Header from '../../../components/Header.astro';
import Footer from '../../../components/Footer.astro';
import ReportSection from '../../../components/report/ReportSection.astro';
import GlassTable from '../../../components/common/GlassTable.astro';
import MathFormula from '../../../components/common/MathFormula.astro';
import ImageViewer from '../../../components/common/ImageViewer.astro';
import CodeBlock from '../../../components/common/CodeBlock.astro';
import Container from '../../../components/Container.astro';
import AnimatedElement from '../../../components/AnimatedElement.astro';
import ReportSidebar from '../../../components/report/ReportSidebar.astro';

// 导入动画时序计算工具
import { 
  getSectionBaseDelay, 
  getChildDelay, 
  getNestedDelay, 
  getImageDelay 
} from '../../../scripts/animation-timing';

// 定义各章节的基础延迟时间
const TEMPLATE_SECTION_DELAYS = {
  HERO: 200,
  OVERVIEW: getSectionBaseDelay(0),    // 400ms
  ANALYSIS: getSectionBaseDelay(1),    // 600ms
  SOLUTION: getSectionBaseDelay(2),    // 800ms
  COMPARISON: getSectionBaseDelay(3),  // 1000ms
  RESULTS: getSectionBaseDelay(4),     // 1200ms
  CONCLUSION: getSectionBaseDelay(5),  // 1400ms
};

// 报告配置 - 请根据实际情况修改
const reportConfig = {
  title: "技术报告标题",
  subtitle: "技术报告副标题，描述报告的核心内容和研究方向。",
  description: "技术报告的详细描述，用于SEO和页面元信息。",
  date: "2025年XX月XX日",
  type: "技术报告",
  actionText: "开始阅读 ↓",
  actionLink: "#overview"
};

// 示例代码配置 - 请根据需要修改
const sampleCodeExamples = {
  javascript: {
    title: "JavaScript 示例",
    language: "javascript",
    code: `function fibonacci(n) {
  if (n <= 1) return n;
  return fibonacci(n - 1) + fibonacci(n - 2);
}

console.log(fibonacci(10)); // 输出: 55`
  },
  python: {
    title: "Python 示例",
    language: "python",
    code: `def quick_sort(arr):
    if len(arr) <= 1:
        return arr
    pivot = arr[len(arr) // 2]
    left = [x for x in arr if x < pivot]
    middle = [x for x in arr if x == pivot]
    right = [x for x in arr if x > pivot]
    return quick_sort(left) + middle + quick_sort(right)

print(quick_sort([3, 6, 8, 10, 1, 2, 1]))`
  },
  css: {
    title: "CSS 样式示例",
    language: "css",
    code: `.glass-effect {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 1rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}`
  }
};
---

<BaseLayout 
  title={`${reportConfig.title} - Jiao77`}
  description={reportConfig.description}
  type="report"
>
  <Header 
    pageTitle={reportConfig.title}
    showPageTitle={true}
    description={reportConfig.subtitle}
  />
  
  <main class="report-main">
    <div class="report-layout container mx-auto px-4">
      <ReportSidebar title="报告目录" toggleLabel="目录" />
      <div class="report-content" data-report-content>
      
      <!-- 报告标题区域 -->
      <section id="intro" class="report-header scroll-mt-16">
        <AnimatedElement animation="fadeInUp" delay={200} trigger="load">
          <Container
            variant="glass"
            size="full"
            padding="xl"
            className="text-center mb-12 mt-24"
          >
            <h1 class="report-title">{reportConfig.title}</h1>
            <p class="report-subtitle">{reportConfig.subtitle}</p>
            <div class="report-meta">
              <span class="report-date">报告日期：{reportConfig.date}</span>
              <span class="report-type">{reportConfig.type}</span>
            </div>
            <div class="report-action">
              <a href={reportConfig.actionLink} class="report-cta-button">{reportConfig.actionText}</a>
            </div>
          </Container>
        </AnimatedElement>
      </section>

      <!-- 概述章节 -->
      <AnimatedElement animation="fadeInUp" delay={TEMPLATE_SECTION_DELAYS.OVERVIEW} trigger="scroll">
        <section id="overview">
          <ReportSection 
            title="📖 概述"
            subtitle="报告的主要内容和背景介绍"
            level={2}
          >
            <div class="space-y-6">
              <div class="goal-section">
                <h3 class="section-heading">背景介绍</h3>
                <p>
                  在这里详细描述报告的背景和研究动机。可以包含<strong>重点强调的文字</strong>，
                  以及相关的技术背景和问题陈述。
                </p>
              </div>
              
              <div class="goal-section">
                <h3 class="section-heading">主要内容</h3>
                <ul class="research-pillars">
                  <li>
                    <strong>内容要点一：</strong>
                    详细描述第一个主要内容点。
                  </li>
                  <li>
                    <strong>内容要点二：</strong>
                    详细描述第二个主要内容点。
                  </li>
                  <li>
                    <strong>内容要点三：</strong>
                    详细描述第三个主要内容点。
                  </li>
                </ul>
              </div>
            </div>
          </ReportSection>
        </section>
      </AnimatedElement>

      <!-- 技术分析章节 -->
      <AnimatedElement animation="fadeInUp" delay={TEMPLATE_SECTION_DELAYS.ANALYSIS} trigger="scroll">
        <section id="analysis">
          <ReportSection 
            title="🔬 技术分析"
            subtitle="核心技术概念和挑战的详细分析"
            level={2}
          >
            <!-- 🎨 子容器延迟动画示例：为各个卡片添加逐个出现的动画效果 -->
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
              <AnimatedElement animation="fadeInUp" delay={getChildDelay(TEMPLATE_SECTION_DELAYS.ANALYSIS, 0)} trigger="scroll">
                <div class="challenge-card">
                  <h3 class="challenge-title">技术挑战一</h3>
                  <p class="challenge-description">描述第一个技术挑战的具体内容和影响。</p>
                </div>
              </AnimatedElement>
              <AnimatedElement animation="fadeInUp" delay={getChildDelay(TEMPLATE_SECTION_DELAYS.ANALYSIS, 1)} trigger="scroll">
                <div class="challenge-card">
                  <h3 class="challenge-title">技术挑战二</h3>
                  <p class="challenge-description">描述第二个技术挑战的具体内容和影响。</p>
                </div>
              </AnimatedElement>
              <AnimatedElement animation="fadeInUp" delay={getChildDelay(TEMPLATE_SECTION_DELAYS.ANALYSIS, 2)} trigger="scroll">
                <div class="challenge-card">
                  <h3 class="challenge-title">技术挑战三</h3>
                  <p class="challenge-description">描述第三个技术挑战的具体内容和影响。</p>
                </div>
              </AnimatedElement>
            </div>
          </ReportSection>
        </section>
      </AnimatedElement>

      <!-- 解决方案章节 -->
      <AnimatedElement animation="fadeInUp" delay={TEMPLATE_SECTION_DELAYS.SOLUTION} trigger="scroll">
        <section id="solution">
          <ReportSection 
            title="💡 解决方案"
            subtitle="针对技术挑战提出的创新解决方案和实施方法"
            level={2}
          >
            <!-- 🎨 数学公式区域延迟动画示例 -->
            <AnimatedElement animation="fadeInUp" delay={getChildDelay(TEMPLATE_SECTION_DELAYS.SOLUTION, 0)} trigger="scroll">
              <div class="math-intro mb-6">
                <p class="text-center text-lg text-gray-600 max-w-3xl mx-auto">
                  如果报告涉及数学公式，可以使用 MathFormula 组件进行展示：
                </p>
                <AnimatedElement animation="fadeInUp" delay={getNestedDelay(getChildDelay(TEMPLATE_SECTION_DELAYS.SOLUTION, 0), 1)} trigger="scroll">
                  <div class="text-center mt-4">
                    <p class="text-lg text-gray-600 mb-3">示例公式：</p>
                    <MathFormula 
                      formula="f(x) = ax^2 + bx + c"
                      className="example-formula"
                    />
                  </div>
                </AnimatedElement>
              </div>
            </AnimatedElement>

            <!-- 🎨 深度分析卡片的子容器延迟动画示例 -->
            <div class="space-y-8">
              <AnimatedElement animation="fadeInUp" delay={getChildDelay(TEMPLATE_SECTION_DELAYS.SOLUTION, 1)} trigger="scroll">
                <div class="deep-dive-card">
                  <div class="flex items-center mb-4">
                    <div class="text-5xl mr-4">🛠️</div>
                    <div>
                      <p class="component-label">核心方案</p>
                      <h3 class="component-title">技术方案一</h3>
                    </div>
                  </div>
                  <p class="text-gray-700 mb-3">详细描述第一个技术方案的原理和实现方式。</p>
                  <AnimatedElement animation="fadeInUp" delay={getNestedDelay(getChildDelay(TEMPLATE_SECTION_DELAYS.SOLUTION, 1), 1)} trigger="scroll">
                    <h4 class="font-semibold text-lg mt-4 mb-2 text-blue-600">实现步骤：</h4>
                    <ul class="list-disc text-gray-600 space-y-2">
                      <li>步骤一：具体的实施方法和技术要点</li>
                      <li>步骤二：具体的实施方法和技术要点</li>
                      <li>步骤三：具体的实施方法和技术要点</li>
                    </ul>
                  </AnimatedElement>
                </div>
              </AnimatedElement>

              <AnimatedElement animation="fadeInUp" delay={getChildDelay(TEMPLATE_SECTION_DELAYS.SOLUTION, 2)} trigger="scroll">
                <div class="deep-dive-card">
                  <div class="flex items-center mb-4">
                    <div class="text-5xl mr-4">⚡</div>
                    <div>
                      <p class="component-label">优化策略</p>
                      <h3 class="component-title">技术方案二</h3>
                    </div>
                  </div>
                  <p class="text-gray-700 mb-3">详细描述第二个技术方案的优化策略和核心技术。</p>
                  <AnimatedElement animation="fadeInUp" delay={getNestedDelay(getChildDelay(TEMPLATE_SECTION_DELAYS.SOLUTION, 2), 1)} trigger="scroll">
                    <h4 class="font-semibold text-lg mt-4 mb-2 text-blue-600">关键技术：</h4>
                    <ul class="list-disc text-gray-600 space-y-2">
                      <li>关键技术一：技术原理和应用优势</li>
                      <li>关键技术二：技术原理和应用优势</li>
                    </ul>
                  </AnimatedElement>
                </div>
              </AnimatedElement>
            </div>

            <div class="summary-highlight">
              <p class="summary-highlight__text">核心优势总结：在这里总结解决方案的核心优势和创新点，突出技术方案的独特价值。</p>
            </div>
          </ReportSection>
        </section>
      </AnimatedElement>

      <!-- 对比分析章节 -->
      <AnimatedElement animation="fadeInUp" delay={TEMPLATE_SECTION_DELAYS.COMPARISON} trigger="scroll">
        <section id="comparison">
          <ReportSection 
            title="📊 对比分析"
            subtitle="不同技术方案的详细对比和评估"
            level={2}
          >
            <div class="mt-12">
              <h3 class="text-2xl font-bold text-center mb-6 text-blue-500">技术方案对比表</h3>
              <GlassTable 
                headers={['对比维度', '方案A', '方案B', '方案C', '推荐方案']}
                rows={[
                  ['技术复杂度', '高', '中', '低', '方案B'],
                  ['性能表现', '优秀', '良好', '一般', '方案A'],
                  ['实施成本', '高', '中', '低', '方案B'],
                  ['维护难度', '低', '中', '高', '方案A'],
                  ['扩展性', '优秀', '良好', '一般', '方案A'],
                  ['综合评价', '⭐⭐⭐⭐⭐', '⭐⭐⭐⭐', '⭐⭐⭐', '方案A']
                ]}
                striped={true}
                bordered={true}
                className="tech-comparison-table"
              />
            </div>

            <!-- 代码示例部分 -->
            <div class="mt-16">
              <h3 class="text-2xl font-bold text-center mb-8 text-blue-500">💻 代码实现示例</h3>
              <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                <AnimatedElement animation="fadeInUp" delay={getChildDelay(TEMPLATE_SECTION_DELAYS.COMPARISON, 0)} trigger="scroll">
                  <CodeBlock 
                    title={sampleCodeExamples.javascript.title}
                    language={sampleCodeExamples.javascript.language}
                    showLineNumbers={true}
                    code={sampleCodeExamples.javascript.code}
                  />
                </AnimatedElement>

                <AnimatedElement animation="fadeInUp" delay={getChildDelay(TEMPLATE_SECTION_DELAYS.COMPARISON, 1)} trigger="scroll">
                  <CodeBlock 
                    title={sampleCodeExamples.python.title}
                    language={sampleCodeExamples.python.language}
                    showLineNumbers={true}
                    code={sampleCodeExamples.python.code}
                  />
                </AnimatedElement>
              </div>

              <div class="mt-8">
                <AnimatedElement animation="fadeInUp" delay={getChildDelay(TEMPLATE_SECTION_DELAYS.COMPARISON, 2)} trigger="scroll">
                  <CodeBlock 
                    title={sampleCodeExamples.css.title}
                    language={sampleCodeExamples.css.language}
                    showLineNumbers={true}
                    code={sampleCodeExamples.css.code}
                  />
                </AnimatedElement>
              </div>
            </div>
          </ReportSection>
        </section>
      </AnimatedElement>

      <!-- 实验结果章节 -->
      <AnimatedElement animation="fadeInUp" delay={TEMPLATE_SECTION_DELAYS.RESULTS} trigger="scroll">
        <section id="results">
          <ReportSection 
            title="🧪 实验结果"
            subtitle="技术方案的实际测试结果和性能数据"
            level={2}
          >
            <div class="space-y-10">
              <div>
                <h3 class="text-xl font-semibold text-center mb-4 text-gray-700">实验数据展示</h3>
                <!-- 🎨 图片容器的子元素延迟动画示例 -->
                <div class="proof-image-container">
                  <AnimatedElement animation="fadeInUp" delay={getImageDelay(TEMPLATE_SECTION_DELAYS.RESULTS, 0)} trigger="scroll">
                    <div class="proof-image-item">
                      <ImageViewer
                        src="/report/template-images/result-1.jpg"
                        alt="实验结果图表1"
                        className="proof-image-viewer"
                        aspectRatio="5 / 3"
                      />
                      <p>性能测试结果对比</p>
                    </div>
                  </AnimatedElement>
                  <AnimatedElement animation="fadeInUp" delay={getImageDelay(TEMPLATE_SECTION_DELAYS.RESULTS, 1)} trigger="scroll">
                    <div class="proof-image-item">
                      <ImageViewer
                        src="/report/template-images/result-2.jpg"
                        alt="实验结果图表2"
                        className="proof-image-viewer"
                        aspectRatio="5 / 3"
                      />
                      <p>精度测试结果分析</p>
                    </div>
                  </AnimatedElement>
                  <AnimatedElement animation="fadeInUp" delay={getImageDelay(TEMPLATE_SECTION_DELAYS.RESULTS, 2)} trigger="scroll">
                    <div class="proof-image-item">
                      <ImageViewer
                        src="/report/template-images/result-3.jpg"
                        alt="实验结果图表3"
                        className="proof-image-viewer"
                        aspectRatio="5 / 3"
                      />
                      <p>效率提升对比</p>
                    </div>
                  </AnimatedElement>
                </div>
              </div>
            </div>
          </ReportSection>
        </section>
      </AnimatedElement>

      <!-- 总结与展望章节 -->
      <AnimatedElement animation="fadeInUp" delay={TEMPLATE_SECTION_DELAYS.CONCLUSION} trigger="scroll">
        <section id="conclusion">
          <ReportSection 
            title="🚀 总结与展望"
            subtitle="对报告内容进行总结，并提出未来的发展方向"
            level={2}
          >
            <!-- 🎨 总结与展望卡片的子容器延迟动画示例 -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
              <AnimatedElement animation="fadeInUp" delay={getChildDelay(TEMPLATE_SECTION_DELAYS.CONCLUSION, 0)} trigger="scroll">
                <div class="deep-dive-card">
                  <h3 class="text-2xl font-bold mb-4 text-blue-500">🎯 核心成果</h3>
                  <ul class="space-y-3 text-gray-700 list-disc list-inside">
                    <li><strong>技术突破：</strong>详细描述取得的重要技术突破。</li>
                    <li><strong>性能提升：</strong>详细描述性能改进的具体数据。</li>
                    <li><strong>应用价值：</strong>详细描述技术的实际应用价值。</li>
                    <li><strong>创新点：</strong>详细描述技术方案的创新之处。</li>
                  </ul>
                </div>
              </AnimatedElement>

              <AnimatedElement animation="fadeInUp" delay={getChildDelay(TEMPLATE_SECTION_DELAYS.CONCLUSION, 1)} trigger="scroll">
                <div class="deep-dive-card">
                  <h3 class="text-2xl font-bold mb-4 text-blue-500">📅 未来规划</h3>
                  <AnimatedElement animation="fadeInUp" delay={getNestedDelay(getChildDelay(TEMPLATE_SECTION_DELAYS.CONCLUSION, 1), 1)} trigger="scroll">
                    <ul class="space-y-4 text-gray-700">
                      <li class="flex items-start">
                        <span class="text-blue-500 font-bold w-32 shrink-0">短期目标</span>
                        <span>描述近期要完成的技术优化和功能完善。</span>
                      </li>
                      <li class="flex items-start">
                        <span class="text-green-500 font-bold w-32 shrink-0">中期目标</span>
                        <span>描述中期的技术发展方向和应用扩展。</span>
                      </li>
                      <li class="flex items-start">
                        <span class="text-purple-500 font-bold w-32 shrink-0">长期目标</span>
                        <span>描述长期的技术愿景和产业化应用。</span>
                      </li>
                    </ul>
                  </AnimatedElement>
                </div>
              </AnimatedElement>
            </div>
          </ReportSection>
        </section>
      </AnimatedElement>
      
      </div>
    </div>
  </main>
  
  <Footer />
</BaseLayout>

<script>
  // 交互式功能示例
  document.addEventListener('DOMContentLoaded', function() {
    // 可以在这里添加报告特定的交互功能
    console.log('技术报告页面已加载完成');
  });
</script>

<style>
  /* === 报告页面核心样式 === */
  .report-main {
    --report-color-primary: #5f7a99;
    --report-color-primary-strong: #4a627b;
    --report-color-primary-deep: #384b5f;
    --report-color-primary-soft: #8ea3b8;
    --report-color-accent: #a8bdc9;
    --report-color-highlight: rgba(95, 122, 153, 0.2);
    --report-color-soft-glow: rgba(148, 173, 196, 0.12);
    --report-color-glass-border: rgba(95, 122, 153, 0.28);
    --report-color-text: #2f3844;
    --report-color-subtext: #566171;
    --report-color-muted: #6d7885;
    --report-color-surface: rgba(255, 255, 255, 0.65);
    min-height: 100vh;
    padding-bottom: 2rem;
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans SC', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
    background: transparent;
    color: var(--report-color-text);
    position: relative;
  }
  
  .report-main::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(135deg,
      rgba(143, 167, 187, 0.16) 0%,
      rgba(164, 186, 202, 0.1) 25%,
      rgba(182, 201, 214, 0.08) 50%,
      rgba(154, 175, 192, 0.1) 75%,
      rgba(122, 146, 165, 0.22) 100%);
    pointer-events: none;
    z-index: -1;
  }

  /* === 布局样式 === */
  .report-layout {
    --report-sidebar-width: clamp(var(--report-sidebar-min-width), 22vw, var(--report-sidebar-max-width));
    display: flex;
    flex-direction: column;
    gap: var(--report-sidebar-gap);
    position: relative;
    width: 100%;
  }

  .report-content {
    position: relative;
    width: 100%;
    min-width: 0;
    margin: 0 auto;
  }
  
  .container {
    max-width: 1200px;
    width: 100%;
  }
  
  .mx-auto { margin-left: auto; margin-right: auto; }
  .px-4 { padding-left: 1rem; padding-right: 1rem; }

  /* === 标题区域样式 === */
  .report-header {
    padding: 4rem 0 2rem 0;
    text-align: center;
  }
  
  .report-title {
    font-size: 3rem;
    font-weight: 800;
    color: var(--report-color-primary);
    margin: 0 0 1rem 0;
    background: linear-gradient(135deg, var(--report-color-primary-soft), var(--report-color-primary), var(--report-color-primary-strong));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
  }
  
  .report-subtitle {
    font-size: 1.25rem;
    color: var(--report-color-subtext);
    margin: 0 0 2rem 0;
    line-height: 1.6;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
  }
  
  .report-meta {
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
    margin-top: 1.5rem;
  }
  
  .report-date, .report-type {
    background: rgba(95, 122, 153, 0.12);
    color: var(--report-color-primary-deep);
    padding: 0.5rem 1rem;
    border-radius: 1rem;
    font-weight: 500;
    font-size: 0.875rem;
  }
  
  .report-action {
    margin-top: 2rem;
  }
  
  .report-cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.9rem 2.4rem;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--report-color-primary), var(--report-color-primary-strong));
    color: #ffffff;
    font-weight: 600;
    letter-spacing: 0.02em;
    box-shadow: 0 14px 32px rgba(56, 75, 95, 0.28);
    transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease;
  }

  .report-cta-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 40px rgba(56, 75, 95, 0.32);
    filter: brightness(1.05);
  }

  .report-cta-button:active {
    transform: translateY(0);
    box-shadow: 0 12px 28px rgba(56, 75, 95, 0.28);
    filter: brightness(0.98);
  }

  /* === 内容区域样式 === */
  .goal-section {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--report-color-glass-border);
    border-radius: 1rem;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
  }
  
  .section-heading {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--report-color-primary);
    margin: 0 0 1rem 0;
  }
  
  .research-pillars {
    list-style: none;
    padding: 0;
  }
  
  .research-pillars li {
    background: rgba(95, 122, 153, 0.08);
    border-left: 4px solid rgba(95, 122, 153, 0.65);
    padding: 1rem 1.5rem;
    margin-bottom: 1rem;
    border-radius: 0 0.5rem 0.5rem 0;
  }

  /* === 卡片样式 === */
  .challenge-card {
    background: linear-gradient(135deg, rgba(95, 122, 153, 0.18), rgba(74, 98, 123, 0.16));
    padding: 1.5rem;
    border-radius: 0.85rem;
    border: 1px solid rgba(74, 98, 123, 0.35);
    box-shadow: 0 12px 32px rgba(56, 75, 95, 0.18);
    backdrop-filter: blur(16px);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  }
  
  .challenge-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 44px rgba(56, 75, 95, 0.25);
    border-color: rgba(74, 98, 123, 0.48);
  }
  
  .challenge-title {
    font-weight: bold;
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
    color: var(--report-color-primary-strong);
  }
  
  .challenge-description {
    color: var(--report-color-subtext);
  }

  .deep-dive-card {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--report-color-glass-border);
    border-radius: 1rem;
    padding: 2rem;
    margin-bottom: 2rem;
  }

  /* === 组件样式 === */
  .component-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    color: rgba(95, 122, 153, 0.85);
    letter-spacing: 0.05em;
  }
  
  .component-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--report-color-primary);
    margin: 0.25rem 0 0 0;
  }

  /* === 高亮样式 === */
  .summary-highlight {
    margin-top: 3rem;
    margin-left: auto;
    margin-right: auto;
    max-width: 56rem;
    padding: 1.75rem 2.5rem;
    text-align: center;
    background: linear-gradient(135deg, rgba(168, 189, 201, 0.28), rgba(95, 122, 153, 0.16));
    border-radius: 1.25rem;
    border: 1px solid rgba(95, 122, 153, 0.32);
    box-shadow: 0 18px 48px rgba(56, 75, 95, 0.22);
    backdrop-filter: blur(18px);
    color: var(--report-color-primary-deep);
    position: relative;
    overflow: hidden;
  }

  .summary-highlight::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top left, rgba(255, 255, 255, 0.5), transparent 55%);
    opacity: 0.65;
    pointer-events: none;
  }

  .summary-highlight__text {
    position: relative;
    font-weight: 600;
    font-size: 1.05rem;
    color: inherit;
  }

  /* === 数学公式样式 === */
  .math-intro {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--report-color-glass-border);
    border-radius: 1rem;
    padding: 2rem;
  }

  /* === 表格样式 === */
  .tech-comparison-table {
    margin: 2rem 0;
  }
  
  .tech-comparison-table .glass-table th:last-child {
    background: rgba(95, 122, 153, 0.18);
    color: var(--report-color-primary-deep);
    font-weight: 700;
  }
  
  .tech-comparison-table .glass-table td:last-child {
    background: rgba(95, 122, 153, 0.12);
    font-weight: 600;
    color: var(--report-color-primary-strong);
  }

  /* === 图片样式 === */
  .proof-image-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
  }
  
  .proof-image-item {
    text-align: center;
  }
  
  :global(.proof-image-viewer) {
    margin: 0;
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  :global(.proof-image-viewer:hover) {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(15, 23, 42, 0.15);
  }

  .proof-image-item p {
    text-align: center;
    font-size: 0.875rem;
    color: var(--report-color-muted);
    margin-top: 0.5rem;
  }

  /* === 响应式设计 === */
  @media (max-width: 768px) {
    .report-title { font-size: 2rem; }
    .report-subtitle { font-size: 1.1rem; }
    .report-meta { 
      flex-direction: column;
      align-items: center;
      gap: 1rem;
    }
    .deep-dive-card { padding: 1.5rem; }
    .grid { grid-template-columns: 1fr; }
  }

  /* 统一宽度配置 - 先进的宽度管理方式 */
  /* 
   * 要修改整个页面的最大宽度，只需要修改下面的 --max-content-width 值
   * 建议的宽度选项：
   * - 1024px (较窄，适合阅读)
   * - 1200px (当前设置，平衡)
   * - 1400px (较宽，适合表格)
   */
  :global(:root) {
    --max-content-width: 1200px;
    --report-sidebar-min-width: 260px;
    --report-sidebar-base-width: 300px;
    --report-sidebar-max-width: 320px;
    --report-sidebar-gap: 2.5rem;
    --report-content-padding: 1rem;
  }
  
  /* 统一宽度类 - 所有内容区域使用相同的最大宽度 */
  .report-header,
  .container {
    max-width: var(--max-content-width);
    width: 100%;
    margin: 0 auto;
  }
  
  /* 专门的宽度配置，可根据需要调整 */
  .report-width {
    max-width: var(--max-content-width);
    margin: 0 auto;
  }

  @media (min-width: 1280px) {
    .report-main {
      padding-left: clamp(
        calc(var(--report-sidebar-base-width) + var(--report-sidebar-gap)),
        calc((100vw - var(--max-content-width)) / 2 + var(--report-content-padding)),
        calc(var(--report-sidebar-max-width) + 3rem)
      );
      padding-right: clamp(
        var(--report-content-padding),
        calc((100vw - var(--max-content-width)) / 2 + var(--report-content-padding)),
        2rem
      );
    }
    .report-layout {
      max-width: var(--max-content-width);
      margin: 0 auto;
      position: relative;
    }
    .report-content {
      max-width: 100%;
      width: 100%;
      margin-left: 0;
    }
    .container {
      padding-left: var(--report-content-padding);
      padding-right: var(--report-content-padding);
    }
  }

  /* === 工具样式类 === */
  .grid { display: grid; }
  .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  @media (min-width: 768px) {
    .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (min-width: 1024px) {
    .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }
  .gap-8 { gap: 2rem; }
  .space-y-6 > * + * { margin-top: 1.5rem; }
  .space-y-8 > * + * { margin-top: 2rem; }
  .space-y-10 > * + * { margin-top: 2.5rem; }
  .space-y-3 > * + * { margin-top: 0.75rem; }
  .space-y-4 > * + * { margin-top: 1rem; }
  .flex { display: flex; }
  .items-center { align-items: center; }
  .items-start { align-items: flex-start; }
  .mb-8 { margin-bottom: 2rem; }
  .mb-6 { margin-bottom: 1.5rem; }
  .mb-4 { margin-bottom: 1rem; }
  .mb-3 { margin-bottom: 0.75rem; }
  .mb-2 { margin-bottom: 0.5rem; }
  .mt-4 { margin-top: 1rem; }
  .mt-12 { margin-top: 3rem; }
  .mr-4 { margin-right: 1rem; }
  .text-center { text-align: center; }
  .text-5xl { font-size: 3rem; line-height: 1; }
  .text-2xl { font-size: 1.5rem; line-height: 2rem; }
  .text-xl { font-size: 1.25rem; line-height: 1.75rem; }
  .text-lg { font-size: 1.125rem; line-height: 1.75rem; }
  .font-bold { font-weight: 700; }
  .font-semibold { font-weight: 600; }
  .text-gray-700 { color: var(--report-color-text); }
  .text-gray-600 { color: var(--report-color-subtext); }
  .text-blue-500 { color: var(--report-color-primary); }
  .text-blue-600 { color: var(--report-color-primary-strong); }
  .text-green-500 { color: #6f8c83; }
  .text-purple-500 { color: #7f7a94; }
  .w-32 { width: 8rem; }
  .shrink-0 { flex-shrink: 0; }
  .max-w-3xl { max-width: 48rem; }
  .list-disc { list-style-type: disc; }
  .list-inside { list-style-position: inside; }
</style>