18307996893
/
openclaw-voc-skill


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442
							<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>香薰家居行业竞品与B端线索分析报告</title>
<!-- ===== Chart.js CDN ===== -->
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
<style>
/* ============================================================
   全局变量 & 色彩体系 — 轻奢深棕 + 暖金莫兰迪
   ============================================================ */
:root{
  --bg-deep:#1A110B;
  --bg-dark:#2D1810;
  --bg-mid:#3E2518;
  --brown:#5C3D2E;
  --brown-light:#8B6F47;
  --gold:#C5A55A;
  --gold-light:#D4B978;
  --cream:#FFF8F0;
  --cream-dim:#F5E6D3;
  --accent-rose:#C4868B;
  --accent-sage:#8FA68A;
  --accent-blue:#7E9BB5;
  --glass:rgba(255,248,240,0.06);
  --glass-border:rgba(197,165,90,0.18);
  --glass-hover:rgba(255,248,240,0.12);
  --shadow:0 8px 32px rgba(0,0,0,0.35);
  --radius:16px;
  --transition:all .4s cubic-bezier(.4,0,.2,1);
  --font:'Segoe UI','PingFang SC','Microsoft YaHei','Helvetica Neue',system-ui,sans-serif;
}
/* ============================================================
   Reset & 基础排版
   ============================================================ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{font-size:16px;scroll-behavior:smooth;overflow:hidden}
body{font-family:var(--font);background:var(--bg-deep);color:var(--cream);line-height:1.7;overflow:hidden;-webkit-font-smoothing:antialiased}
h1{font-size:clamp(2rem,5vw,3.6rem);font-weight:800;letter-spacing:-.02em;line-height:1.15}
h2{font-size:clamp(1.5rem,3.5vw,2.4rem);font-weight:700;letter-spacing:-.01em}
h3{font-size:clamp(1.1rem,2vw,1.5rem);font-weight:600}
a{color:var(--gold);text-decoration:none}
/* ============================================================
   幻灯片容器
   ============================================================ */
#slides-wrapper{position:relative;width:100vw;height:100vh;overflow:hidden}
.slide{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:clamp(24px,4vw,60px);opacity:0;visibility:hidden;transform:translateY(30px);transition:opacity .7s ease,transform .7s ease,visibility 0s .7s;z-index:0;overflow-y:auto}
.slide.active{opacity:1;visibility:visible;transform:translateY(0);transition:opacity .7s ease,transform .7s ease,visibility 0s 0s;z-index:1}
.slide-inner{width:100%;max-width:1200px;position:relative}
/* ============================================================
   页眉 & 页脚
   ============================================================ */
.slide-header{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:18px clamp(24px,4vw,60px);font-size:.8rem;color:var(--brown-light);letter-spacing:.05em;z-index:10;pointer-events:none}
.slide-footer{position:absolute;bottom:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:14px clamp(24px,4vw,60px);font-size:.75rem;color:rgba(139,111,71,.6);z-index:10;pointer-events:none}
.page-num{font-weight:600;color:var(--gold)}
/* ============================================================
   毛玻璃卡片（Glassmorphism）
   ============================================================ */
.glass-card{background:var(--glass);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--glass-border);border-radius:var(--radius);padding:clamp(18px,2.5vw,32px);transition:var(--transition);position:relative;overflow:hidden}
.glass-card::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(197,165,90,.08) 0%,transparent 60%);pointer-events:none;border-radius:inherit}
.glass-card:hover{background:var(--glass-hover);border-color:rgba(197,165,90,.35);transform:translateY(-2px);box-shadow:var(--shadow)}
/* ============================================================
   数据指标卡片
   ============================================================ */
.metric-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:clamp(12px,2vw,24px);width:100%}
.metric-card{text-align:center;padding:clamp(16px,2vw,28px)}
.metric-value{font-size:clamp(1.8rem,4vw,2.8rem);font-weight:800;color:var(--gold);margin-bottom:4px}
.metric-label{font-size:.85rem;color:var(--cream-dim);font-weight:400}
.metric-sub{font-size:.75rem;color:var(--brown-light);margin-top:2px}
/* ============================================================
   数据表格
   ============================================================ */
.data-table{width:100%;border-collapse:separate;border-spacing:0;font-size:clamp(.75rem,1.4vw,.9rem)}
.data-table thead th{background:rgba(197,165,90,.15);color:var(--gold-light);font-weight:600;padding:12px 14px;text-align:left;border-bottom:2px solid var(--gold);white-space:nowrap}
.data-table thead th:first-child{border-radius:var(--radius) 0 0 0}
.data-table thead th:last-child{border-radius:0 var(--radius) 0 0}
.data-table tbody td{padding:10px 14px;border-bottom:1px solid rgba(139,111,71,.15);transition:background .3s}
.data-table tbody tr:hover td{background:rgba(197,165,90,.06)}
.data-table tbody tr:last-child td:first-child{border-radius:0 0 0 var(--radius)}
.data-table tbody tr:last-child td:last-child{border-radius:0 0 var(--radius) 0}
/* ============================================================
   标签 / 徽章
   ============================================================ */
.badge{display:inline-block;padding:3px 10px;border-radius:20px;font-size:.72rem;font-weight:600;letter-spacing:.03em}
.badge-gold{background:rgba(197,165,90,.2);color:var(--gold-light);border:1px solid rgba(197,165,90,.3)}
.badge-rose{background:rgba(196,134,139,.15);color:var(--accent-rose);border:1px solid rgba(196,134,139,.25)}
.badge-sage{background:rgba(143,166,138,.15);color:var(--accent-sage);border:1px solid rgba(143,166,138,.25)}
.badge-blue{background:rgba(126,155,181,.15);color:var(--accent-blue);border:1px solid rgba(126,155,181,.25)}
/* ============================================================
   进度条 / 比例条
   ============================================================ */
.bar-row{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.bar-label{min-width:140px;font-size:.82rem;text-align:right;color:var(--cream-dim)}
.bar-track{flex:1;height:22px;background:rgba(255,248,240,.06);border-radius:11px;overflow:hidden;position:relative}
.bar-fill{height:100%;border-radius:11px;transition:width 1.5s cubic-bezier(.4,0,.2,1);position:relative}
.bar-fill::after{content:attr(data-value);position:absolute;right:8px;top:50%;transform:translateY(-50%);font-size:.7rem;font-weight:700;color:var(--bg-dark)}
/* ============================================================
   侧边导航
   ============================================================ */
#side-nav{position:fixed;right:clamp(10px,2vw,24px);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:12px;z-index:1000}
.nav-dot{width:12px;height:12px;border-radius:50%;border:2px solid var(--brown-light);background:transparent;cursor:pointer;transition:var(--transition);position:relative}
.nav-dot.active{background:var(--gold);border-color:var(--gold);box-shadow:0 0 12px rgba(197,165,90,.5)}
.nav-dot::after{content:attr(data-tip);position:absolute;right:22px;top:50%;transform:translateY(-50%);background:var(--bg-mid);color:var(--cream);padding:4px 12px;border-radius:8px;font-size:.72rem;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .3s}
.nav-dot:hover::after{opacity:1}
/* ============================================================
   全屏按钮
   ============================================================ */
#fs-btn{position:fixed;top:18px;right:clamp(10px,2vw,24px);z-index:1001;background:var(--glass);backdrop-filter:blur(10px);border:1px solid var(--glass-border);color:var(--gold);padding:6px 14px;border-radius:8px;cursor:pointer;font-size:.78rem;transition:var(--transition)}
#fs-btn:hover{background:var(--glass-hover);border-color:var(--gold)}
/* ============================================================
   封面粒子画布
   ============================================================ */
#particles-canvas{position:absolute;inset:0;z-index:0;pointer-events:none}
/* ============================================================
   图表容器
   ============================================================ */
.chart-wrap{position:relative;width:100%;max-height:320px;margin:12px 0}
.chart-wrap canvas{max-height:320px}
/* ============================================================
   两栏/三栏布局
   ============================================================ */
.cols-2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,28px)}
.cols-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:clamp(14px,2vw,24px)}
/* ============================================================
   分隔线 & 间距工具
   ============================================================ */
.divider{width:60px;height:3px;background:linear-gradient(90deg,var(--gold),transparent);border-radius:2px;margin:16px 0}
.mt-sm{margin-top:12px}.mt-md{margin-top:24px}.mt-lg{margin-top:36px}
.mb-sm{margin-bottom:12px}.mb-md{margin-bottom:24px}
.text-gold{color:var(--gold)}.text-rose{color:var(--accent-rose)}.text-sage{color:var(--accent-sage)}.text-blue{color:var(--accent-blue)}
.text-dim{color:var(--brown-light)}.text-sm{font-size:.82rem}.text-xs{font-size:.72rem}
.fw-700{font-weight:700}.fw-600{font-weight:600}
/* ============================================================
   封面页特殊样式
   ============================================================ */
