@if (visible) {
  <div class="overlay">
    <div class="report-container" (click)="$event.stopPropagation()">
      <div class="report-header">
        <h2>完整分析报告</h2>
        <button class="close-btn" (click)="onClose()">关闭</button>
      </div>

      <div class="report-body">
        <!-- 颜色分析 -->
        @if (colorResult) {
          <section class="section">
            <h3>颜色分析</h3>
            <div class="color-grid">
              @for (c of colorResult.colors; track c.hex) {
                <div class="color-item">
                  <div class="swatch" [style.background-color]="c.hex"></div>
                  <div class="meta">
                    <span class="hex">{{ c.hex }}</span>
                    <span class="pct">{{ c.percentage }}%</span>
                  </div>
                </div>
              }
            </div>
          </section>
        }

        <!-- CAD洞察 -->
        @if (cadResult) {
          <section class="section">
            <h3>CAD结构与空间洞察</h3>
            <div class="subsection">
              <h4>结构要素</h4>
              <ul>
                @for (el of cadResult.structuralElements; track el.type + el.position) {
                  <li>{{ el.type }} · 位置：{{ el.position }} · {{ el.changeable ? '可调整' : '不可调整' }}</li>
                }
              </ul>
            </div>
            <div class="subsection">
              <h4>空间指标</h4>
              <ul>
                @for (m of cadResult.spaceMetrics; track m.room) {
                  <li>{{ m.room }} · 比例：{{ m.ratio }} · 通道宽：{{ m.width }}</li>
                }
              </ul>
            </div>
            <div class="subsection">
              <h4>动线与规范</h4>
              <ul>
                @for (f of cadResult.flowMetrics; track f.area) {
                  <li>{{ f.area }} · 宽度：{{ f.width }} · {{ f.compliance ? '符合规范' : '需优化' }}</li>
                }
              </ul>
            </div>
          </section>
        }
      </div>
    </div>
  </div>
}