.cover-content{position:relative;z-index:1;text-align:center}
.cover-brand{font-size:clamp(.9rem,1.8vw,1.2rem);color:var(--gold);letter-spacing:.3em;text-transform:uppercase;margin-bottom:16px;font-weight:600}
.cover-title{background:linear-gradient(135deg,var(--cream) 0%,var(--gold-light) 50%,var(--gold) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:20px}
.cover-sub{font-size:clamp(.9rem,1.6vw,1.15rem);color:var(--cream-dim);max-width:640px;margin:0 auto 32px}
.cover-date{font-size:.85rem;color:var(--brown-light);letter-spacing:.1em}
.cover-line{width:80px;height:1px;background:var(--gold);margin:24px auto}
/* ============================================================
   目录页
   ============================================================ */
.toc-list{list-style:none;counter-reset:toc}
.toc-item{counter-increment:toc;padding:14px 20px;border-bottom:1px solid rgba(139,111,71,.12);cursor:pointer;display:flex;align-items:center;gap:16px;transition:var(--transition);border-radius:8px}
.toc-item:hover{background:var(--glass-hover);padding-left:28px}
.toc-item::before{content:counter(toc,decimal-leading-zero);font-size:1.6rem;font-weight:800;color:var(--gold);min-width:40px}
.toc-item .toc-title{font-size:1.05rem;font-weight:600;color:var(--cream)}
.toc-item .toc-desc{font-size:.78rem;color:var(--brown-light);margin-top:2px}
/* ============================================================
   竞品卡片
   ============================================================ */
.competitor-card{padding:clamp(18px,2vw,28px)}
.competitor-card h3{color:var(--gold-light);margin-bottom:8px}
.comp-stat{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid rgba(139,111,71,.1);font-size:.85rem}
/* ============================================================
   时间轴
   ============================================================ */
.timeline{position:relative;padding-left:28px}
.timeline::before{content:'';position:absolute;left:8px;top:0;bottom:0;width:2px;background:linear-gradient(180deg,var(--gold),var(--brown-light),transparent)}
.timeline-item{position:relative;margin-bottom:24px;padding-left:20px}
.timeline-item::before{content:'';position:absolute;left:-24px;top:6px;width:12px;height:12px;border-radius:50%;background:var(--gold);border:2px solid var(--bg-dark);box-shadow:0 0 8px rgba(197,165,90,.4)}
.timeline-item h4{color:var(--gold-light);font-size:.95rem;margin-bottom:4px}
.timeline-item p{font-size:.82rem;color:var(--cream-dim)}
/* ============================================================
   VOC 痛点条
   ============================================================ */
.pain-bar{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.pain-icon{font-size:1.1rem;min-width:24px;text-align:center}
.pain-info{flex:1}
.pain-name{font-size:.85rem;font-weight:600;color:var(--cream);margin-bottom:3px}
.pain-pct{font-size:.75rem;color:var(--brown-light)}
.pain-track{width:100%;height:8px;background:rgba(255,248,240,.06);border-radius:4px;overflow:hidden}
.pain-fill{height:100%;border-radius:4px;transition:width 1.5s ease}
/* ============================================================
   动画关键帧
   ============================================================ */
@keyframes fadeInUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.6}}
.anim-up{animation:fadeInUp .8s ease both}
.anim-delay-1{animation-delay:.15s}.anim-delay-2{animation-delay:.3s}.anim-delay-3{animation-delay:.45s}.anim-delay-4{animation-delay:.6s}
/* 入场动画 */
.anim-enter{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.slide.active .anim-enter{opacity:1;transform:translateY(0)}
.slide.active .anim-enter.d1{transition-delay:.1s}
.slide.active .anim-enter.d2{transition-delay:.2s}
.slide.active .anim-enter.d3{transition-delay:.3s}
.slide.active .anim-enter.d4{transition-delay:.4s}
.slide.active .anim-enter.d5{transition-delay:.5s}
.slide.active .anim-enter.d6{transition-delay:.6s}
/* ============================================================
   Modal弹窗
   ============================================================ */
.modal-overlay{position:fixed;inset:0;background:rgba(10,6,3,.85);backdrop-filter:blur(12px);z-index:2000;display:none;align-items:center;justify-content:center;opacity:0;transition:opacity .4s ease}
.modal-overlay.show{display:flex;opacity:1}
.modal-box{background:linear-gradient(135deg,#1a110b,#0d0a08);border:1px solid rgba(197,165,90,.25);border-radius:16px;width:92vw;max-width:960px;max-height:88vh;overflow-y:auto;box-shadow:0 8px 48px rgba(0,0,0,.7);position:relative;animation:modalIn .4s ease}
@keyframes modalIn{from{opacity:0;transform:translateY(30px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
.modal-close{position:absolute;top:12px;right:16px;background:none;border:none;color:var(--cream-dim);font-size:1.4rem;cursor:pointer;z-index:10;transition:color .3s}
.modal-close:hover{color:var(--gold)}
.modal-header{padding:24px 28px 16px;border-bottom:1px solid rgba(197,165,90,.15)}
.modal-header h2{font-size:1.15rem;color:var(--gold);margin:0 0 6px}
.modal-header p{font-size:.8rem;color:var(--cream-dim);margin:0}
.modal-body{padding:20px 28px 28px}
/* ============================================================
   响应式
   ============================================================ */
@media(max-width:900px){
  .cols-2,.cols-3{grid-template-columns:1fr}
  .metric-grid{grid-template-columns:repeat(2,1fr)}
  #side-nav{right:6px;gap:8px}
  .nav-dot{width:9px;height:9px}
  .bar-label{min-width:100px;font-size:.75rem}
}
@media(max-width:600px){
  .metric-grid{grid-template-columns:1fr}
  .slide{padding:16px}
}
</style>
</head>
<body>

<!-- ===== 全屏按钮 ===== -->
<button id="fs-btn" title="全屏切换">⛶ 全屏</button>

<!-- ===== 侧边导航（由 JS 自动生成） ===== -->
<nav id="side-nav"></nav>

<!-- ===== 幻灯片容器 ===== -->
<div id="slides-wrapper">

<!-- ════════════════════════════════════════════
     SLIDE 0 — 封面
     ════════════════════════════════════════════ -->
<section class="slide active" id="slide-0">
  <canvas id="particles-canvas"></canvas>
  <div class="cover-content">
    <p class="cover-brand">HOME FRAGRANCE</p>
    <h1 class="cover-title">香薰家居行业竞品与<br>B端线索分析报告</h1>
    <div class="cover-line"></div>
    <p class="cover-sub">基于Amazon电商数据 · TikTok/Instagram社媒数据 · 4,200条用户评论VOC分析<br>覆盖4大核心品类 · 4大竞品品牌深度对标</p>
    <p class="cover-date">2026年3月 · AI Data Intelligence</p>
  </div>
  <div class="slide-footer"><span></span><span class="text-xs" style="opacity:.4">按 → 或滚轮翻页</span></div>
</section>

<!-- ════════════════════════════════════════════
     SLIDE 1 — 目录
     ════════════════════════════════════════════ -->
<section class="slide" id="slide-1">
  <div class="slide-header"><span>香薰家居行业竞品分析报告</span><span>目录</span></div>
  <div class="slide-inner" style="max-width:720px">
    <h2 class="text-gold mb-md" style="text-align:center">报告目录</h2>
    <div class="divider" style="margin:0 auto 28px"></div>
    <ul class="toc-list">
      <li class="toc-item" onclick="goSlide(2)"><div><div class="toc-title">核心执行摘要</div><div class="toc-desc">关键数据 · 核心结论 · 核心价值</div></div></li>
      <li class="toc-item" onclick="goSlide(3)"><div><div class="toc-title">香薰家居品类市场全景分析</div><div class="toc-desc">4大品类规模 · 增长趋势 · 价格带 · 品牌分布</div></div></li>
      <li class="toc-item" onclick="goSlide(4)"><div><div class="toc-title">核心竞品深度对标分析</div><div class="toc-desc">NEST New York · Paddywax · Vitruvi · P.F. Candle Co. 品牌拆解</div></div></li>
      <li class="toc-item" onclick="goSlide(5)"><div><div class="toc-title">全渠道用户VOC与需求洞察</div><div class="toc-desc">4,200条评论 · 痛点 · 喜爱点 · 使用场景</div></div></li>
      <li class="toc-item" onclick="goSlide(6)"><div><div class="toc-title">B端高价值线索与品类矩阵</div><div class="toc-desc">品类机会评估 · 社媒热度 · 优先级排序</div></div></li>
      <li class="toc-item" onclick="goSlide(7)"><div><div class="toc-title">市场拓展与落地执行建议</div><div class="toc-desc">短期·中期·长期分阶段策略</div></div></li>
      <li class="toc-item" onclick="goSlide(8)"><div><div class="toc-title">总结与展望</div><div class="toc-desc">核心机会点 · 行动优先级</div></div></li>
    </ul>
  </div>
  <div class="slide-footer"><span>香薰家居行业竞品分析报告</span><span class="page-num">01</span></div>
</section>

<!-- ════════════════════════════════════════════
     SLIDE 2 — 执行摘要
     ════════════════════════════════════════════ -->
<section class="slide" id="slide-2">
  <div class="slide-header"><span>香薰家居行业竞品分析报告</span><span>执行摘要</span></div>
  <div class="slide-inner">
    <h2 class="text-gold mb-sm">核心执行摘要</h2>
    <div class="divider"></div>
    <!-- 核心数据指标卡片 — 由 REPORT_DATA.metrics 注入 -->
    <div class="metric-grid mt-md mb-md" id="exec-metrics"></div>
    <!-- 核心结论 — 由 REPORT_DATA.coreFindings / coreValues 注入 -->
    <div class="cols-2">
      <div class="glass-card">
        <h3 class="text-gold mb-sm">📊 核心发现</h3>
        <ul id="core-findings" style="list-style:none;font-size:.85rem;color:var(--cream-dim)"></ul>
      </div>
      <div class="glass-card">
        <h3 class="text-gold mb-sm">💡 核心价值</h3>
        <ul id="core-values" style="list-style:none;font-size:.85rem;color:var(--cream-dim)"></ul>
      </div>
    </div>
  </div>
  <div class="slide-footer"><span>香薰家居行业竞品分析报告</span><span class="page-num">02</span></div>
</section>

<!-- ════════════════════════════════════════════
     SLIDE 3 — 市场全景
     ════════════════════════════════════════════ -->
<section class="slide" id="slide-3">
  <div class="slide-header"><span>香薰家居行业竞品分析报告</span><span>市场全景</span></div>
  <div class="slide-inner">
    <h2 class="text-gold mb-sm">香薰家居品类市场全景分析</h2>
    <div class="divider mb-md"></div>
    <div class="cols-2">
      <div class="glass-card">
        <h3 class="text-sm fw-600 mb-sm">Top100 周均销售额（美元）</h3>
        <div class="chart-wrap"><canvas id="chart-revenue"></canvas></div>
      </div>
      <div class="glass-card">
        <h3 class="text-sm fw-600 mb-sm">品类增长率（同比）</h3>
        <div class="chart-wrap"><canvas id="chart-growth"></canvas></div>
      </div>
    </div>
    <!-- 数据表格 — 由 REPORT_DATA.categoryTable 注入 -->
    <div class="glass-card mt-md" style="overflow-x:auto">
      <table class="data-table">
        <thead><tr>
          <th>品类</th><th>周均销量</th><th>周均销售额</th><th>均价</th><th>品牌数</th><th>增长率</th><th>中国卖家</th>
        </tr></thead>
        <tbody id="market-table-body"></tbody>
      </table>
    </div>
  </div>
  <div class="slide-footer"><span>香薰家居行业竞品分析报告</span><span class="page-num">03</span></div>
</section>

<!-- ════════════════════════════════════════════
     SLIDE 4 — 竞品对标
     ════════════════════════════════════════════ -->
<section class="slide" id="slide-4">
  <div class="slide-header"><span>香薰家居行业竞品分析报告</span><span>竞品对标</span></div>
  <div class="slide-inner">
    <h2 class="text-gold mb-sm">核心竞品深度对标分析</h2>
    <div class="divider mb-md"></div>
    <!-- 竞品卡片 — 由 REPORT_DATA.competitors 注入 -->
    <div class="cols-3" id="competitor-cards"></div>
    <!-- 雷达图 -->
    <div class="glass-card mt-md" style="max-width:480px;margin-left:auto;margin-right:auto">
      <h3 class="text-sm fw-600 mb-sm" style="text-align:center">竞品综合能力雷达图</h3>
      <div class="chart-wrap" style="max-height:260px"><canvas id="chart-radar"></canvas></div>
    </div>
  </div>
  <div class="slide-footer"><span>香薰家居行业竞品分析报告</span><span class="page-num">04</span></div>
</section>

<!-- ════════════════════════════════════════════
     SLIDE 5 — VOC 用户洞察
     ════════════════════════════════════════════ -->
<section class="slide" id="slide-5">
  <div class="slide-header"><span>香薰家居行业竞品分析报告</span><span>用户VOC</span></div>
  <div class="slide-inner">
    <h2 class="text-gold mb-sm">全渠道用户VOC与需求洞察</h2>
    <p class="text-dim text-sm mb-md">基于品类 Top 畅销产品 <strong class="text-gold" id="voc-review-count">0</strong> 条真实用户评论深度分析</p>
    <div class="cols-2">
      <!-- 左：痛点分析 -->
      <div class="glass-card">
        <h3 class="text-rose text-sm fw-600 mb-sm">🔴 用户核心痛点（差评Top5）</h3>
        <div id="pain-points-container"></div>
      </div>
      <!-- 右：喜爱点 + 场景 -->
      <div>
        <div class="glass-card mb-sm">
          <h3 class="text-sage text-sm fw-600 mb-sm">🟢 用户最爱亮点（好评Top5）</h3>
          <div id="highlights-container"></div>
        </div>
        <div class="glass-card">
          <h3 class="text-sm fw-600 mb-sm">📍 使用场景分布</h3>
          <div class="chart-wrap" style="max-height:180px"><canvas id="chart-scenes"></canvas></div>
        </div>
      </div>
    </div>
  </div>
  <div class="slide-footer"><span>香薰家居行业竞品分析报告</span><span class="page-num">05</span></div>
</section>

<!-- ════════════════════════════════════════════
     SLIDE 6 — B端线索 & 品类矩阵
     ════════════════════════════════════════════ -->
<section class="slide" id="slide-6">
  <div class="slide-header"><span>香薰家居行业竞品分析报告</span><span>线索清单</span></div>
  <div class="slide-inner">
    <h2 class="text-gold mb-sm">B端高价值线索与品类机会矩阵</h2>
    <div class="divider mb-md"></div>
    <!-- 品类机会矩阵 — 由 REPORT_DATA.categoryMatrix 注入 -->
    <div class="glass-card mb-md" style="overflow-x:auto">
      <h3 class="text-sm fw-600 mb-sm">品类综合机会评估</h3>
      <table class="data-table">
        <thead><tr><th>品类</th><th>市场规模</th><th>增长性</th><th>社媒热度</th><th>竞争强度</th><th>中国卖家</th><th>综合推荐</th></tr></thead>
        <tbody id="matrix-table-body"></tbody>
      </table>
    </div>
    <div class="cols-2">
      <div class="glass-card">
        <h3 class="text-sm fw-600 mb-sm">TikTok 社媒热度排名</h3>
        <div class="chart-wrap"><canvas id="chart-tiktok"></canvas></div>
      </div>
      <div class="glass-card">
        <h3 class="text-sm fw-600 mb-sm">季节性与要点</h3>
        <div id="seasonality-notes" style="font-size:.85rem;color:var(--cream-dim)"></div>
      </div>
    </div>
  </div>
  <div class="slide-footer"><span>香薰家居行业竞品分析报告</span><span class="page-num">06</span></div>
</section>

<!-- ════════════════════════════════════════════
     SLIDE 7 — 执行策略
     ════════════════════════════════════════════ -->
<section class="slide" id="slide-7">
  <div class="slide-header"><span>香薰家居行业竞品分析报告</span><span>执行策略</span></div>
  <div class="slide-inner">
    <h2 class="text-gold mb-sm">市场拓展与落地执行建议</h2>
    <div class="divider mb-md"></div>
    <!-- 短中长期策略 — 由 REPORT_DATA.strategy 注入 -->
    <div class="cols-3" id="strategy-columns"></div>
    <!-- VOC驱动的产品策略 -->
    <div class="glass-card mt-md">
      <h3 class="text-sm fw-600 mb-sm">🔬 VOC驱动的产品开发优先级</h3>
      <div id="voc-priorities" style="display:flex;flex-wrap:wrap;gap:12px;font-size:.82rem"></div>
    </div>
  </div>
  <div class="slide-footer"><span>香薰家居行业竞品分析报告</span><span class="page-num">07</span></div>
</section>

<!-- ════════════════════════════════════════════
     SLIDE 8 — 总结与展望
     ════════════════════════════════════════════ -->
<section class="slide" id="slide-8">
  <div class="slide-header"><span>香薰家居行业竞品分析报告</span><span>总结展望</span></div>
  <div class="slide-inner" style="max-width:900px">
    <h2 class="text-gold mb-sm" style="text-align:center">总结与展望</h2>
    <div class="divider" style="margin:0 auto 32px"></div>
    <!-- 由 REPORT_DATA.conclusion 注入 -->
    <div class="cols-2 mb-md" id="conclusion-top-cards"></div>
    <div class="glass-card mb-md" id="conclusion-differentiator" style="text-align:center;padding:28px"></div>
    <div class="glass-card" id="conclusion-actions" style="background:linear-gradient(135deg,rgba(197,165,90,.1),rgba(143,166,138,.08));border-color:rgba(197,165,90,.25)"></div>
  </div>
  <div class="slide-footer"><span>香薰家居行业竞品分析报告</span><span class="page-num">08</span></div>
</section>

<!-- ════════════════════════════════════════════
     SLIDE 9 — 致谢
     ════════════════════════════════════════════ -->
<section class="slide" id="slide-9">
  <div class="cover-content">
    <div class="cover-line" style="margin-bottom:32px"></div>
    <h2 style="font-size:clamp(1.6rem,3.5vw,2.6rem);background:linear-gradient(135deg,var(--cream),var(--gold-light));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:16px">感谢您的关注</h2>
    <p class="text-dim" style="font-size:1rem;max-width:520px;margin:0 auto 28px">期待与您携手，用AI-VOC系统共同开拓香薰家居市场新蓝海</p>
    <div class="cover-line"></div>
    <div style="margin-top:32px;font-size:.85rem;color:var(--brown-light)">
      <p>报告编制：AI-VOC 智能数据分析系统</p>
      <p>数据来源：Amazon Sorftime API · TikHub (TikTok & Instagram) · AI-VOC Engine</p>
      <p>数据时效：截至 2026年3月</p>
      <p style="margin-top:16px;font-size:.82rem;color:var(--gold)">📧 联系我们，获取专属VOC系统试用</p>
      <p style="margin-top:12px;font-size:.75rem;opacity:.6">本报告数据来自第三方API，仅供商业决策参考</p>
    </div>
  </div>
  <div class="slide-footer"><span>香薰家居行业竞品分析报告</span><span class="page-num">09</span></div>
</section>

</div><!-- /slides-wrapper -->

<!-- ===== Modal弹窗容器 ===== -->
<div class="modal-overlay" id="modal-overlay">
  <div class="modal-box">
    <button class="modal-close" id="modal-close">&times;</button>
    <div class="modal-header" id="modal-header"></div>
    <div class="modal-body" id="modal-body"></div>
  </div>
</div>

<!-- ============================================================
     REPORT DATA — 由编排引擎注入
     ============================================================ -->
<script>
/**
 * REPORT_DATA: 所有报告数据由 workflow Stage 7 组装后注入到此对象。
 * 模板中所有 DOM 操作均基于此数据驱动渲染。
 *
 * 结构说明：
 * - meta: 报告元信息
 * - metrics: 执行摘要指标卡片 [{value, prefix, suffix, label, sub}]
 * - coreFindings: 核心发现列表 [{text, highlight, highlightClass}]
 * - coreValues: 核心价值列表 [string]
 * - categories: 品类市场数据 [{name, weeklySales, weeklyRevenue, avgPrice, brands, growth, chinaRatio, highlight, revenueNum, growthNum}]
 * - competitors: 竞品数据 [{name, positioning, positionBadge, priceRange, igFollowers, tiktokFollowers, skuNote, strategyNote, pros, cons, radarData:[5]}]
 * - vocAnalysis: VOC分析 {totalReviews, painPoints:[{icon, name, pct, gradient, quote}], highlights:[{name, pct, color}], scenes:[{name, pct}]}
 * - categoryMatrix: 品类机会矩阵 [{name, marketSize, growth, socialHeat, competition, chinaRatio, recommendation, badgeClass}]
 * - tiktokHeat: TikTok热度 [{name, plays}]
 * - seasonalNotes: 季节性要点 [{icon, title, desc}]
 * - strategy: 执行策略 {shortTerm:[{title, desc}], midTerm:[{title, desc}], longTerm:[{title, desc}]}
 * - vocPriorities: VOC驱动优先级 [{text, badgeClass}]
 * - conclusion: 总结 {topCategory:{emoji, title, name, desc}, socialDividend:{emoji, title, name, desc}, differentiator:{title, subtitle, desc}, keyActions:[{emoji, title, desc}]}
 * - trendData: 趋势数据 {weeks:[], datasets:[{label, data, borderColor}]}
 */
const REPORT_DATA = {
    "metrics":  [
                    {
                        "value":  3750000,
                        "prefix":  "$",
                        "suffix":  "",
                        "label":  "品类月销售额",
                        "sub":  "美元/月（美国站）"
                    },
                    {
                        "value":  125000,
                        "prefix":  "",
                        "suffix":  "件",
                        "label":  "品类月销售量",
                        "sub":  "Reed Diffuser 主品类"
                    },
                    {
                        "value":  4200,
                        "prefix":  "",
                        "suffix":  "条",
                        "label":  "分析评论总量",
                        "sub":  "覆盖4大竞品品牌"
                    },
                    {
                        "value":  35,
                        "prefix":  "+",
                        "suffix":  "%",
                        "label":  "品类年增长率",
                        "sub":  "搜索量同比增速"
                    },
                    {
                        "value":  62,
                        "prefix":  "",
                        "suffix":  "%",
                        "label":  "中国卖家占比",
                        "sub":  "TOP100产品中"
                    },
                    {
                        "value":  29,
                        "prefix":  "$",
                        "suffix":  "",
                        "label":  "黄金价格带",
                        "sub":  "$24-$34 量利最优区间"
                    }
                ],
    "coreFindings":  [
                         {
                             "text":  "香薰家居品类处于高速成长期，搜索量同比增速35%，市场仍有较大进入空间",
                             "highlight":  "成长期+35%",
                             "highlightClass":  "text-sage"
                         },
                         {
                             "text":  "用户最大痛点是香味持续时间短（32.5%差评提及），亦是最强差异化突破口",
                             "highlight":  "香味持续短#1痛点",
                             "highlightClass":  "text-rose"
                         },
                         {
                             "text":  "TikTok品类话题播放量1.25亿次，对比评测视频互动率最高但产出最少",
                             "highlight":  "内容空缺机会",
                             "highlightClass":  "text-gold"
                         },
                         {
                             "text":  "黄金价格带$24-$34集中40%销量，均价$29.9可切入该价格带并保持42%毛利",
                             "highlight":  "$24-$34黄金带",
                             "highlightClass":  "text-gold"
                         },
                         {
                             "text":  "CR5=35.2%，市场竞争分散，非垄断格局，新品牌进入机会窗口仍然开放",
                             "highlight":  "CR5=35.2%低集中度",
                             "highlightClass":  "text-sage"
                         }
                     ],
    "coreValues":  [
                       "覆盖4大品类（Reed Diffuser/香薰蜡烛/精油扩香机/香薰油）全面市场扫描",
                       "深度拆解4家标杆竞品品牌定价策略、社媒布局与用户口碑",
                       "4,200条真实用户评论VOC提炼用户痛点、喜爱点与场景偏好",
                       "TikTok+Instagram双平台社媒热度与内容机会量化分析",
                       "B端品类机会矩阵 + 3阶段落地执行路径规划"
                   ],
    "categories":  [
                       {
                           "name":  "Reed Diffuser",
                           "weeklySales":  "3.2万件",
                           "weeklyRevenue":  "$96万",
                           "avgPrice":  "$29.9",
                           "brands":  "245",
                           "growth":  "+35%",
                           "chinaRatio":  "62%",
                           "highlight":  true,
                           "revenueNum":  960000,
                           "growthNum":  35
                       },
                       {
                           "name":  "Scented Candle",
                           "weeklySales":  "5.8万件",
                           "weeklyRevenue":  "$116万",
                           "avgPrice":  "$19.9",
                           "brands":  "380",
                           "growth":  "+18%",
                           "chinaRatio":  "45%",
                           "highlight":  false,
                           "revenueNum":  1160000,
                           "growthNum":  18
                       },
                       {
                           "name":  "Essential Oil Diffuser",
                           "weeklySales":  "2.1万件",
                           "weeklyRevenue":  "$84万",
                           "avgPrice":  "$39.9",
                           "brands":  "165",
                           "growth":  "+52%",
                           "chinaRatio":  "78%",
                           "highlight":  true,
                           "revenueNum":  840000,
                           "growthNum":  52
                       },
                       {
                           "name":  "Aroma Oil",
                           "weeklySales":  "1.5万件",
                           "weeklyRevenue":  "$45万",
                           "avgPrice":  "$29.5",
                           "brands":  "128",
                           "growth":  "-5%",
                           "chinaRatio":  "55%",
                           "highlight":  false,
                           "revenueNum":  450000,
                           "growthNum":  -5
                       }
                   ],
    "competitors":  [
                        {
                            "name":  "NEST New York",
                            "positioning":  "高端溢价",
                            "positionBadge":  "badge-gold",
                            "priceRange":  "$35-68",
                            "igFollowers":  "28万",
                            "tiktokFollowers":  "12.5万",
                            "skuNote":  "12款",
                            "strategyNote":  "礼品/奢华定位，限定礼盒套装为主",
                            "pros":  "✅ 品牌溢价强，礼品场景占比65%",
                            "cons":  "❌ 差评聚焦：价格偏高(22%)、持续时间短(18%)",
                            "radarData":  [
                                              92,
                                              88,
                                              85,
                                              75,
                                              55
                                          ]
                        },
                        {
                            "name":  "Paddywax",
                            "positioning":  "手工温馨",
                            "positionBadge":  "badge-sage",
                            "priceRange":  "$24-45",
                            "igFollowers":  "18万",
                            "tiktokFollowers":  "8.2万",
                            "skuNote":  "28款",
                            "strategyNote":  "DIY/手工叙事，多场景变体为主",
                            "pros":  "✅ SKU最丰富，覆盖客厅/卧室/浴室全场景",
                            "cons":  "❌ 差评聚焦：香味不持久(28%)、包装易碎(15%)",
                            "radarData":  [
                                              75,
                                              72,
                                              78,
                                              92,
                                              80
                                          ]
                        },
                        {
                            "name":  "Vitruvi",
                            "positioning":  "简约设计",
                            "positionBadge":  "badge-blue",
                            "priceRange":  "$42-85",
                            "igFollowers":  "35万",
                            "tiktokFollowers":  "5.6万",
                            "skuNote":  "8款",
                            "strategyNote":  "北欧极简美学，精油扩香机+香薰油套装",
                            "pros":  "✅ Instagram视觉最强，粉丝粘性高",
                            "cons":  "❌ 差评聚焦：价格昂贵(35%)、芦苇棒质量差(20%)",
                            "radarData":  [
                                              82,
                                              95,
                                              70,
                                              60,
                                              48
                                          ]
                        },
                        {
                            "name":  "P.F. Candle Co.",
                            "positioning":  "性价比",
                            "positionBadge":  "badge-rose",
                            "priceRange":  "$16-28",
                            "igFollowers":  "12万",
                            "tiktokFollowers":  "6.8万",
                            "skuNote":  "18款",
                            "strategyNote":  "中低价亲民定位，社区感强",
                            "pros":  "✅ 性价比最优，年轻用户群体增长快",
                            "cons":  "❌ 差评聚焦：香味较淡(30%)、持续时间短(25%)",
                            "radarData":  [
                                              60,
                                              58,
                                              65,
                                              80,
                                              95
                                          ]
                        }
                    ],
    "vocAnalysis":  {
                        "totalReviews":  4200,
                        "painPoints":  [
                                           {
                                               "icon":  "🌸",
                                               "name":  "香味持续时间短",
                                               "pct":  32,
                                               "gradient":  "linear-gradient(90deg,#C4868B,#a06066)",
                                               "quote":  "Scent completely fades after 2-3 days, very disappointing."
                                           },
                                           {
                                               "icon":  "🪵",
                                               "name":  "芦苇棒质量差",
                                               "pct":  24,
                                               "gradient":  "linear-gradient(90deg,#B97A5E,#8B5A42)",
                                               "quote":  "The reeds are too thin and snap easily when flipping."
                                           },
                                           {
                                               "icon":  "📦",
                                               "name":  "包装易碎/泄漏",
                                               "pct":  18,
                                               "gradient":  "linear-gradient(90deg,#C5A55A,#A07A32)",
                                               "quote":  "Arrived with the bottle cracked and oil leaked everywhere."
                                           },
                                           {
                                               "icon":  "💰",
                                               "name":  "价格偏高/性价比低",
                                               "pct":  14,
                                               "gradient":  "linear-gradient(90deg,#7E9BB5,#5A7895)",
                                               "quote":  "Too expensive for the small amount of oil you get."
                                           },
                                           {
                                               "icon":  "🌿",
                                               "name":  "香味过于浓烈/刺鼻",
                                               "pct":  10,
                                               "gradient":  "linear-gradient(90deg,#8FA68A,#6A826A)",
                                               "quote":  "The scent is overwhelming in a small room."
                                           }
                                       ],
                        "highlights":  [
                                           {
                                               "name":  "香味品质好/自然",
                                               "pct":  68,
                                               "color":  "#8FA68A"
                                           },
                                           {
                                               "name":  "外观精美/送礼合适",
                                               "pct":  62,
                                               "color":  "#C5A55A"
                                           },
                                           {
                                               "name":  "性价比高",
                                               "pct":  55,
                                               "color":  "#7E9BB5"
                                           },
                                           {
                                               "name":  "易用/即开即用",
                                               "pct":  48,
                                               "color":  "#D4B978"
                                           },
                                           {
                                               "name":  "多场景适用",
                                               "pct":  42,
                                               "color":  "#C4868B"
                                           }
                                       ],
                        "scenes":  [
                                       {
                                           "name":  "客厅日常",
                                           "pct":  38
                                       },
                                       {
                                           "name":  "卧室助眠",
                                           "pct":  24
                                       },
                                       {
                                           "name":  "送礼场景",
                                           "pct":  20
                                       },
                                       {
                                           "name":  "办公室",
                                           "pct":  12
                                       },
                                       {
                                           "name":  "浴室/卫生间",
                                           "pct":  6
                                       }
                                   ]
                    },
    "categoryMatrix":  [
                           {
                               "name":  "Reed Diffuser",
                               "marketSize":  "$375万/月",
                               "growth":  "⬆️ +35%",
                               "socialHeat":  "🔥🔥🔥 高",
                               "competition":  "⚡ 中",
                               "chinaRatio":  "62%",
                               "recommendation":  "优先布局",
                               "badgeClass":  "badge-sage",
                               "highlight":  true
                           },
                           {
                               "name":  "Essential Oil Diffuser",
                               "marketSize":  "$315万/月",
                               "growth":  "⬆️ +52%",
                               "socialHeat":  "🔥🔥 中高",
                               "competition":  "⚡⚡ 中高",
                               "chinaRatio":  "78%",
                               "recommendation":  "重点关注",
                               "badgeClass":  "badge-gold",
                               "highlight":  true
                           },
                           {
                               "name":  "Scented Candle",
                               "marketSize":  "$465万/月",
                               "growth":  "📊 +18%",
                               "socialHeat":  "🔥🔥 中",
                               "competition":  "⚡⚡⚡ 高",
                               "chinaRatio":  "45%",
                               "recommendation":  "差异化切入",
                               "badgeClass":  "badge-blue",
                               "highlight":  false
                           },
                           {
                               "name":  "Aroma Oil",
                               "marketSize":  "$180万/月",
                               "growth":  "📉 -5%",
                               "socialHeat":  "🔥 低",
                               "competition":  "⚡ 低",
                               "chinaRatio":  "55%",
                               "recommendation":  "谨慎观望",
                               "badgeClass":  "badge-rose",
                               "highlight":  false
                           }
                       ],
    "tiktokHeat":  [
                       {
                           "name":  "#reeeddiffuser",
                           "plays":  125000000
                       },
                       {
                           "name":  "#homefragrance",
                           "plays":  980000000
                       },
                       {
                           "name":  "#scentedcandle",
                           "plays":  2100000000
                       },
                       {
                           "name":  "#aromatherapy",
                           "plays":  650000000
                       },
                       {
                           "name":  "#homedecor",
                           "plays":  4800000000
                       }
                   ],
    "seasonalNotes":  [
                          {
                              "icon":  "🎄",
                              "title":  "Q4旺季 (11-12月)",
                              "desc":  "圣诞/新年送礼需求激增，销量约为日常2.5倍，需提前60天备货"
                          },
                          {
                              "icon":  "💝",
                              "title":  "情人节 (2月)",
                              "desc":  "礼品套装需求增长1.8倍，$30-50礼盒价格段最畅销"
                          },
                          {
                              "icon":  "🌸",
                              "title":  "母亲节 (5月)",
                              "desc":  "家居香薰作为送礼选择增长1.6倍，包装品质成决策关键因素"
                          },
                          {
                              "icon":  "🏠",
                              "title":  "全年刚需",
                              "desc":  "客厅日常+卧室助眠场景贡献62%基础销量，复购率约35%"
                          }
                      ],
    "strategy":  {
                     "shortTerm":  [
                                       {
                                           "title":  "Listing关键词优化",
                                           "desc":  "标题植入「long lasting」「30 days」解决#1痛点，Bullet前2条突出持续时间"
                                       },
                                       {
                                           "title":  "黄金价格带定价",
                                           "desc":  "定价$27.9-$32.9，避开价格战区间(\u003c$20)，保持42%+毛利率"
                                       },
                                       {
                                           "title":  "差评快速响应",
                                           "desc":  "建立差评72小时响应机制+免费补发芦苇棒，降低差评率至\u003c10%"
                                       },
                                       {
                                           "title":  "礼品套装开发",
                                           "desc":  "开发3-Pack/Gift Set变体，覆盖$45-60节日礼品价格带"
                                       }
                                   ],
                     "midTerm":  [
                                     {
                                         "title":  "PPC精准广告",
                                         "desc":  "主攻「reed diffuser long lasting」「home fragrance gift set」，ACOS目标\u003c28%"
                                     },
                                     {
                                         "title":  "TikTok内容布局",
                                         "desc":  "制作「不同房间香味推荐」对比评测视频，填补品类内容空缺"
                                     },
                                     {
                                         "title":  "配方技术升级",
                                         "desc":  "引入长效缓释技术，将香味持续从15天提升至30-45天，直接解决#1痛点"
                                     },
                                     {
                                         "title":  "KOL博主合作",
                                         "desc":  "联系5-8个家居/生活方式博主(10-50万粉丝)合作种草，预算$3000-5000/月"
                                     }
                                 ],
                     "longTerm":  [
                                      {
                                          "title":  "品牌IP建立",
                                          "desc":  "建立独特香调系列（如「城市灵感系列」），形成可延展的品牌故事"
                                      },
                                      {
                                          "title":  "全品类扩展",
                                          "desc":  "从Reed Diffuser切入，逐步扩展蜡烛/精油/扩香机，形成香薰生态"
                                      },
                                      {
                                          "title":  "B端渠道开拓",
                                          "desc":  "开发酒店/SPA/办公楼采购渠道，切入企业定制礼品市场"
                                      },
                                      {
                                          "title":  "DTC独立站布局",
                                          "desc":  "搭建品牌官网+订阅制模式，提升LTV并降低Amazon平台依赖"
                                      }
                                  ]
                 },
    "vocPriorities":  [
                          {
                              "text":  "🌸 香味持续性技术改良 (32.5%痛点)",
                              "badgeClass":  "badge-rose"
                          },
                          {
                              "text":  "🪵 芦苇棒材质升级 (24%痛点)",
                              "badgeClass":  "badge-rose"
                          },
                          {
                              "text":  "📦 包装防碎/防漏设计 (18%痛点)",
                              "badgeClass":  "badge-gold"
                          },
                          {
                              "text":  "🎁 礼品化包装设计",
                              "badgeClass":  "badge-gold"
                          },
                          {
                              "text":  "📱 TikTok对比评测内容制作",
                              "badgeClass":  "badge-blue"
                          },
                          {
                              "text":  "💡 Listing「持续时间」卖点强化",
                              "badgeClass":  "badge-sage"
                          },
                          {
                              "text":  "🏷️ $27.9-32.9 黄金价格带定价",
                              "badgeClass":  "badge-sage"
                          },
                          {
                              "text":  "🤝 家居KOL博主合作种草",
                              "badgeClass":  "badge-blue"
                          }
                      ],
    "conclusion":  {
                       "topCategory":  {
                                           "emoji":  "🏆",
                                           "title":  "最优先布局品类",
                                           "name":  "Reed Diffuser",
                                           "desc":  "高增长(+35%) + 中等竞争 + 高社媒热度 + 明确差异化突破口"
                                       },
                       "socialDividend":  {
                                              "emoji":  "📱",
                                              "title":  "社媒最大红利",
                                              "name":  "TikTok对比评测",
                                              "desc":  "品类内容最稀缺，1.25亿话题播放，对比视频互动率最高却几乎无品牌供给"
                                          },
                       "differentiator":  {
                                              "title":  "核心差异化突破口",
                                              "subtitle":  "「长效缓释技术」+ 「礼品化场景」",
                                              "desc":  "长效持续解决32.5%最大用户痛点，礼品化覆盖圣诞/情人节/母亲节全年旺季，两项组合建立技术+场景双护城河"
                                          },
                       "keyActions":  [
                                          {
                                              "emoji":  "🎯",
                                              "title":  "精准卡位",
                                              "desc":  "Reed Diffuser黄金价格带$27.9-32.9"
                                          },
                                          {
                                              "emoji":  "📝",
                                              "title":  "VOC驱动",
                                              "desc":  "「持续30天+」成为核心卖点标签"
                                          },
                                          {
                                              "emoji":  "📱",
                                              "title":  "社媒种草",
                                              "desc":  "TikTok对比评测 + IG生活方式内容"
                                          }
                                      ]
                   }
} {};
</script>

<!-- ============================================================
     JavaScript — 导航 · 动画 · 数据驱动渲染 · 图表
     ============================================================ -->
<script>
/* ===== 全局状态 ===== */
let currentSlide = 0;
const totalSlides = document.querySelectorAll('.slide').length;
let isTransitioning = false;

/* ===== 自动生成侧边导航 ===== */
(function buildNav(){
  const tips = ['封面','目录','执行摘要','市场全景','竞品对标','用户VOC','线索清单','执行策略','总结展望','致谢'];
  const nav = document.getElementById('side-nav');
  tips.forEach((tip,i) => {
    const d = document.createElement('div');
    d.className = 'nav-dot' + (i===0?' active':'');
    d.dataset.tip = tip;
    d.dataset.slide = i;
    d.addEventListener('click', () => goSlide(i));
    nav.appendChild(d);
  });
})();
const dots = document.querySelectorAll('.nav-dot');

/* ===== 幻灯片切换 ===== */
function goSlide(n) {
  if (isTransitioning || n === currentSlide || n < 0 || n >= totalSlides) return;
  isTransitioning = true;
  const slides = document.querySelectorAll('.slide');
  slides[currentSlide].classList.remove('active');
  slides[n].classList.add('active');
  dots.forEach((d, i) => d.classList.toggle('active', i === n));
  currentSlide = n;
  triggerSlideAnimations(n);
  setTimeout(() => { isTransitioning = false; }, 750);
}
function nextSlide() { goSlide(currentSlide + 1); }
function prevSlide() { goSlide(currentSlide - 1); }

/* ===== 弹窗检测 ===== */
function isModalOpen() { return document.getElementById('modal-overlay').classList.contains('show'); }

/* ===== 键盘事件 ===== */
document.addEventListener('keydown', e => {
  if (isModalOpen()) return;
  if (e.key === 'ArrowRight' || e.key === ' ' || e.key === 'PageDown') { e.preventDefault(); nextSlide(); }
  else if (e.key === 'ArrowLeft' || e.key === 'PageUp') { e.preventDefault(); prevSlide(); }
  else if (e.key === 'Home') { e.preventDefault(); goSlide(0); }
  else if (e.key === 'End') { e.preventDefault(); goSlide(totalSlides - 1); }
});

/* ===== 鼠标滚轮 ===== */
let wheelTimeout = 0;
document.addEventListener('wheel', e => {
  if (isModalOpen()) return;
  e.preventDefault();
  const now = Date.now();
  if (now - wheelTimeout < 800) return;
  wheelTimeout = now;
  e.deltaY > 0 ? nextSlide() : prevSlide();
}, { passive: false });

/* ===== 触屏滑动 ===== */
let touchStartY = 0, touchStartX = 0;
document.addEventListener('touchstart', e => { touchStartY = e.touches[0].clientY; touchStartX = e.touches[0].clientX; });
document.addEventListener('touchend', e => {
  if (isModalOpen()) return;
  const dy = e.changedTouches[0].clientY - touchStartY;
  const dx = e.changedTouches[0].clientX - touchStartX;
  if (Math.abs(dy) > Math.abs(dx) && Math.abs(dy) > 50) { dy < 0 ? nextSlide() : prevSlide(); }
  else if (Math.abs(dx) > 50) { dx < 0 ? nextSlide() : prevSlide(); }
});

/* ===== 全屏 ===== */
document.getElementById('fs-btn').addEventListener('click', () => {
  if (!document.fullscreenElement) document.documentElement.requestFullscreen().catch(() => {});
  else document.exitFullscreen();
});

/* ===== 数字递增动画 ===== */
function animateCounters(slideEl) {
  slideEl.querySelectorAll('.metric-value[data-count]').forEach(el => {
    const target = +el.dataset.count;
    const prefix = el.dataset.prefix || '';
    const suffix = el.dataset.suffix || '';
    const duration = 1800;
    const start = performance.now();
    const format = n => {
      if (n >= 1e6) return (n / 1e6).toFixed(1) + 'M';
      if (n >= 1e3) return (n / 1e3).toFixed(n >= 1e4 ? 0 : 1) + 'K';
      return n.toLocaleString();
    };
    function step(now) {
      const p = Math.min((now - start) / duration, 1);
      const ease = 1 - Math.pow(1 - p, 3);
      el.textContent = prefix + format(Math.round(target * ease)) + suffix;
      if (p < 1) requestAnimationFrame(step);
    }
    requestAnimationFrame(step);
  });
}

/* ===== 进度条动画 ===== */
function animateBars(slideEl) {
  slideEl.querySelectorAll('.bar-fill[data-target]').forEach(el => {
    setTimeout(() => { el.style.width = el.dataset.target + '%'; }, 200);
  });
  slideEl.querySelectorAll('.pain-fill[data-target]').forEach(el => {
    setTimeout(() => {
      el.style.width = (el.dataset.target / 35 * 100) + '%';
      if (el.dataset.bg) el.style.background = el.dataset.bg;
    }, 200);
  });
}

/* ===== 页面动画触发器 ===== */
const animatedSlides = new Set();
function triggerSlideAnimations(n) {
  const slideEl = document.getElementById('slide-' + n);
  if (!slideEl) return;
  if (!animatedSlides.has(n)) {
    animatedSlides.add(n);
    animateCounters(slideEl);
    animateBars(slideEl);
    initChartsForSlide(n);
  }
}

/* ============================================================
   Chart.js 全局配置
   ============================================================ */
const chartInstances = {};
const chartFontColor = '#F5E6D3';
const chartGridColor = 'rgba(139,111,71,0.15)';
const PALETTE = ['rgba(197,165,90,0.7)','rgba(143,166,138,0.65)','rgba(196,134,139,0.6)','rgba(126,155,181,0.55)','rgba(212,185,120,0.5)','rgba(139,111,71,0.4)'];
const PALETTE_BORDER = ['#C5A55A','#8FA68A','#C4868B','#7E9BB5','#D4B978','#8B6F47'];

Chart.defaults.color = chartFontColor;
Chart.defaults.font.family = "'Segoe UI','PingFang SC','Microsoft YaHei',sans-serif";
Chart.defaults.font.size = 12;

function initChartsForSlide(n) {
  if (n === 3) initMarketCharts();
  if (n === 4) initRadarChart();
  if (n === 5) initScenesChart();
  if (n === 6) initTiktokChart();
}

/* --- 市场全景图表 --- */
function initMarketCharts() {
  if (chartInstances.revenue || !REPORT_DATA.categories) return;
  const cats = REPORT_DATA.categories;
  const labels = cats.map(c => c.name);
  const revenueData = cats.map(c => c.revenueNum);
  chartInstances.revenue = new Chart(document.getElementById('chart-revenue'), {
    type: 'bar',
    data: { labels, datasets: [{ data: revenueData, backgroundColor: PALETTE.slice(0, cats.length), borderColor: PALETTE_BORDER.slice(0, cats.length), borderWidth: 1, borderRadius: 6, maxBarThickness: 52 }] },
    options: {
      responsive: true, maintainAspectRatio: false,
      plugins: { legend: { display: false }, tooltip: { callbacks: { label: ctx => '$' + (ctx.raw / 1e6).toFixed(1) + 'M / 周' } } },
      scales: { y: { ticks: { callback: v => '$' + (v/1e6).toFixed(0) + 'M' }, grid: { color: chartGridColor } }, x: { grid: { display: false } } },
      animation: { duration: 1200, easing: 'easeOutQuart' }
    }
  });

  const growthSorted = [...cats].sort((a,b) => b.growthNum - a.growthNum);
  chartInstances.growth = new Chart(document.getElementById('chart-growth'), {
    type: 'bar',
    data: {
      labels: growthSorted.map(c => c.name),
      datasets: [{ data: growthSorted.map(c => c.growthNum),
        backgroundColor: growthSorted.map(c => c.growthNum > 50 ? 'rgba(143,166,138,0.7)' : c.growthNum > 0 ? 'rgba(197,165,90,0.6)' : 'rgba(196,134,139,0.5)'),
        borderColor: growthSorted.map(c => c.growthNum > 50 ? '#8FA68A' : c.growthNum > 0 ? '#C5A55A' : '#C4868B'),
        borderWidth: 1, borderRadius: 6, maxBarThickness: 52 }]
    },
    options: {
      indexAxis: 'y', responsive: true, maintainAspectRatio: false,
      plugins: { legend: { display: false }, tooltip: { callbacks: { label: ctx => (ctx.raw > 0 ? '+' : '') + ctx.raw + '%' } } },
      scales: { x: { ticks: { callback: v => (v > 0 ? '+' : '') + v + '%' }, grid: { color: chartGridColor } }, y: { grid: { display: false } } },
      animation: { duration: 1200, easing: 'easeOutQuart' }
    }
  });
}

/* --- 竞品雷达图 --- */
function initRadarChart() {
  if (chartInstances.radar || !REPORT_DATA.competitors) return;
  const comps = REPORT_DATA.competitors;
  const radarLabels = ['品牌知名度','社媒粉丝','内容质量','产品线宽度','价格竞争力'];
  const colors = ['#C5A55A','#8FA68A','#C4868B','#7E9BB5','#D4B978'];
  const bgColors = ['rgba(197,165,90,0.15)','rgba(143,166,138,0.12)','rgba(196,134,139,0.1)','rgba(126,155,181,0.1)','rgba(212,185,120,0.1)'];
  chartInstances.radar = new Chart(document.getElementById('chart-radar'), {
    type: 'radar',
    data: {
      labels: radarLabels,
      datasets: comps.map((c,i) => ({
        label: c.name, data: c.radarData || [50,50,50,50,50],
        borderColor: colors[i%colors.length], backgroundColor: bgColors[i%bgColors.length],
        pointBackgroundColor: colors[i%colors.length], borderWidth: 2
      }))
    },
    options: {
      responsive: true, maintainAspectRatio: false,
      scales: { r: { min: 0, max: 100, ticks: { stepSize: 25, display: false }, grid: { color: chartGridColor }, pointLabels: { font: { size: 11 } }, angleLines: { color: chartGridColor } } },
      plugins: { legend: { position: 'bottom', labels: { boxWidth: 12, padding: 14, font: { size: 11 } } } },
      animation: { duration: 1200 }
    }
  });
}

/* --- 使用场景饼图 --- */
function initScenesChart() {
  if (chartInstances.scenes || !REPORT_DATA.vocAnalysis) return;
  const scenes = REPORT_DATA.vocAnalysis.scenes;
  chartInstances.scenes = new Chart(document.getElementById('chart-scenes'), {
    type: 'doughnut',
    data: {
      labels: scenes.map(s => s.name + ' ' + s.pct + '%'),
      datasets: [{ data: scenes.map(s => s.pct), backgroundColor: PALETTE.slice(0, scenes.length), borderColor: 'rgba(26,17,11,0.6)', borderWidth: 2 }]
    },
    options: {
      responsive: true, maintainAspectRatio: false, cutout: '55%',
      plugins: { legend: { position: 'right', labels: { boxWidth: 10, padding: 8, font: { size: 10 } } } },
      animation: { duration: 1200 }
    }
  });
}

/* --- TikTok热度图表 --- */
function initTiktokChart() {
  if (chartInstances.tiktok || !REPORT_DATA.tiktokHeat) return;
  const tt = REPORT_DATA.tiktokHeat;
  chartInstances.tiktok = new Chart(document.getElementById('chart-tiktok'), {
    type: 'bar',
    data: {
      labels: tt.map(t => t.name),
      datasets: [{ label: '播放量', data: tt.map(t => t.plays),
        backgroundColor: PALETTE.slice(0, tt.length), borderColor: PALETTE_BORDER.slice(0, tt.length),
        borderWidth: 1, borderRadius: 6, maxBarThickness: 48 }]
    },
    options: {
      responsive: true, maintainAspectRatio: false,
      plugins: { legend: { display: false }, tooltip: { callbacks: { label: ctx => (ctx.raw / 1e6).toFixed(1) + 'M 播放' } } },
      scales: { y: { ticks: { callback: v => (v/1e6).toFixed(0) + 'M' }, grid: { color: chartGridColor } }, x: { grid: { display: false } } },
      animation: { duration: 1200, easing: 'easeOutQuart' }
    }
  });
}

/* ============================================================
   数据驱动 DOM 渲染
   ============================================================ */
function renderReport() {
  const D = REPORT_DATA;
  if (!D || !D.categories) { console.warn('REPORT_DATA 未注入'); return; }

  // --- Slide 2: 执行摘要 ---
  if (D.metrics) {
    document.getElementById('exec-metrics').innerHTML = D.metrics.map(m =>
      `<div class="glass-card metric-card"><div class="metric-value" data-count="${m.value}" data-prefix="${m.prefix||''}" data-suffix="${m.suffix||''}">${m.prefix||''}0${m.suffix||''}</div><div class="metric-label">${m.label}</div><div class="metric-sub">${m.sub}</div></div>`
    ).join('');
  }
  if (D.coreFindings) {
    document.getElementById('core-findings').innerHTML = D.coreFindings.map(f =>
      `<li style="margin-bottom:8px">• <strong class="${f.highlightClass||'text-gold'}">${f.highlight||''}</strong> ${f.text}</li>`
    ).join('');
  }
  if (D.coreValues) {
    document.getElementById('core-values').innerHTML = D.coreValues.map(v =>
      `<li style="margin-bottom:8px">• ${v}</li>`
    ).join('');
  }

  // --- Slide 3: 市场全景表格 ---
  if (D.categories) {
    document.getElementById('market-table-body').innerHTML = D.categories.map(c => {
      const growthClass = c.growthNum > 30 ? 'text-sage fw-700' : c.growthNum > 0 ? 'text-sage' : 'text-rose';
      const chinaClass = c.chinaRatioNum > 70 ? 'text-rose fw-600' : '';
      return `<tr><td class="fw-600 ${c.highlight?'text-gold':''}">${c.name}${c.highlight?' ⭐':''}</td><td>${c.weeklySales}</td><td>${c.weeklyRevenue}</td><td>${c.avgPrice}</td><td>${c.brands}</td><td class="${growthClass}">${c.growth}</td><td class="${chinaClass}">${c.chinaRatio}</td></tr>`;
    }).join('');
  }

  // --- Slide 4: 竞品卡片 ---
  if (D.competitors) {
    document.getElementById('competitor-cards').innerHTML = D.competitors.map(c => `
      <div class="glass-card competitor-card">
        <span class="badge ${c.positionBadge||'badge-gold'} mb-sm" style="display:inline-block">${c.positioning}</span>
        <h3>${c.name}</h3>
        <p class="text-xs text-dim mb-sm">${c.priceRange||''}</p>
        <div class="comp-stat"><span>Instagram</span><span class="fw-700 text-gold">${c.igFollowers||'—'}</span></div>
        <div class="comp-stat"><span>TikTok</span><span class="fw-600">${c.tiktokFollowers||'—'}</span></div>
        <div class="comp-stat"><span>Amazon SKU</span><span>${c.skuNote||'—'}</span></div>
        <div class="comp-stat"><span>策略</span><span class="text-xs">${c.strategyNote||'—'}</span></div>
        <p class="text-xs mt-sm text-dim">${c.pros||''}<br>${c.cons||''}</p>
      </div>
    `).join('');
  }

  // --- Slide 5: VOC ---
  if (D.vocAnalysis) {
    const voc = D.vocAnalysis;
    document.getElementById('voc-review-count').textContent = voc.totalReviews + '条';
    document.getElementById('pain-points-container').innerHTML = voc.painPoints.map(p =>
      `<div class="pain-bar"><div class="pain-icon">${p.icon}</div><div class="pain-info"><div class="pain-name">${p.name} <span class="badge badge-rose">${p.pct}%</span></div><div class="pain-track"><div class="pain-fill" style="width:0%" data-target="${p.pct}" data-bg="${p.gradient}"></div></div>${p.quote?`<div class="pain-pct">"${p.quote}"</div>`:''}</div></div>`
    ).join('');
    document.getElementById('highlights-container').innerHTML = voc.highlights.map(h =>
      `<div class="bar-row"><span class="bar-label">${h.name}</span><div class="bar-track"><div class="bar-fill" style="width:0%;background:${h.color}" data-target="${h.pct}" data-value="${h.pct}%"></div></div></div>`
    ).join('');
  }

  // --- Slide 6: 品类矩阵 ---
  if (D.categoryMatrix) {
    document.getElementById('matrix-table-body').innerHTML = D.categoryMatrix.map(c =>
      `<tr><td class="fw-600 ${c.highlight?'text-gold':''}">${c.name}</td><td>${c.marketSize}</td><td>${c.growth}</td><td>${c.socialHeat}</td><td>${c.competition}</td><td>${c.chinaRatio}</td><td><span class="badge ${c.badgeClass||'badge-gold'}">${c.recommendation}</span></td></tr>`
    ).join('');
  }
  if (D.seasonalNotes) {
    document.getElementById('seasonality-notes').innerHTML = D.seasonalNotes.map(s =>
      `<div style="display:flex;align-items:center;gap:8px;margin-bottom:10px"><span style="font-size:1.4rem">${s.icon}</span><div><strong class="text-gold">${s.title}</strong><br>${s.desc}</div></div>`
    ).join('');
  }

  // --- Slide 7: 执行策略 ---
  if (D.strategy) {
    const phases = [
      { key: 'shortTerm', label: '短期 1-3个月', badge: 'badge-sage' },
      { key: 'midTerm', label: '中期 3-6个月', badge: 'badge-gold' },
      { key: 'longTerm', label: '长期 6-12个月', badge: 'badge-blue' }
    ];
    document.getElementById('strategy-columns').innerHTML = phases.map(p => `
      <div class="glass-card">
        <span class="badge ${p.badge} mb-sm" style="display:inline-block">${p.label}</span>
        <div class="timeline mt-sm">
          ${(D.strategy[p.key]||[]).map(item => `<div class="timeline-item"><h4>${item.title}</h4><p>${item.desc}</p></div>`).join('')}
        </div>
      </div>
    `).join('');
  }
  if (D.vocPriorities) {
    document.getElementById('voc-priorities').innerHTML = D.vocPriorities.map(p =>
      `<span class="badge ${p.badgeClass||'badge-rose'}">${p.text}</span>`
    ).join('');
  }

  // --- Slide 8: 总结 ---
  if (D.conclusion) {
    const con = D.conclusion;
    document.getElementById('conclusion-top-cards').innerHTML = `
      <div class="glass-card" style="text-align:center;padding:32px 24px"><div style="font-size:2.4rem;margin-bottom:8px">${con.topCategory.emoji}</div><h3 class="text-gold mb-sm">${con.topCategory.title}</h3><p class="text-sm"><strong>${con.topCategory.name}</strong></p><p class="text-xs text-dim mt-sm">${con.topCategory.desc}</p></div>
      <div class="glass-card" style="text-align:center;padding:32px 24px"><div style="font-size:2.4rem;margin-bottom:8px">${con.socialDividend.emoji}</div><h3 class="text-gold mb-sm">${con.socialDividend.title}</h3><p class="text-sm"><strong>${con.socialDividend.name}</strong></p><p class="text-xs text-dim mt-sm">${con.socialDividend.desc}</p></div>`;
    document.getElementById('conclusion-differentiator').innerHTML =
      `<h3 class="text-gold mb-sm">${con.differentiator.title}</h3><p style="font-size:1.15rem;font-weight:600;color:var(--cream)">${con.differentiator.subtitle}</p><p class="text-sm text-dim mt-sm">${con.differentiator.desc}</p>`;
    document.getElementById('conclusion-actions').innerHTML =
      `<h3 class="text-sm fw-600 mb-sm" style="text-align:center">✅ 三大关键行动</h3><div style="display:grid;grid-template-columns:repeat(3,1fr);gap:16px;text-align:center;font-size:.85rem">${con.keyActions.map(a => `<div><div style="font-size:1.6rem;margin-bottom:4px">${a.emoji}</div><strong>${a.title}</strong><br><span class="text-xs text-dim">${a.desc}</span></div>`).join('')}</div>`;
  }
}

/* ============================================================
   封面粒子效果
   ============================================================ */
function initParticles() {
  const canvas = document.getElementById('particles-canvas');
  if (!canvas) return;
  const ctx = canvas.getContext('2d');
  let w, h, particles = [];
  function resize() { w = canvas.width = window.innerWidth; h = canvas.height = window.innerHeight; }
  resize();
  window.addEventListener('resize', resize);
  for (let i = 0; i < 60; i++) {
    particles.push({
      x: Math.random() * w, y: Math.random() * h,
      r: Math.random() * 2 + 0.5,
      dx: (Math.random() - 0.5) * 0.3, dy: (Math.random() - 0.5) * 0.2,
      alpha: Math.random() * 0.4 + 0.1,
      color: Math.random() > 0.5 ? '197,165,90' : '212,185,120'
    });
  }
  function draw() {
    ctx.clearRect(0, 0, w, h);
    const grd = ctx.createRadialGradient(w*.5, h*.4, 0, w*.5, h*.4, w*.6);
    grd.addColorStop(0, 'rgba(92,61,46,0.12)');
    grd.addColorStop(0.5, 'rgba(45,24,16,0.06)');
    grd.addColorStop(1, 'transparent');
    ctx.fillStyle = grd; ctx.fillRect(0, 0, w, h);
    particles.forEach(p => {
      ctx.beginPath(); ctx.arc(p.x, p.y, p.r, 0, Math.PI*2);
      ctx.fillStyle = `rgba(${p.color},${p.alpha})`; ctx.fill();
      p.x += p.dx; p.y += p.dy;
      if (p.x<0||p.x>w) p.dx *= -1;
      if (p.y<0||p.y>h) p.dy *= -1;
      p.alpha += (Math.random()-.5)*.01;
      p.alpha = Math.max(.05, Math.min(.5, p.alpha));
    });
    for (let i=0; i<particles.length; i++) {
      for (let j=i+1; j<particles.length; j++) {
        const dx=particles[i].x-particles[j].x, dy=particles[i].y-particles[j].y;
        const dist = Math.sqrt(dx*dx+dy*dy);
        if (dist<150) { ctx.beginPath(); ctx.moveTo(particles[i].x,particles[i].y); ctx.lineTo(particles[j].x,particles[j].y); ctx.strokeStyle=`rgba(197,165,90,${.06*(1-dist/150)})`; ctx.lineWidth=.5; ctx.stroke(); }
      }
    }
    requestAnimationFrame(draw);
  }
  draw();
}

/* ============================================================
   Modal 弹窗系统
   ============================================================ */
const modalOverlay = document.getElementById('modal-overlay');
const modalHeader  = document.getElementById('modal-header');
const modalBody    = document.getElementById('modal-body');
function openModal(headerHTML, bodyHTML) {
  modalHeader.innerHTML = headerHTML;
  modalBody.innerHTML = bodyHTML;
  modalOverlay.style.display = 'flex';
  requestAnimationFrame(() => modalOverlay.classList.add('show'));
}
function closeModal() {
  modalOverlay.classList.remove('show');
  setTimeout(() => { modalOverlay.style.display = 'none'; }, 350);
}
document.getElementById('modal-close').addEventListener('click', closeModal);
modalOverlay.addEventListener('click', e => { if(e.target===modalOverlay) closeModal(); });
document.addEventListener('keydown', e => { if(e.key==='Escape' && modalOverlay.classList.contains('show')) closeModal(); });

/* ===== 初始化 ===== */
renderReport();
initParticles();
triggerSlideAnimations(0);
</script>
</body>
</html>