<!--
  Version: 1.0.41
  Changelog:
  - 1.0.1: 处理完成后的概览区域，提升各分析图表配色对比度与区分度，并集中管理调色板。
  - 1.0.2: 处理完成后仅显示概览区域，删除表格区域与相关代码。
  - 1.0.3: 修复"周度目标总量走势"在多年份数据下 X 轴月份刻度仅显示第一年的问题。
  - 1.0.4: 重新编排概览图表阅读顺序；省份排行改为单独一排；优化概览区块布局。
  - 1.0.5: 概览区新增重点KPI卡片；周度趋势X轴年份换行；月度分布均值虚线标注数值；"目标类型占比"新增排行图并排展示。
  - 1.0.6: KPI新增"有计划月"；周度趋势年份第二行居中；月度分布增加平均值图例；热力图显示全部省份；各类型周度趋势补齐周刻度。
  - 1.0.7: KPI卡片文字统一为黑色；月度分布改为整行展示；删除"目标类型排行"图表。
  - 1.0.8: 月度分布图表宽度与统计区域对齐；目标类型占比改为条形图并整行展示。
  - 1.0.9: 各图表移除辅助网格线；周度趋势平均值虚线数值移至右轴。
  - 1.0.10: 全局字体调整为微软雅黑。
  - 1.0.11: 统一所有字体为微软雅黑（包含原等宽字体变量）。
  - 1.0.12: UI 视觉升级：沉浸式背景层次、卡片质感、按钮/表单交互态与可访问性 focus 样式。
  - 1.0.13: 处理结果区域卡片/图表容器改为透明无边框（更沉浸），并保持文字与内容清晰。
  - 1.0.14: 处理结果区域去掉重复图表标题（保留区块标题），并进一步弱化 KPI 小字层级。
  - 1.0.15: 处理结果区域排版优化：图表/标题/图例对齐与间距统一，整体更整齐优雅。
  - 1.0.16: 图表标题行合并：图例/说明与标题同一行，隐藏外层区块标题以节省空间并统一样式。
  - 1.0.17: 标题行进一步对齐：标题/说明/图例三列同一行网格排布，样式一致并更紧凑。
  - 1.0.18: 悬浮提示框内容格式化：统一标题/键值对布局与间距，提示信息更整齐清晰。
  - 1.0.19: 增加浏览器标签图标（favicon），简约图表风格并与当前项目视觉保持一致。
  - 1.0.20: UI 紧致感与沉浸感升级：优化色彩系统、增强动画过渡、提升交互反馈、改进响应式细节。
  - 1.0.21: 图表分析区域宽度统一优化：所有图表区域使用一致的 .one-col 布局，提升视觉协调性。
  - 1.0.22: 深色主题沉浸式视觉升级：全新配色系统、动态渐变背景、增强卡片质感、改进交互反馈。
  - 1.0.23: 添加亮色/暗色双主题支持：主题切换按钮、localStorage记忆、自动图表重绘。
  - 1.0.24: 布局系统优化：引入间距变量系统、统一视觉节奏、紧凑化KPI网格、改进图表对齐。
  - 1.0.25: UI交互优化：月度分布柱状图直接显示数值；竖表按钮增加绿色标识；排除日期选项改为更清晰文字；增强全局交互动效。
  - 1.0.26: 数据洞察升级：新增"数据洞察"分析区块，包含均衡度/稳定性/极差比/活跃省份KPI卡、多维分析雷达图、计划完成度仪表盘、周度分布迷你图（Sparkline）；省份排行间距紧凑化。
  - 1.0.27: 删除图表：移除多维分析雷达图和计划完成度仪表盘，保留数据洞察KPI卡片和周度分布迷你图。
  - 1.0.28: 布局重构：数据洞察KPI（均衡度/稳定性/极差比/活跃省份）整合到主KPI区域，每行5个重新排序；省份排行进一步紧凑化；各省份周度趋势改为多线条风格显示所有省份，移至最后。
  - 1.0.29: 图表替换：删除"各省份周度趋势"，新增"省份波动分析"，显示波动最大的6个省份，包含变异系数卡片和趋势线图。
  - 1.0.30: 样式优化：省份波动分析图表改为简洁沉浸风格，卡片区域去除背景改为行内统计，线条样式与各类型周度趋势对比保持一致。
  - 1.0.31: 交互与样式重构：省份波动分析改为图表内悬停显示波动比例、删除图例、支持点击高亮；月度/季度/目标类型/省份排行等图表统一使用简洁单色系风格，去除花哨颜色。
  - 1.0.32: 热力图数值清晰度优化：增大单元格宽度与字号、添加等宽数字属性、优化文字对比度。UI交互优化：移除图例阴影效果、增强KPI卡片悬停视觉反馈、主题切换按钮固定到右下角、省份波动分析新增全部省份波动率网格表格。
  - 1.0.33: 省份波动分析交互重构：默认显示波动率最高省份、点击下方省份添加/移除线条、去掉右上角说明文字、每行增加颜色指示器。
  - 1.0.34: 多年份X轴优化：各类型周度趋势对比与省份波动分析图表增加年份第二行居中显示（参考周度目标总量走势样式）；Toast错误样式统一为深色主题风格；热力图数值显示优化：提高最小透明度、调整颜色阈值、深色文字配强阴影、浅色背景增加底层对比度。
  - 1.0.35: 省份波动分析支持清空所有省份选择，允许图表显示空白状态。
  - 1.0.36: UI优化：移除header版本号（仅保留页脚）；页脚固定底部；主题切换按钮位置调整（距边缘38px）。
  - 1.0.37: 首页宽度优化：上传区域改为固定宽度720px；配置选项区域改为不换行布局；使用 visibility 替代 display 隐藏元素，彻底消除布局跳动。
  - 1.0.38: 热力图数值显示彻底修复：使用平方根函数优化小值可见性、提高最小透明度至0.35、统一使用浅色文字确保高对比度、简化颜色逻辑消除模糊单元格。
  - 1.0.39: 导出格式调整：宽表与竖表中的周号、月份、季度统一改为纯数字，不再附带 W、月、Q 前后缀；竖表新增“辅助列”，按“省区-年份-月份-周号”拼接。
  - 1.0.40: Excel 多 sheet 增强：多个 sheet 将分别处理并分别导出宽表/竖表，导出文件名末尾追加对应 sheet 名称。
  - 1.0.41: 多 sheet 导出优化：宽表与竖表在多 sheet 场景下分别导出为单个 Excel 文件并保留原始 sheet 结构；结果区新增 sheet 切换，下拉默认预览第一个 sheet。
-->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>计划拆分工具</title>
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2064%2064%27%3E%3Crect%20x%3D%276%27%20y%3D%276%27%20width%3D%2752%27%20height%3D%2752%27%20rx%3D%2714%27%20fill%3D%27%2318160d%27/%3E%3Cpath%20d%3D%27M18%2044V34M28%2044V28M38%2044V36%27%20stroke%3D%27%23f8f7f2%27%20stroke-width%3D%275%27%20stroke-linecap%3D%27round%27%20opacity%3D%270.92%27/%3E%3Cpath%20d%3D%27M18%2032%20L28%2026%20L38%2033%20L48%2022%27%20fill%3D%27none%27%20stroke%3D%27%23f8f7f2%27%20stroke-width%3D%272.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%20opacity%3D%270.92%27/%3E%3Ccircle%20cx%3D%2748%27%20cy%3D%2722%27%20r%3D%273%27%20fill%3D%27%23f8f7f2%27%20opacity%3D%270.92%27/%3E%3C/svg%3E" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600&family=DM+Mono:wght@400;500&display=swap" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.4.1/papaparse.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
<style>
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  /* Dark theme (default) */
  --bg:#0c0b0a;
  --surface:rgba(255,255,255,.05);
  --surface-2:rgba(255,255,255,.08);
  --border:rgba(255,255,255,.12);
  --border-strong:rgba(255,255,255,.20);
  --text:#f5f4f0;
  --text-2:#b8b4ab;
  --text-3:#7a756d;
  --accent:#e8e4db;
  --accent-bg:rgba(232,228,219,.10);
  --green:#4ade80;
  --green-bg:rgba(74,222,128,.12);
  --green-border:rgba(74,222,128,.30);
  --red:#f87171;
  --red-bg:rgba(248,113,113,.12);
  --red-border:rgba(248,113,113,.30);
  --amber:#fbbf24;
  --blue:#60a5fa;
  --r:12px;
  --r-lg:16px;
  --r-xl:20px;
  --ring:rgba(232,228,219,.25);
  --ring-strong:rgba(232,228,219,.40);
  --ff:'Microsoft YaHei','微软雅黑',system-ui,-apple-system,'Segoe UI','PingFang SC','Hiragino Sans GB','Noto Sans SC',sans-serif;
  --ff-mono:'Microsoft YaHei','微软雅黑',system-ui,-apple-system,'Segoe UI','PingFang SC','Hiragino Sans GB','Noto Sans SC',sans-serif;
  --sh:0 4px 24px rgba(0,0,0,.4);
  --sh-md:0 8px 40px rgba(0,0,0,.5);
  --sh-lg:0 20px 60px rgba(0,0,0,.6);
  --sh-sm:0 1px 3px rgba(0,0,0,.2);
  --transition-fast:.2s;
  --transition-medium:.35s;
  --transition-slow:.5s;

  /* Theme colors */
  --primary-gradient-start:#6366f1;
  --primary-gradient-mid:#8b5cf6;
  --primary-gradient-end:#a855f7;
  --primary-glow:rgba(99,102,241,.4);
  --primary-light:#818cf8;
  --bg-gradient-1:rgba(99,102,241,.15);
  --bg-gradient-2:rgba(168,85,247,.12);
  --bg-gradient-3:rgba(236,72,153,.10);
  --bg-gradient-4:rgba(34,211,238,.08);
  --bg-gradient-5:rgba(251,191,36,.08);
  --bg-base-1:#0f0e0d;
  --bg-base-2:#0c0b0a;
  --bg-base-3:#0a0908;
  --noise-opacity:.6;
  --step-num-bg-start:rgba(99,102,241,.2);
  --step-num-bg-end:rgba(139,92,246,.15);
  --step-num-border:rgba(99,102,241,.3);
  --eyebrow-color:#818cf8;
  --dropzone-border:rgba(99,102,241,.4);
  --dropzone-bg-start:rgba(99,102,241,.08);
  --dropzone-bg-mid:rgba(139,92,246,.04);
  --dropzone-bg-end:rgba(168,85,247,.08);
  --kpi-glow:rgba(99,102,241,.1);
  --chart-axis:rgba(184,180,171,1);
  --tooltip-bg-start:rgba(30,28,26,.98);
  --tooltip-bg-end:rgba(20,18,16,.98);
}

[data-theme="light"]{
  --bg:#f6f5f0;
  --surface:rgba(255,255,255,.7);
  --surface-2:rgba(249,248,245,.9);
  --border:rgba(0,0,0,.08);
  --border-strong:rgba(0,0,0,.15);
  --text:#1a1916;
  --text-2:#5c5a54;
  --text-3:#8a8880;
  --accent:#2d2c26;
  --accent-bg:rgba(45,44,38,.08);
  --green:#15803d;
  --green-bg:rgba(21,128,61,.1);
  --green-border:rgba(21,128,61,.25);
  --red:#dc2626;
  --red-bg:rgba(220,38,38,.1);
  --red-border:rgba(220,38,38,.25);
  --amber:#b45309;
  --blue:#2563eb;
  --sh:0 2px 12px rgba(0,0,0,.08);
  --sh-md:0 4px 20px rgba(0,0,0,.12);
  --sh-lg:0 8px 32px rgba(0,0,0,.16);
  --sh-sm:0 1px 2px rgba(0,0,0,.05);

  /* Light theme specific */
  --primary-gradient-start:#4f46e5;
  --primary-gradient-mid:#7c3aed;
  --primary-gradient-end:#9333ea;
  --primary-glow:rgba(79,70,229,.25);
  --primary-light:#6366f1;
  --bg-gradient-1:rgba(79,70,229,.06);
  --bg-gradient-2:rgba(124,58,237,.04);
  --bg-gradient-3:rgba(236,72,153,.03);
  --bg-gradient-4:rgba(6,182,212,.02);
  --bg-gradient-5:rgba(245,158,11,.03);
  --bg-base-1:#fafaf8;
  --bg-base-2:#f6f5f0;
  --bg-base-3:#f0efe9;
  --noise-opacity:.15;
  --step-num-bg-start:rgba(79,70,229,.12);
  --step-num-bg-end:rgba(124,58,237,.08);
  --step-num-border:rgba(79,70,229,.25);
  --eyebrow-color:#4f46e5;
  --dropzone-border:rgba(79,70,229,.3);
  --dropzone-bg-start:rgba(79,70,229,.04);
  --dropzone-bg-mid:rgba(124,58,237,.02);
  --dropzone-bg-end:rgba(147,51,234,.04);
  --kpi-glow:rgba(79,70,229,.08);
  --chart-axis:rgba(92,90,84,1);
  --tooltip-bg-start:rgba(255,255,255,.98);
  --tooltip-bg-end:rgba(249,248,245,.98);
}

html{color-scheme:light}

body{font-family:var(--ff);background:var(--bg);color:var(--text);font-size:13.5px;line-height:1.55;min-height:100vh;display:flex;flex-direction:column;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}

body::before{
  content:"";
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(1800px 900px at 10% 5%, var(--bg-gradient-1), transparent 55%),
    radial-gradient(1600px 800px at 90% 10%, var(--bg-gradient-2), transparent 50%),
    radial-gradient(1400px 700px at 50% 95%, var(--bg-gradient-3), transparent 45%),
    radial-gradient(1000px 500px at 20% 80%, var(--bg-gradient-4), transparent 40%),
    radial-gradient(1200px 600px at 80% 70%, var(--bg-gradient-5), transparent 45%),
    linear-gradient(180deg, var(--bg-base-1) 0%, var(--bg-base-2) 40%, var(--bg-base-3) 100%);
  animation:bgShift 25s ease-in-out infinite;
}

body::after{
  content:"";
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  opacity:var(--noise-opacity);
}

@keyframes bgShift {
  0%, 100% { 
    transform: scale(1) translate(0, 0);
    filter: hue-rotate(0deg);
  }
  25% { 
    transform: scale(1.05) translate(-1%, -1%);
    filter: hue-rotate(5deg);
  }
  50% { 
    transform: scale(1.02) translate(1%, 0);
    filter: hue-rotate(-3deg);
  }
  75% { 
    transform: scale(1.08) translate(0, 1%);
    filter: hue-rotate(3deg);
  }
}

:focus{outline:none}
:focus-visible{box-shadow:0 0 0 4px rgba(255,255,255,.8),0 0 0 7px var(--ring);border-color:var(--border-strong)}

@media (prefers-reduced-motion: reduce){
  *{transition:none !important;scroll-behavior:auto !important;animation:none !important}
}

/* Global animations */
@keyframes fadeInUp {
  from{opacity:0;transform:translateY(20px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes fadeIn{
  from{opacity:0}
  to{opacity:1}
}
@keyframes slideIn{
  from{opacity:0;transform:translateX(-20px)}
  to{opacity:1;transform:translateX(0)}
}
@keyframes pulse{
  0%,100%{opacity:1}
  50%{opacity:.7}
}
@keyframes glow{
  0%,100%{box-shadow:0 0 20px rgba(99,102,241,.3)}
  50%{box-shadow:0 0 40px rgba(99,102,241,.5)}
}

/* Apply entrance animations */
.card{animation:fadeInUp .6s cubic-bezier(0.4, 0, 0.2, 1) backwards}
.card:nth-child(1){animation-delay:0ms}
.card:nth-child(2){animation-delay:50ms}
.card:nth-child(3){animation-delay:100ms}
.card:nth-child(4){animation-delay:150ms}
.card:nth-child(5){animation-delay:200ms}
.card:nth-child(6){animation-delay:250ms}

/* Enhanced focus states */
:focus-visible{
  box-shadow:
    0 0 0 3px rgba(99,102,241,.3),
    0 0 0 6px rgba(99,102,241,.1),
    0 0 30px rgba(99,102,241,.2);
  border-color:#818cf8;
}

/* Smooth scrolling */
html{scroll-behavior:smooth}

/* Custom scrollbar */
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:rgba(255,255,255,.03)}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.25)}

/* ── Layout ─────────────────────────────────────────────────────────────── */
:root{
  --space-2xs:4px;
  --space-xs:6px;
  --space-sm:8px;
  --space-md:12px;
  --space-lg:16px;
  --space-xl:24px;
  --space-2xl:32px;
}

.wrap{max-width:1100px;margin:0 auto;padding:0 var(--space-lg);flex:1;display:flex;flex-direction:column}

/* Template row as standalone section */
.template-section{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:var(--space-md);
  padding:var(--space-md) 0;
  margin-bottom:var(--space-xs);
  flex-wrap:wrap;
}
@media(max-width:600px){
  .template-section{flex-direction:column;align-items:flex-start;gap:var(--space-xs);padding:var(--space-sm) 0}
  .template-section .template-hint{display:block;margin-top:var(--space-xs)}
}
main{flex:1}

header{
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--space-lg) 0 var(--space-md);
  border-bottom:1px solid var(--border);
  margin-bottom:var(--space-xl);
}
@media(max-width:600px){
  header{padding:var(--space-md) 0 var(--space-sm);margin-bottom:var(--space-lg)}
  .h-title{font-size:15px}
  .step{font-size:14px}
  .step-num{width:20px;height:20px;font-size:10px}
}
.h-title{font-size:16px;font-weight:700;letter-spacing:.02em;color:var(--text);text-shadow:0 0 30px rgba(255,255,255,.1)}
.h-meta{font-size:12px;color:var(--eyebrow-color);font-family:var(--ff-mono);font-weight:600;text-shadow:0 0 20px var(--primary-glow)}

/* Theme toggle */
.theme-toggle{
  position:fixed;top:38px;right:38px;z-index:100;
  width:48px;height:48px;border-radius:50%;
  background:linear-gradient(145deg, var(--surface-2) 0%, var(--surface) 100%);
  border:1px solid var(--border);
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:all var(--transition-medium) cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow:var(--sh-md);opacity:.6;
}
@media(max-width:600px){
  .theme-toggle{top:16px;right:16px;width:44px;height:44px}
  .theme-toggle svg{width:20px;height:20px}
}
.theme-toggle:hover{
  opacity:1;border-color:var(--primary-light);
  box-shadow:var(--sh-lg), 0 0 30px var(--primary-glow);
  transform:scale(1.08);
}
.theme-toggle svg{
  width:22px;height:22px;color:var(--text-2);
  transition:all var(--transition-medium);
}
.theme-toggle:hover svg{color:var(--eyebrow-color)}
.theme-toggle .sun-icon{display:none}
.theme-toggle .moon-icon{display:block}
[data-theme="light"] .theme-toggle .sun-icon{display:block}
[data-theme="light"] .theme-toggle .moon-icon{display:none}

footer{
  border-top:1px solid var(--border);
  margin-top:auto;
  padding:var(--space-sm) 0;
  text-align:center;
  font-size:11px;
  color:var(--text-3);
}

/* ── Cards ───────────────────────────────────────────────────────────────── */
.card{
  background:linear-gradient(145deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.02) 100%);
  border:1px solid var(--border);
  border-radius:var(--r-xl);
  box-shadow:var(--sh);
  backdrop-filter:saturate(1.2) blur(20px);
  transition:all var(--transition-medium) cubic-bezier(0.4, 0, 0.2, 1);
  position:relative;
  overflow:hidden;
}
.card::before{
  content:"";
  position:absolute;
  top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg, transparent, var(--border-strong), transparent);
}
.card:hover{
  box-shadow:var(--sh-md);
  border-color:rgba(255,255,255,.2);
  transform:translateY(-2px) scale(1.001);
}
.card:hover::before{
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
}

/* ── Result section (immersive) ───────────────────────────────────────────── */
#result-section #stats-panel .card{
  background:transparent;
  border-color:transparent;
  box-shadow:none;
  backdrop-filter:none;
  transition:none;
}
#result-section #stats-panel .card:hover{
  transform:none;
  box-shadow:none;
}
#result-section #stats-panel .kpi-card{padding:var(--space-md)}
#result-section #stats-panel .kpi-sub{color:rgba(107,102,96,.68)}
#result-section #stats-panel .chart-wrap{
  padding:var(--space-md) var(--space-md);
  position:relative;
}
#result-section #stats-panel .chart-wrap > :not(.chart-hd):not(.legend){margin-top:var(--space-md)}
#result-section #stats-panel .chart-hd{
  display:flex;
  align-items:center;
  gap:var(--space-sm);
  margin-bottom:var(--space-sm);
  flex-wrap:wrap;
}
#result-section #stats-panel .chart-ttl{
  color:var(--text-2);
  font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  white-space:nowrap;
  flex-shrink:0;
}
#result-section #stats-panel .chart-note{
  color:var(--text-3);
  font-size:11px;
  display:inline-flex;
  align-items:center;
  gap:var(--space-xs);
  flex:0 1 auto;
}
#result-section #stats-panel .section-label{display:none}
#result-section #stats-panel .stats-mb{margin-bottom:var(--space-md)}

#result-section #stats-panel .legend{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-2xs) var(--space-sm);
  margin-left:auto;
  align-items:center;
}
#result-section #stats-panel .legend-item{
  justify-content:flex-start;
  gap:var(--space-xs);
  font-size:11px;
  color:var(--text-2);
}

#result-section #stats-panel .donut-wrap{align-items:flex-start;gap:var(--space-lg)}
#result-section #stats-panel .donut-legend{gap:var(--space-xs)}
#result-section #stats-panel .dl-row{padding:var(--space-2xs) 0}

/* ── Buttons ─────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 16px;border-radius:var(--r);font-family:var(--ff);font-size:13px;
  font-weight:600;cursor:pointer;border:1px solid transparent;
  transition:all var(--transition-medium) cubic-bezier(0.4, 0, 0.2, 1);line-height:1;
  white-space:nowrap;position:relative;overflow:hidden;
}
.btn::before{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(255,255,255,.15) 0%, transparent 100%);
  opacity:0;transition:opacity var(--transition-fast);
}
.btn:hover::before{opacity:1}
.btn:active{transform:translateY(1px) scale(.98)}
.btn-primary{
  background:var(--text);
  color:var(--bg);
  box-shadow:var(--sh);
  border:none;
}
.btn-primary:hover{
  background:var(--text-2);
  box-shadow:var(--sh-md);
  transform:translateY(-1px);
}
.btn-primary:active{box-shadow:var(--sh-sm);transform:translateY(0)}
.btn-ghost{
  background:linear-gradient(145deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,.02) 100%);
  border-color:rgba(255,255,255,.15);
  color:var(--text-2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.btn-ghost:hover{
  background:linear-gradient(145deg, rgba(255,255,255,.15) 0%, rgba(255,255,255,.05) 100%);
  border-color:rgba(255,255,255,.25);
  color:var(--text);
  box-shadow:
    0 4px 20px rgba(0,0,0,.3),
    inset 0 1px 0 rgba(255,255,255,.1);
  transform:translateY(-1px);
}
.btn-link{background:transparent;border-color:transparent;color:var(--text-2);padding:6px 4px}
.btn-link:hover{color:var(--text);text-shadow:0 0 20px rgba(232,228,219,.3)}
.btn-danger-link{background:transparent;border-color:transparent;color:var(--text-3);padding:6px 4px}
.btn-danger-link:hover{color:var(--red);text-shadow:0 0 20px rgba(248,113,113,.3)}
.btn-secondary{
  background:var(--surface-2);
  border-color:var(--border-strong);
  color:var(--text);
  box-shadow:var(--sh-sm);
}
.btn-secondary:hover{
  background:var(--surface);
  border-color:var(--text-2);
  box-shadow:var(--sh);
  transform:translateY(-1px);
}
[data-theme="light"] .btn-secondary{
  background:var(--surface-2);
  border-color:var(--border-strong);
  color:var(--text);
}
[data-theme="light"] .btn-secondary:hover{
  background:var(--surface);
  border-color:var(--text-2);
}
.btn svg{width:15px;height:15px;flex-shrink:0}

/* ── Form controls ───────────────────────────────────────── */
.checkbox-label{
  display:inline-flex;align-items:center;gap:6px;
  font-size:13px;color:var(--text-2);cursor:pointer;user-select:none;
  padding:4px 6px;border-radius:var(--r);transition:all var(--transition-fast);
  flex-shrink:1;white-space:nowrap;
}
.checkbox-label:hover{
  color:var(--text);
  background:var(--dropzone-bg-start);
}
.checkbox-label input[type=checkbox]{
  width:18px;height:18px;border-radius:4px;accent-color:var(--primary-gradient-start);cursor:pointer;
  flex-shrink:0;background:var(--surface);border:1px solid var(--border);
}
.checkbox-label input[type=checkbox]:checked{
  background:var(--primary-gradient-start);border-color:var(--primary-gradient-start);
  box-shadow:0 0 12px var(--primary-glow);
}

input[type=date],select{
  font-family:var(--ff);font-size:13px;color:var(--text);
  background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r);
  padding:8px 12px;outline:none;
  transition:all var(--transition-medium) cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow:var(--sh-sm, 0 1px 2px rgba(0,0,0,.05)), inset 0 1px 0 rgba(255,255,255,.05);
}
input[type=date]:hover,select:hover{
  border-color:var(--dropzone-border);
  background:var(--surface-2);
  box-shadow:var(--sh), 0 0 20px var(--kpi-glow);
}
input[type=date]:focus,select:focus{
  border-color:var(--primary-light);
  background:var(--surface-2);
  box-shadow:
    var(--sh-md),
    0 0 0 3px var(--kpi-glow),
    0 0 30px var(--primary-glow);
}
select{
  min-width:120px;
  cursor:pointer;
}
select option{
  background:var(--bg-base-2);
  color:var(--text);
  padding:6px 12px;
}
@media(max-width:600px){
  select{min-width:100px;font-size:14px;padding:10px 12px;min-height:44px}
}

/* ── Toast ────────────────────────────────────────────────── */
#toast{
  position:fixed;top:24px;left:50%;transform:translateX(-50%) translateY(-12px);
  opacity:0;pointer-events:none;z-index:9999;
  display:flex;align-items:flex-start;gap:12px;
  max-width:480px;width:calc(100vw - 48px);
  padding:14px 18px;border-radius:var(--r-lg);
  font-size:14px;line-height:1.6;font-weight:500;
  transition:all var(--transition-medium) cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter:saturate(1.2) blur(20px);
  box-shadow:var(--sh-lg);
  border:1px solid var(--border);
}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}
@media(max-width:600px){
  #toast{top:16px;padding:12px 16px;font-size:13px;width:calc(100vw - 32px)}
  .drag-overlay-text{font-size:18px}
}
@media(max-width:375px){
  /* Extra small screens like iPhone SE */
  body{font-size:14px}
  .step{font-size:13px}
  .dz-title{font-size:14px}
  #upload-section{width:calc(100vw - 24px)}
}
#toast.toast-error{
  background:linear-gradient(145deg, rgba(248,113,113,.12) 0%, rgba(239,68,68,.08) 100%);
  border-color:rgba(248,113,113,.35);
  color:var(--text);
  box-shadow:var(--sh-lg), 0 0 30px rgba(248,113,113,.15);
}
#toast.toast-ok{
  background:linear-gradient(145deg, rgba(74,222,128,.12) 0%, rgba(34,197,94,.08) 100%);
  border-color:rgba(74,222,128,.35);
  color:var(--text);
  box-shadow:var(--sh-lg), 0 0 30px rgba(74,222,128,.15);
}
.toast-close{margin-left:auto;background:none;border:none;cursor:pointer;color:var(--text-2);opacity:.7;padding:0;line-height:1;font-size:18px;flex-shrink:0;transition:all var(--transition-fast)}
.toast-close:hover{opacity:1;transform:scale(1.1);color:var(--text)}

/* ── Upload section ─────────────────────────────────────────────────────────── */
#upload-section{display:flex;flex-direction:column;gap:var(--space-xl);width:480px;margin:0 auto}
@media(max-width:760px){#upload-section{width:calc(100vw - 48px);min-width:auto}}

/* Help Section (使用说明) - 简化样式 */
.help-section{padding:var(--space-md) 0}
.help-section .section-eyebrow{
  margin-bottom:var(--space-sm);
  font-size:11px;
  font-weight:600;
  color:var(--text-2);
  letter-spacing:0;
  text-transform:none;
  text-shadow:none;
}
.help-section .steps{gap:var(--space-sm)}
.help-section .step-num{
  width:18px;
  height:18px;
  font-size:11px;
  background:var(--surface-2);
  color:var(--text-2);
  border:1px solid var(--border);
  box-shadow:none;
}

.section-eyebrow{
  font-size:10px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--eyebrow-color);
  margin-bottom:var(--space-xs);
  text-shadow:0 0 20px var(--primary-glow);
}

.steps{display:flex;flex-direction:column;gap:var(--space-xs);margin-bottom:var(--space-2xs)}
.step{display:flex;gap:var(--space-sm);font-size:13px;color:var(--text-2);line-height:1.5}
.step-num{
  flex-shrink:0;width:22px;height:22px;border-radius:50%;
  background:linear-gradient(135deg, var(--step-num-bg-start) 0%, var(--step-num-bg-end) 100%);
  color:var(--eyebrow-color);
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;font-family:var(--ff-mono);
  margin-top:0;
  box-shadow:0 2px 8px var(--primary-glow), inset 0 1px 0 rgba(255,255,255,.1);
  border:1px solid var(--step-num-border);
}
.step strong{color:var(--text);font-weight:600}
[data-theme="light"] .step strong{text-shadow:none}
[data-theme="dark"] .step strong{text-shadow:0 0 20px rgba(255,255,255,.1)}

/* Config card - simplified like help-section */
.config-card{padding:var(--space-md) 0;width:100%;box-sizing:border-box}
.config-card .section-eyebrow{
  margin-bottom:var(--space-sm);
  font-size:11px;
  font-weight:600;
  color:var(--text-2);
  letter-spacing:0;
  text-transform:none;
  text-shadow:none;
}
.config-row{
  display:flex;flex-wrap:wrap;gap:var(--space-sm) var(--space-md);align-items:center;width:100%
}
@media(max-width:600px){
  .config-row{flex-direction:column;align-items:flex-start;gap:var(--space-sm)}
  .checkbox-label{padding:var(--space-xs) 0}
}
#carry-wrap.hidden{visibility:hidden;position:absolute;pointer-events:none;opacity:0}

/* Holiday panel */
.holiday-panel{display:none;width:100%}
.holiday-panel.open{display:block}
.holiday-header{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:var(--space-xs);
}
.holiday-list{display:flex;flex-direction:column;gap:var(--space-xs);max-height:140px;overflow-y:auto;width:100%}
.holiday-row{display:flex;align-items:center;gap:var(--space-xs);width:100%;flex-wrap:wrap}
.holiday-row input[type="date"]{flex:0 0 130px;width:130px;font-variant-numeric:tabular-nums}
@media(max-width:600px){
  .holiday-row{gap:var(--space-sm)}
  .holiday-row input[type="date"]{flex:1 1 calc(50% - var(--space-sm));min-width:120px}
}
input[type="date"]::-webkit-calendar-picker-indicator{opacity:0.5;cursor:pointer;transition:opacity var(--transition-fast)}
input[type="date"]::-webkit-calendar-picker-indicator:hover{opacity:0.8}
[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator{filter:invert(1)}
.hint-text{font-size:11px;color:var(--text-3);margin-top:var(--space-xs)}

/* ── Result section ─────────────────────────────────────────────────────────── */
#result-section{display:none}
#result-section.visible{display:block}

.result-bar{
  display:flex;align-items:center;gap:var(--space-sm);flex-wrap:wrap;
  margin-bottom:var(--space-md);
  padding-bottom:var(--space-sm);
  border-bottom:1px solid var(--border);
  position:relative;
}
.result-bar::before{
  content:"";
  position:absolute;bottom:-1px;left:0;right:0;height:1px;
  background:linear-gradient(90deg, transparent, var(--border), transparent);
}
.result-status{display:flex;align-items:center;gap:var(--space-xs);font-size:13px;font-weight:500}
.result-status svg{width:14px;height:14px;color:var(--green)}
.result-badge{
  display:inline-flex;align-items:center;gap:var(--space-2xs);
  padding:var(--space-2xs) var(--space-sm);
  background:var(--accent-bg);
  border-radius:3px;
  font-size:11px;
  color:var(--text-2);
  font-family:var(--ff-mono);
}
.result-actions{display:flex;align-items:center;gap:var(--space-xs);margin-left:auto}
.sheet-switch{
  display:none;
  align-items:center;
  gap:var(--space-xs);
  padding:var(--space-2xs) var(--space-sm);
  border:1px solid var(--border);
  border-radius:var(--r);
  background:var(--surface);
}
.sheet-switch.open{display:inline-flex}
.sheet-switch-label{
  font-size:11px;
  color:var(--text-3);
  white-space:nowrap;
}
.sheet-switch select{
  min-width:140px;
  max-width:220px;
  padding:6px 28px 6px 10px;
  font-size:12px;
}

/* ── Stats dashboard ─────────────────────────────────────────────────────────── */
#stats-panel{
  display:flex;
  flex-direction:column;
  gap:0;
}
.holiday-list{display:flex;flex-direction:column;gap:6px;max-height:160px;overflow-y:auto}
.holiday-row{display:flex;align-items:center;gap:6px}
.hint-text{font-size:12px;color:var(--text-3);margin-top:8px}

/* Dropzone - immersive, no background */
#dropzone{
  width:100%;
  padding:var(--space-xl) var(--space-lg);
  text-align:center;cursor:pointer;
  border:1px dashed var(--border-strong);
  border-radius:var(--r-lg);
  background:transparent;
  box-shadow:none;
  transition:all var(--transition-medium) cubic-bezier(0.4, 0, 0.2, 1);
  outline:none;
  position:relative;
  box-sizing:border-box;
}
#dropzone:hover,#dropzone:focus,#dropzone.drag-over{
  border-color:var(--primary-light);
  border-style:solid;
  background:var(--surface);
  transform:translateY(-2px);
  box-shadow:var(--sh-md), 0 0 30px var(--primary-glow);
}
.dz-icon{
  width:40px;height:40px;border-radius:var(--r);
  background:transparent;
  color:var(--text-2);
  display:flex;align-items:center;justify-content:center;
  margin:0 auto var(--space-sm);
  box-shadow:none;
  border:1px solid var(--border);
  transition:all var(--transition-medium);
}
#dropzone:hover .dz-icon{
  transform:scale(1.05);
  background:var(--surface-2);
  border-color:var(--border-strong);
}
.dz-icon svg{width:20px;height:20px}
.dz-title{font-size:14px;font-weight:600;color:var(--text);letter-spacing:.01em}
.dz-sub{font-size:12px;color:var(--text-2);margin-top:var(--space-xs)}
.spinner{
  width:24px;height:24px;
  border:3px solid var(--dropzone-border);
  border-top-color:var(--eyebrow-color);
  border-radius:50%;
  animation:spin 1s linear infinite;
  margin:0 auto var(--space-sm);
  box-shadow:0 0 20px var(--primary-glow);
}
@keyframes spin{
  0%{transform:rotate(0deg)}
  100%{transform:rotate(360deg)}
}


/* ── Result section ──────────────────────────────────────── */
#result-section{display:none}
#result-section.visible{display:block}

.result-bar{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-bottom:18px;padding-bottom:16px;border-bottom:1px solid var(--border);
  position:relative;
}
.result-bar::before{
  content:"";
  position:absolute;bottom:-1px;left:0;right:0;height:1px;
  background:linear-gradient(90deg, transparent, var(--border), transparent);
}
.result-status{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:500}
.result-status svg{width:15px;height:15px;color:var(--green)}
.result-badge{
  display:inline-flex;align-items:center;gap:4px;
  padding:2px 7px;background:var(--accent-bg);border-radius:3px;
  font-size:12px;color:var(--text-2);font-family:var(--ff-mono);
}
.result-actions{display:flex;align-items:center;gap:6px;margin-left:auto}

/* ── Stats dashboard ─────────────────────────────────────── */
/* Stats panel layout */
#stats-panel{
  display:flex;
  flex-direction:column;
  gap:0;
}

.kpi-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:var(--space-sm);
  margin-bottom:var(--space-sm);
  align-items:stretch;
}
@media(max-width:1200px){.kpi-grid{grid-template-columns:repeat(5,1fr)}}
@media(max-width:1000px){.kpi-grid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:768px){.kpi-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:480px){.kpi-grid{grid-template-columns:repeat(2,1fr);gap:var(--space-xs)}}
@media(max-width:375px){.kpi-grid{grid-template-columns:1fr}}
@media(max-width:480px){
  .kpi-card{padding:var(--space-sm) var(--space-md)}
  .kpi-value{font-size:20px}
  .kpi-label{font-size:10px}
  /* Chart titles mobile */
  .chart-hd{flex-direction:column;align-items:flex-start;gap:var(--space-xs)}
  .chart-ttl{font-size:11px}
}
.kpi-card{
  padding:var(--space-md) var(--space-md);
  transition:all var(--transition-medium) cubic-bezier(0.4, 0, 0.2, 1);
  background:linear-gradient(145deg, var(--surface) 0%, var(--surface-2) 100%);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  position:relative;overflow:hidden;
  cursor:default;
}
.kpi-card::before{
  content:"";
  position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg, transparent, var(--border-strong), transparent);
}
.kpi-card::after{
  content:"";
  position:absolute;inset:0;
  background:radial-gradient(ellipse at center, var(--primary-glow) 0%, transparent 70%);
  opacity:0;
  transition:opacity var(--transition-medium);
  pointer-events:none;
}
.kpi-card:hover{
  transform:translateY(-4px) scale(1.02);
  border-color:var(--primary-light);
  box-shadow:var(--sh-lg), 0 0 40px var(--kpi-glow);
}
.kpi-card:hover::after{opacity:.12}
.kpi-card:hover .kpi-value{
  transform:scale(1.06);
  text-shadow:0 0 40px var(--primary-glow);
}
.kpi-card:active{transform:translateY(-1px) scale(1.005)}
.kpi-label{
  font-size:11px;color:var(--text-2);margin-bottom:var(--space-xs);letter-spacing:.02em;font-weight:500;
  transition:color var(--transition-fast);
}
.kpi-card:hover .kpi-label{color:var(--text)}
.kpi-value{
  font-size:24px;font-weight:700;font-family:var(--ff-mono);letter-spacing:-.02em;line-height:1;color:var(--text);
  text-shadow:0 0 20px var(--primary-glow);
  transition:all var(--transition-medium);
}
.kpi-sub{font-size:11px;color:var(--text-3);margin-top:var(--space-2xs);font-weight:500}
.kv-green{color:var(--green);text-shadow:0 0 20px rgba(74,222,128,.3)}
.kv-amber{color:var(--amber);text-shadow:0 0 20px rgba(251,191,36,.3)}
.kv-blue{color:var(--blue);text-shadow:0 0 20px rgba(96,165,250,.3)}
.kv-purple{color:#c084fc;text-shadow:0 0 20px rgba(192,132,252,.3)}

/* Chart wrapper */
.chart-wrap{
  padding:var(--space-md) var(--space-md);
  position:relative;
  min-height:100px;
}
@media(max-width:600px){
  .chart-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .chart-wrap svg{min-width:480px}
}
.chart-hd{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  margin-bottom:var(--space-sm);
  gap:var(--space-sm);
}
.chart-ttl{
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--text-3);
  white-space:nowrap;
}
.chart-note{font-size:11px;color:var(--text-3)}
.stats-mb{margin-bottom:var(--space-md)}

@media(max-width:600px){
  .chart-wrap{padding:var(--space-sm) var(--space-sm);min-height:80px}
  .wrap{padding:0 var(--space-sm)}
  /* Mobile touch targets */
  .btn{min-height:44px;min-width:44px;padding:10px 18px}
  .checkbox-label{min-height:44px;display:flex;align-items:center}
  .checkbox-label input[type=checkbox]{width:22px;height:22px}
  /* Upload section mobile */
  #upload-section{width:calc(100vw - 32px);gap:var(--space-lg)}
  #dropzone{padding:var(--space-lg) var(--space-md)}
  .dz-title{font-size:15px}
  .dz-sub{font-size:13px}
  /* Config mobile */
  .config-card{padding:var(--space-sm) 0}
  /* Results bar mobile */
  .result-bar{flex-direction:column;align-items:flex-start;gap:var(--space-sm)}
  .result-actions{width:100%;margin-left:0;justify-content:flex-end}
  /* Holiday row mobile */
  .holiday-header{flex-direction:column;align-items:flex-start;gap:var(--space-xs)}
}

/* Grid layouts */
.two-col{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--space-sm);
  margin-bottom:var(--space-sm);
}
@media(max-width:600px){.two-col{grid-template-columns:1fr}}

.one-col{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--space-sm);
  margin-bottom:var(--space-sm);
}
.one-col .card{margin:0}

.legend{display:flex;flex-wrap:wrap;gap:var(--space-2xs) var(--space-sm);margin-top:var(--space-sm);align-items:center}
.legend-item{
  display:flex;align-items:center;gap:var(--space-xs);
  font-size:11px;color:var(--text-2);
  cursor:default;transition:all var(--transition-fast);
  padding:var(--space-2xs) var(--space-xs);
  border-radius:var(--r);
  margin:calc(var(--space-2xs) * -1) calc(var(--space-xs) * -1);
}
.legend-item:hover{
  background:var(--surface-2);
  color:var(--text);
}
.legend-item:hover .legend-dot{transform:scale(1.15)}
.legend-item:hover .legend-sq{transform:scale(1.1)}
.legend-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;transition:all var(--transition-fast)}
.legend-sq{width:10px;height:10px;border-radius:2px;flex-shrink:0;transition:all var(--transition-fast)}
.legend-line{width:16px;height:0;border-top:2px dashed var(--border-strong);display:inline-block;transform:translateY(-1px)}

/* Tooltip */
#cht{
  position:fixed;z-index:9000;pointer-events:none;
  background:linear-gradient(145deg, var(--tooltip-bg-start) 0%, var(--tooltip-bg-end) 100%);
  color:var(--text);
  font-size:13px;padding:14px 16px;border-radius:var(--r-lg);
  line-height:1.6;opacity:0;transition:all var(--transition-medium) cubic-bezier(0.4, 0, 0.2, 1);
  font-family:var(--ff);max-width:280px;white-space:normal;
  box-shadow:
    var(--sh-lg),
    0 0 40px var(--primary-glow),
    inset 0 1px 0 rgba(255,255,255,.08);
  border:1px solid var(--border);
  backdrop-filter:saturate(1.2) blur(20px);
  transform:translateY(8px) scale(.98);
}
#cht.on{opacity:1;transform:translateY(0) scale(1)}

#cht .tt-title{font-weight:700;font-size:13px;letter-spacing:.02em;margin-bottom:8px;color:var(--text);text-shadow:0 0 20px var(--primary-glow)}
#cht .tt-body{display:grid;row-gap:6px}
#cht .tt-row{display:grid;grid-template-columns:minmax(80px,1fr) auto;column-gap:14px;align-items:baseline}
#cht .tt-k{color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#cht .tt-v{color:var(--text);font-family:var(--ff-mono);font-weight:700;text-align:right;white-space:nowrap;text-shadow:0 0 10px var(--primary-glow)}
#cht .tt-line{color:var(--text-2)}

/* Section labels */
.section-label{
  font-size:10px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--eyebrow-color);
  padding:var(--space-md) 0 var(--space-xs);
  border-top:1px solid var(--border);
  margin-top:var(--space-xs);
  position:relative;
}
.section-label.first{border-top:none;padding-top:0}
.section-label::before{
  content:"";
  position:absolute;top:0;left:0;width:5px;height:5px;border-radius:50%;
  background:linear-gradient(135deg, var(--eyebrow-color) 0%, #c084fc 100%);
  box-shadow:0 0 10px var(--primary-glow);
  margin-top:calc(var(--space-md) + 2px);
}

.prov-list{display:flex;flex-direction:column;gap:0}
.prov-row{
  display:grid;
  grid-template-columns:80px 1fr 50px 36px;
  align-items:center;
  gap:var(--space-xs);
  padding:calc(var(--space-xs) * 0.8) var(--space-xs);
  border-radius:var(--r);
  transition:all var(--transition-medium) cubic-bezier(0.4, 0, 0.2, 1);
  cursor:pointer;
  line-height:1.3;
}
.prov-row:hover{
  background:linear-gradient(145deg, var(--surface-2) 0%, var(--surface) 100%);
  transform:translateX(3px);
  box-shadow:var(--sh-sm);
}
.prov-row:hover .prov-name{color:var(--eyebrow-color)}
.prov-row:hover .prov-fill{
  opacity:.9;
  filter:brightness(1.15) saturate(1.1);
  box-shadow:0 0 15px currentColor, 0 2px 8px currentColor;
}
.prov-row:active{transform:translateX(2px) scale(.995)}
.prov-name{font-size:12px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right;font-weight:500;transition:color var(--transition-fast)}
@media(max-width:480px){
  .prov-row{grid-template-columns:60px 1fr 45px 32px;gap:var(--space-2xs)}
  .prov-name{font-size:11px}
  .prov-val,.prov-pct{font-size:10px}
}
.prov-track{background:var(--surface-2);border-radius:3px;height:8px;overflow:hidden;box-shadow:inset 0 1px 2px rgba(0,0,0,.2)}
.prov-fill{height:100%;border-radius:3px;transition:all var(--transition-medium);box-shadow:0 0 10px currentColor}
.prov-val{font-size:11px;font-family:var(--ff-mono);color:var(--text);text-align:right;font-weight:600;transition:transform var(--transition-fast)}
.prov-row:hover .prov-val{transform:scale(1.05)}
.prov-pct{font-size:11px;color:var(--text-3);font-family:var(--ff-mono);text-align:right}

.donut-wrap{display:flex;align-items:center;gap:var(--space-lg);flex-wrap:wrap}
.donut-legend{flex:1;min-width:100px;display:flex;flex-direction:column;gap:var(--space-xs)}
.dl-row{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--space-sm);padding:var(--space-xs) var(--space-sm);
  border-radius:var(--r);transition:all var(--transition-medium) cubic-bezier(0.4, 0, 0.2, 1);
  cursor:pointer;
}
.dl-row:hover{
  background:linear-gradient(145deg, var(--surface-2) 0%, var(--surface) 100%);
  transform:translateX(4px);
  box-shadow:var(--sh-sm);
}
.dl-row:active{transform:translateX(2px) scale(.995)}
.dl-left{display:flex;align-items:center;gap:var(--space-sm);min-width:0}
.dl-key{font-size:12px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500;transition:color var(--transition-fast)}
.dl-row:hover .dl-key{color:var(--eyebrow-color)}
.dl-val{font-size:12px;font-family:var(--ff-mono);font-weight:700;color:var(--text);flex-shrink:0;transition:transform var(--transition-fast)}
.dl-row:hover .dl-val{transform:scale(1.05)}
.dl-pct{font-size:11px;font-family:var(--ff-mono);color:var(--text-3);flex-shrink:0;margin-left:var(--space-2xs)}

.hm-scroll{overflow-x:auto}
.hm-table{
  border-collapse:separate;
  border-spacing:2px;
  font-size:11px;
  white-space:nowrap;
  margin:0 auto;
}
.hm-th{
  padding:var(--space-2xs) var(--space-xs);
  font-size:10px;
  font-weight:500;
  color:var(--text-3);
  text-align:center;vertical-align:bottom;
}
.hm-th-row{
  padding:var(--space-2xs) var(--space-sm) var(--space-2xs) 0;
  font-size:11px;
  color:var(--text-2);
  font-weight:500;
  text-align:right;
  max-width:100px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  vertical-align:middle;
}
.hm-cell{padding:0;text-align:center;vertical-align:middle;cursor:pointer;transition:transform var(--transition-fast)}
.hm-cell:hover{transform:scale(1.05);z-index:10;position:relative}
.hm-in{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:48px;height:24px;padding:0 4px;border-radius:3px;
  font-size:11px;font-family:var(--ff-mono);font-weight:600;font-variant-numeric:tabular-nums;
  transition:all var(--transition-fast);
}
.hm-cell:hover .hm-in{
  transform:scale(1.08);
  z-index:20;
}
@media(max-width:600px){
  .hm-in{min-width:40px;height:28px;font-size:10px}
  .hm-th,.hm-th-row{font-size:9px}
}

/* Section labels */
.section-label{
  font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--eyebrow-color);padding:24px 0 12px;border-top:1px solid var(--dropzone-border);margin-top:8px;
  position:relative;text-shadow:0 0 20px var(--primary-glow);
}
.section-label.first{border-top:none;padding-top:0}
.section-label::before{
  content:"";
  position:absolute;top:0;left:0;width:6px;height:6px;border-radius:50%;
  background:linear-gradient(135deg, var(--eyebrow-color) 0%, #c084fc 100%);
  box-shadow:0 0 12px var(--primary-glow);
  margin-top:30px;
}

/* SVG interactive */
.svg-hit{cursor:crosshair}

/* Option hint */
#option-hint{font-size:12px;color:var(--text-3);line-height:1.6;padding-top:2px;min-height:18px}

/* Full-page drag overlay */
#drag-overlay{
  position:fixed;inset:0;z-index:1000;pointer-events:none;
  background:var(--surface);border:3px dashed var(--dropzone-border);
  display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity var(--transition-medium);border-radius:0;
  backdrop-filter:saturate(1.2) blur(10px);
}
#drag-overlay.show{opacity:1;pointer-events:auto}
.drag-overlay-text{
  font-size:24px;font-weight:700;color:var(--eyebrow-color);
  text-shadow:0 0 40px var(--primary-glow);
  letter-spacing:.05em;
}
</style>
</head>
<body>

<!-- Shared chart tooltip -->
<div id="cht"></div>

<!-- Full-page drag overlay -->
<div id="drag-overlay">
  <p class="drag-overlay-text">松开以上传文件</p>
</div>

<!-- Toast -->
<div id="toast" role="alert">
  <span id="toast-msg"></span>
  <button class="toast-close" id="toast-close" aria-label="关闭">×</button>
</div>

<!-- Theme Toggle (固定右下角) -->
<button class="theme-toggle" id="theme-toggle" aria-label="切换主题">
  <svg class="sun-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="5"/><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/></svg>
  <svg class="moon-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
</button>

<div class="wrap">
  <header>
    <span class="h-title">计划拆分工具<span id="sheet-name" style="font-size:12px;font-weight:400;color:var(--text-3);margin-left:8px"></span></span>
  </header>

  <main>

    <!-- ── Upload Section ─────────────────────────────────── -->
    <div id="upload-section">

      <!-- Template Download -->
      <div class="template-section">
        <button class="btn btn-secondary" id="dl-template">
          <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/></svg>
          下载导入模板
        </button>
      </div>

      <!-- 1. Help Info (使用说明) -->
      <div class="help-section">
        <p class="section-eyebrow">使用步骤</p>
        <div class="steps">
          <div class="step"><span class="step-num">1</span><span>下载模板，按模板格式填写月度数据</span></div>
          <div class="step"><span class="step-num">2</span><span>勾选配置，上传文件等待处理</span></div>
          <div class="step"><span class="step-num">3</span><span>处理完成，即可导出拆分后的周数据</span></div>
        </div>
      </div>

      <!-- 2. Upload Area - Main Action -->
      <div id="dropzone" tabindex="0" role="button" aria-label="点击或拖拽上传文件">
        <input type="file" id="file-input" accept=".csv,.xlsx,.xls" style="display:none">
        <div id="dz-upload">
          <div class="dz-icon">
            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"/>
            </svg>
          </div>
          <p class="dz-title">点击上传或拖拽文件至此</p>
          <p class="dz-sub">支持 .csv · .xlsx · .xls 格式，最大 10 MB</p>
        </div>
        <div id="dz-loading" style="display:none">
          <div class="spinner"></div>
          <p class="dz-title" style="color:var(--text-2)">处理中，请稍候…</p>
        </div>
      </div>

      <!-- 2. Config Options -->
      <div class="config-card">
        <p class="section-eyebrow">拆分规则</p>
        <div class="config-row">
          <label class="checkbox-label" title="开启后，每年独立计算周数，不受其他年份影响">
            <input type="checkbox" id="no-span">
            按自然年拆分
          </label>
          <label class="checkbox-label" id="carry-wrap" title="将1月初的目标合并到上一年最后一周">
            <input type="checkbox" id="carry-prev" checked>
            首周归并上一年
          </label>
          <label class="checkbox-label" title="设置不计入目标的日期范围">
            <input type="checkbox" id="enable-holiday">
            排除特殊日期
          </label>
        </div>
        <p id="option-hint" style="font-size:12px;color:var(--text-3);margin-top:10px;line-height:1.6;">
          <span style="color:var(--text-2)">建议：</span>日常计划保持默认即可。跨年度数据或需特殊日期处理时，再调整上述选项。
        </p>

        <!-- Holiday panel -->
        <div class="holiday-panel" id="holiday-panel">
          <div style="height:12px"></div>
          <div class="holiday-header">
            <span style="font-size:12.5px;font-weight:500;color:var(--text-2)">排除日期范围</span>
            <button class="btn btn-ghost" id="add-holiday" style="padding:3px 10px;font-size:12px">+ 添加</button>
          </div>
          <div class="holiday-list" id="holiday-list"></div>
          <p class="hint-text">这些日期的目标将平摊至其他周</p>
        </div>
      </div>
    </div>

    <!-- ── Result Section ─────────────────────────────────── -->
    <div id="result-section">

      <!-- Status bar -->
      <div class="result-bar">
        <div class="result-status">
          <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
          </svg>
          <span id="result-title">处理完成</span>
        </div>
        <span id="result-badge-year" class="result-badge"></span>
        <span id="result-badge-rows" class="result-badge"></span>
        <span id="result-badge-types" class="result-badge" style="display:none"></span>
        <div class="result-actions">
          <div class="sheet-switch" id="sheet-switch-wrap">
            <span class="sheet-switch-label">预览 Sheet</span>
            <select id="sheet-switcher" aria-label="切换预览Sheet"></select>
          </div>
          <button class="btn btn-primary" id="dl-wide">
            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/></svg>
            宽表
          </button>
          <button class="btn btn-secondary" id="dl-tidy">
            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/></svg>
            竖表
          </button>
          <button class="btn btn-danger-link" id="btn-reset">重置</button>
        </div>
      </div>

      <!-- Stats panel -->
      <div id="stats-panel">
        <!-- KPIs -->
        <div class="kpi-grid" id="kpi-grid"></div>

        <!-- Row 1: Weekly trend -->
        <p class="section-label first">周度趋势</p>
        <div class="one-col">
          <div class="card chart-wrap stats-mb" id="trend-card"></div>
        </div>

        <!-- Row 2: Monthly + Quarterly -->
        <p class="section-label">月度 · 季度分布</p>
        <div class="one-col">
          <div class="card chart-wrap" id="month-card"></div>
        </div>
        <div class="one-col">
          <div class="card chart-wrap" id="quarter-card"></div>
        </div>

        <!-- Row 3: Type -->
        <p class="section-label">目标类型占比</p>
        <div class="one-col">
          <div class="card chart-wrap" id="type-card"></div>
        </div>

        <!-- Row 4: Province (full width) -->
        <p class="section-label">省份排行</p>
        <div class="one-col">
          <div class="card chart-wrap" id="prov-card"></div>
        </div>

        <!-- Row: Type stacked monthly (multi-type only) -->
        <div id="stacked-section" style="display:none">
          <p class="section-label">类型 × 月份堆叠分布</p>
          <div class="one-col">
            <div class="card chart-wrap stats-mb" id="stacked-card"></div>
          </div>
        </div>
        <!-- Row: Province × Month heatmap -->
        <div id="heatmap-section" style="display:none">
          <p class="section-label">省份 × 月份热力图</p>
          <div class="one-col">
            <div class="card chart-wrap stats-mb" id="heatmap-card"></div>
          </div>
        </div>
        <!-- Row: Type weekly trend lines (multi-type only) -->
        <div id="multitype-section" style="display:none">
          <p class="section-label">各类型周度趋势对比</p>
          <div class="one-col">
            <div class="card chart-wrap stats-mb" id="multitype-card"></div>
          </div>
        </div>
        <!-- Row: Year over Year (multi-year only) -->
        <div id="yoy-section" style="display:none">
          <p class="section-label">年度对比（同期周号）</p>
          <div class="one-col">
            <div class="card chart-wrap stats-mb" id="yoy-card"></div>
          </div>
        </div>

        <!-- Row: Province Volatility Analysis -->
        <p class="section-label">省份波动分析</p>
        <div class="one-col">
          <div class="card chart-wrap stats-mb" id="volatility-card"></div>
        </div>
      </div>

    </div>

  </main>

  <footer>沈浪 · 计划拆分工具 v1.0.41</footer>
</div>

<script>
(function () {
'use strict';

// ─── Constants ────────────────────────────────────────────────────────────────
const C = {
  VERSION: '1.0.41',
  ISO_MAJORITY: 4,
  DAYS: 7,
  THU: 3,
  MS_DAY: 86400000,
  MAX_FILE: 10 * 1024 * 1024,
  EXTS: ['.csv', '.xlsx', '.xls'],
  MONTHS: 12,
};

// ─── State ────────────────────────────────────────────────────────────────────
const S = {
  year: new Date().getFullYear(),
  noSpan: false,
  carryPrev: true,
  holiday: false,
  ranges: [],
  result: null,
  weeks: null,
  busy: false,
  sheetName: '',
  sheetResults: [],
  reset() {
    this.result = null;
    this.weeks = null;
    this.busy = false;
    this.sheetName = '';
    this.sheetResults = [];
  },
};

// ─── DOM helpers ──────────────────────────────────────────────────────────────
const $  = id => document.getElementById(id);
const el = (tag, cls, txt) => {
  const e = document.createElement(tag);
  if (cls) e.className = cls;
  if (txt !== undefined) e.textContent = txt;
  return e;
};
const RESULT_CARD_IDS = ['kpi-grid', 'trend-card', 'month-card', 'quarter-card', 'type-card', 'prov-card', 'volatility-card', 'stacked-card', 'heatmap-card', 'multitype-card', 'yoy-card'];
const OPTIONAL_SECTION_IDS = ['stacked-section', 'heatmap-section', 'multitype-section', 'yoy-section'];

// ─── Theme handling ───────────────────────────────────────────────────────────
function initTheme() {
  const savedTheme = localStorage.getItem('theme') || 'light';
  document.documentElement.setAttribute('data-theme', savedTheme);
  updateChartColors();

  const themeToggle = document.getElementById('theme-toggle');
  if (themeToggle) {
    themeToggle.addEventListener('click', () => {
      const currentTheme = document.documentElement.getAttribute('data-theme');
      const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
      document.documentElement.setAttribute('data-theme', newTheme);
      localStorage.setItem('theme', newTheme);
      updateChartColors();
      // Re-render charts if results exist
      if (S.result) renderStats();
    });
  }
}

// ─── Init ─────────────────────────────────────────────────────────────────────
document.addEventListener('DOMContentLoaded', () => {
  initTheme();
  setupOptions();
  setupDropzone();
  setupPageDrag();
  setupActions();
  syncCarry();
  updateHint();
});

// ─── Option checkboxes ────────────────────────────────────────────────────────
function setupOptions() {
  $('no-span').addEventListener('change', e => {
    S.noSpan = e.target.checked;
    syncCarry();
    updateHint();
  });
  $('carry-prev').addEventListener('change', e => {
    S.carryPrev = e.target.checked;
    updateHint();
  });
  $('enable-holiday').addEventListener('change', e => {
    S.holiday = e.target.checked;
    const p = $('holiday-panel');
    p.classList.toggle('open', S.holiday);
    if (S.holiday && S.ranges.length === 0) addRange();
    updateHint();
  });
}

function syncCarry() {
  const wrap = $('carry-wrap');
  const cb   = $('carry-prev');
  if (S.noSpan) {
    wrap.classList.remove('hidden');
  } else {
    wrap.classList.add('hidden');
    cb.checked = true;
    S.carryPrev = true;
  }
}

function updateHint() {
  const parts = [];
  if (S.noSpan) {
    parts.push(S.carryPrev
      ? '自然年模式：年初零散天数并入上年最后一周'
      : '自然年模式：年初零散天数独立为 W1');
  } else {
    parts.push('ISO 8601：跨年周按天数多的年份归属（≥4 天）');
  }
  if (S.holiday) parts.push('节假日目标转移至相邻周');
  $('option-hint').textContent = parts.join('　·　');
}

// ─── Holiday ranges ───────────────────────────────────────────────────────────
$('add-holiday').addEventListener('click', addRange);

function addRange() {
  S.ranges.push({ start: '', end: '', dir: 'next' });
  renderRanges();
}

function removeRange(i) {
  S.ranges.splice(i, 1);
  renderRanges();
}

function renderRanges() {
  const list = $('holiday-list');
  list.textContent = '';
  if (!S.ranges.length) {
    const p = el('p', 'hint-text', '暂无排除日期');
    list.appendChild(p);
    return;
  }
  S.ranges.forEach((r, i) => {
    const row = el('div', 'holiday-row');

    const s = document.createElement('input');
    s.type = 'date'; s.value = r.start;
    s.addEventListener('change', e => { S.ranges[i].start = e.target.value; });

    const dash = el('span', null, '至');
    dash.style.cssText = 'font-size:12px;color:var(--text-3);flex-shrink:0';

    const end = document.createElement('input');
    end.type = 'date'; end.value = r.end;
    end.addEventListener('change', e => { S.ranges[i].end = e.target.value; });

    const sel = document.createElement('select');
    sel.innerHTML = '<option value="next">分配给下周</option><option value="prev">分配给上周</option>';
    sel.value = r.dir;
    sel.addEventListener('change', e => { S.ranges[i].dir = e.target.value; });

    const rm = el('button', 'btn btn-danger-link', '×');
    rm.style.cssText = 'padding:2px 6px;font-size:15px';
    rm.addEventListener('click', () => removeRange(i));

    row.append(s, dash, end, sel, rm);
    list.appendChild(row);
  });
}

// ─── Dropzone ─────────────────────────────────────────────────────────────────
function setupDropzone() {
  const dz = $('dropzone');
  const fi = $('file-input');
  dz.addEventListener('click', () => { if (!S.busy) fi.click(); });
  dz.addEventListener('keydown', e => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); fi.click(); } });
  dz.addEventListener('dragover', e => { e.preventDefault(); dz.classList.add('drag-over'); });
  dz.addEventListener('dragleave', e => { if (!dz.contains(e.relatedTarget)) dz.classList.remove('drag-over'); });
  dz.addEventListener('drop', e => {
    e.preventDefault();
    dz.classList.remove('drag-over');
    if (e.dataTransfer.files[0]) processFile(e.dataTransfer.files[0]);
  });
  fi.addEventListener('change', e => { if (e.target.files[0]) processFile(e.target.files[0]); });
}

// ─── Full-page drag overlay ───────────────────────────────────────────────────
function setupPageDrag() {
  let counter = 0;
  document.addEventListener('dragenter', e => {
    if ([...e.dataTransfer.types].includes('Files')) {
      counter++;
      $('drag-overlay').classList.add('show');
    }
  });
  document.addEventListener('dragleave', () => {
    if (--counter <= 0) { counter = 0; $('drag-overlay').classList.remove('show'); }
  });
  document.addEventListener('drop', e => {
    counter = 0;
    $('drag-overlay').classList.remove('show');
    e.preventDefault();
    if (!S.busy && $('upload-section').style.display !== 'none' && e.dataTransfer.files[0]) {
      processFile(e.dataTransfer.files[0]);
    }
  });
  document.addEventListener('dragover', e => e.preventDefault());
}

// ─── Action buttons ───────────────────────────────────────────────────────────
function setupActions() {
  $('dl-template').addEventListener('click', downloadTemplate);
  $('dl-wide').addEventListener('click', downloadWide);
  $('dl-tidy').addEventListener('click', downloadTidy);
  $('btn-reset').addEventListener('click', resetApp);
  $('sheet-switcher').addEventListener('change', e => {
    setActiveSheet(Number(e.target.value));
    showResult();
  });
  $('toast-close').addEventListener('click', hideToast);
}

// ─── Toast ────────────────────────────────────────────────────────────────────
let toastTimer;
function showToast(msg, type = 'error') {
  const t = $('toast');
  $('toast-msg').textContent = msg;
  t.className = `show toast-${type}`;
  clearTimeout(toastTimer);
  if (type === 'ok') toastTimer = setTimeout(hideToast, 3000);
}
function hideToast() {
  clearTimeout(toastTimer);
  $('toast').classList.remove('show');
}

// ─── File processing ──────────────────────────────────────────────────────────
async function processFile(file) {
  if (S.busy) return;
  hideToast();
  setLoading(true);
  try {
    validateFile(file);
    const parsed = await parseFile(file);
    S.sheetResults = parsed.sheets.map(({ sheetName, data }) => {
      const { results, weeks } = processWeeklyTargets(data, S.year);
      return { sheetName, results, weeks };
    });
    if (!S.sheetResults.length) throw new Error('未能提取到可处理的 sheet 数据');
    setActiveSheet(0);
    showResult();
    if (S.sheetResults.length > 1) {
      showToast(`已处理 ${S.sheetResults.length} 个 sheet，导出时将合并为单个 Excel`, 'ok');
    }
  } catch (err) {
    showToast(err.message || '文件处理失败');
  } finally {
    setLoading(false);
  }
}

function validateFile(file) {
  if (file.size > C.MAX_FILE) throw new Error(`文件过大，最大支持 ${C.MAX_FILE / 1048576} MB`);
  const ext = file.name.slice(file.name.lastIndexOf('.')).toLowerCase();
  if (!C.EXTS.includes(ext)) throw new Error(`不支持的格式，仅支持 ${C.EXTS.join(' / ')}`);
}

function parseFile(file) {
  const name = String(file.name || '').toLowerCase();
  return (name.endsWith('.xlsx') || name.endsWith('.xls')) ? parseExcel(file) : parseCSV(file);
}

function parseExcel(file) {
  return new Promise((ok, fail) => {
    const r = new FileReader();
    r.onload = e => {
      try {
        const wb = XLSX.read(new Uint8Array(e.target.result), { type: 'array' });
        const sheets = wb.SheetNames.map(sheetName => {
          const raw = XLSX.utils.sheet_to_json(wb.Sheets[sheetName]);
          if (!raw.length) return null;
          const norm = raw.map(row => {
            const out = {};
            Object.keys(row).forEach(k => { out[normKey(k)] = row[k]; });
            return out;
          });
          if (!getCell(norm[0], '省份')) {
            throw new Error(`Sheet「${sheetName}」无法识别表头，请确保包含"省份"列`);
          }
          return { sheetName, data: validateData(norm) };
        }).filter(Boolean);
        if (!sheets.length) { fail(new Error('Excel 所有 sheet 均无有效数据')); return; }
        ok({ sheets });
      } catch (err) { fail(new Error('Excel 解析错误: ' + err.message)); }
    };
    r.onerror = () => fail(new Error('文件读取失败'));
    r.readAsArrayBuffer(file);
  });
}

function parseCSV(file) {
  return new Promise((ok, fail) => {
    const sheetName = file.name.replace(/\.[^/.]+$/, '') || 'CSV数据';
    const tryParse = enc => {
      Papa.parse(file, {
        header: true, skipEmptyLines: true, encoding: enc,
        transformHeader: h => normKey(h),
        complete: res => {
          const hasProvince = (res.meta.fields || []).some(f => normKey(f) === '省份');
          if (!hasProvince && !enc) { tryParse('GB18030'); return; }
          if (!hasProvince) { fail(new Error('无法识别表头，请确保包含"省份"列')); return; }
          ok({ sheets: [{ sheetName, data: validateData(res.data) }] });
        },
        error: err => fail(new Error('CSV 解析错误: ' + err.message)),
      });
    };
    tryParse();
  });
}

function normKey(k) {
  return String(k ?? '').replace(/^\uFEFF/, '').replace(/[\s\u3000]+/g, '').trim();
}

function getCell(row, hdr) {
  const want = normKey(hdr);
  if (!want) return null;
  for (const k of Object.keys(row)) {
    if (normKey(k) === want) {
      const v = row[k];
      if (v !== undefined && v !== null && String(v).trim() !== '') return String(v).trim();
      return null;
    }
  }
  return null;
}

function toInt(input) {
  if (typeof input === 'number') return Number.isFinite(input) ? Math.round(input) : 0;
  const s = String(input ?? '').trim().replace(/[,\uFF0C]/g, '');
  const n = Number(s);
  return Number.isFinite(n) ? Math.round(n) : 0;
}

function validateData(rows) {
  const result = [];
  rows.forEach(row => {
    const province = getCell(row, '省份');
    if (!province) return;
    const rawYear = getCell(row, '年份');
    const yearNum = rawYear ? parseInt(String(rawYear).trim(), 10) : null;
    const year = Number.isFinite(yearNum) ? yearNum : null;
    const tt = getCell(row, '目标类型');
    const targetType = (tt && tt.trim()) ? tt.trim() : '默认';
    const months = [];
    for (let i = 1; i <= 12; i++) months.push(toInt(getCell(row, `${i}月`)));
    let total = toInt(getCell(row, '合计'));
    if (!total) total = months.reduce((a, b) => a + b, 0);
    result.push({ province, total, months, year, targetType });
  });
  if (!result.length) throw new Error('未能提取到有效数据，请检查文件格式');
  return result;
}

// ─── Calendar ────────────────────────────────────────────────────────────────
function dayAt(y, m, d) { return new Date(y, m, d, 12, 0, 0); }  // noon, DST-safe
function addDays(d, n) { const r = new Date(d.getTime()); r.setDate(r.getDate() + n); return r; }

function isoWeek(date) {
  const d = new Date(date);
  d.setHours(0, 0, 0, 0);
  d.setDate(d.getDate() + C.THU - ((d.getDay() + 6) % C.DAYS));
  const w1 = new Date(d.getFullYear(), 0, 4);
  return 1 + Math.round(((d - w1) / C.MS_DAY - C.THU + ((w1.getDay() + 6) % C.DAYS)) / C.DAYS);
}

function weekStart(date) {
  const d = new Date(date);
  const day = d.getDay();
  d.setDate(d.getDate() + (day === 0 ? -6 : 1 - day));
  d.setHours(12, 0, 0, 0); // noon for DST safety
  return d;
}

function fmt(date) {
  return `${date.getFullYear()}/${String(date.getMonth()+1).padStart(2,'0')}/${String(date.getDate()).padStart(2,'0')}`;
}

function parseDate(str) {
  const [y, m, d] = str.split('/').map(Number);
  return dayAt(y, m - 1, d);
}

function noSpanLastWeek(year) {
  const ye = dayAt(year, 11, 31);
  let mon = dayAt(year, 0, 1);
  while (mon.getDay() !== 1) mon = addDays(mon, 1);
  let n = 0, cur = new Date(mon.getTime());
  while (cur <= ye) { n++; cur = addDays(cur, 7); }
  return n;
}

function getWeeks(year, noSpan) {
  const weeks = [];
  if (noSpan) {
    const ys  = dayAt(year, 0, 1);
    const ye  = dayAt(year, 11, 31);
    let firstMon = new Date(ys.getTime());
    while (firstMon.getDay() !== 1) firstMon = addDays(firstMon, 1);
    let wn = 1;
    if (ys.getTime() < firstMon.getTime()) {
      const partEnd = addDays(firstMon, -1);
      const wNum = S.carryPrev ? noSpanLastWeek(year - 1) : 1;
      weeks.push({ weekKey: `${fmt(ys)}-${fmt(partEnd)}`, weekNumber: wNum, startDate: fmt(ys), endDate: fmt(partEnd), monthIndex: 0, monthName: '1月', year, isPartial: true });
      wn = S.carryPrev ? 1 : 2;
    }
    let cur = new Date(firstMon.getTime());
    while (cur <= ye) {
      const mon = new Date(cur.getTime());
      let sun = addDays(mon, 6);
      const partial = sun > ye;
      if (partial) sun = new Date(ye.getTime());
      const thu = addDays(mon, C.THU);
      const mi = thu <= ye ? thu.getMonth() : 11;
      weeks.push({ weekKey: `${fmt(mon)}-${fmt(sun)}`, weekNumber: wn++, startDate: fmt(mon), endDate: fmt(sun), monthIndex: mi, monthName: `${mi+1}月`, year, isPartial: partial });
      cur = addDays(mon, 7);
    }
  } else {
    // ISO 8601 — use noon for DST safety
    const s = weekStart(dayAt(year, 0, 1));
    const e = weekStart(dayAt(year, 11, 31));
    let cur = new Date(s.getTime());
    while (cur <= e) {
      const mon = new Date(cur.getTime());
      const sun = addDays(mon, 6);
      const wn  = isoWeek(mon);
      const thu = addDays(mon, C.THU);
      const mi  = thu.getMonth();
      weeks.push({ weekKey: `${fmt(mon)}-${fmt(sun)}`, weekNumber: wn, startDate: fmt(mon), endDate: fmt(sun), monthIndex: mi, monthName: `${mi+1}月`, year });
      cur = addDays(cur, 7);
    }
  }
  return weeks;
}

function daysInYear(week, yr) {
  const s = parseDate(week.startDate), e = parseDate(week.endDate);
  let n = 0, c = new Date(s.getTime());
  while (c <= e) { if (c.getFullYear() === yr) n++; c = addDays(c, 1); }
  return n;
}

function monthForWeekInYear(week, yr) {
  const s = parseDate(week.startDate);
  const e = parseDate(week.endDate);
  const thu = addDays(s, 3);
  if (thu.getFullYear() === yr) return thu.getMonth();
  let c = new Date(s.getTime());
  while (c <= e) { if (c.getFullYear() === yr) return c.getMonth(); c = addDays(c, 1); }
  return week.monthIndex;
}

// ─── Core algorithm ───────────────────────────────────────────────────────────
function processWeeklyTargets(data, fallbackYear) {
  const byYear = new Map();
  data.forEach(row => {
    const yr = Number.isFinite(row.year) ? row.year : fallbackYear;
    if (!byYear.has(yr)) byYear.set(yr, []);
    byYear.get(yr).push({ ...row, year: yr });
  });

  const years = [...byYear.keys()].sort((a, b) => a - b);
  const allResults = [], allWeeks = [];

  years.forEach(year => {
    const weeksForYear = getWeeks(year, S.noSpan);
    const included = [], monthMap = new Map();

    if (S.noSpan) {
      weeksForYear.forEach(w => {
        const s = parseDate(w.startDate), e = parseDate(w.endDate);
        const days = Math.round((e - s) / C.MS_DAY) + 1;
        if (!monthMap.has(w.monthIndex)) monthMap.set(w.monthIndex, []);
        monthMap.get(w.monthIndex).push({ week: w, days });
        included.push(w);
      });
    } else {
      weeksForYear.forEach(w => {
        const d = daysInYear(w, year);
        if (d >= C.ISO_MAJORITY) {
          const mi = monthForWeekInYear(w, year);
          if (!monthMap.has(mi)) monthMap.set(mi, []);
          monthMap.get(mi).push({ week: w, days: d });
          included.push(w);
        }
      });
    }

    const rowsForYear = byYear.get(year);
    // Group by province
    const byProv = new Map();
    rowsForYear.forEach(row => {
      const p = (row.province ?? '').trim();
      if (!p) return;
      if (!byProv.has(p)) byProv.set(p, []);
      byProv.get(p).push(row);
    });

    byProv.forEach((provRows, province) => {
      // FIX: use JSON composite key to avoid __ collision
      const typeMap = new Map();
      provRows.forEach(row => {
        const t = (row.targetType ?? '默认').trim() || '默认';
        typeMap.set(t, row);
      });

      const weeklyByType = new Map([...typeMap.keys()].map(t => [t, {}]));

      for (let mi = 0; mi < C.MONTHS; mi++) {
        const assoc = monthMap.get(mi) || [];
        if (!assoc.length) continue;
        const totalDays = assoc.reduce((s, it) => s + it.days, 0);
        if (totalDays <= 0) continue;

        const typeTotals = [...typeMap.entries()].map(([t, row]) => ({ targetType: t, monthTotal: row.months?.[mi] ?? 0 }));
        const monthTotalAll = typeTotals.reduce((s, r) => s + r.monthTotal, 0);
        if (!monthTotalAll) continue;

        const weekKeys = assoc.map(it => it.week.weekKey);
        const props    = assoc.map(it => it.days / totalDays);
        const weekDemand = roundedWeekDemand(monthTotalAll, weekKeys, props);
        const exactMat   = exactMatrix(typeTotals, weekKeys, props);
        const alloc = solveAllocation({ typeTotals, weekKeys, weekDemand, exactMat });

        alloc.forEach(({ targetType, weekKey, value }) => {
          if (!value) return;
          const cur = weeklyByType.get(targetType) || {};
          weeklyByType.set(targetType, { ...cur, [weekKey]: (cur[weekKey] ?? 0) + value });
        });
      }

      weeklyByType.forEach((weeklyTargets, targetType) => {
        allResults.push({ province, targetType, weeklyTargets });
      });
    });
    allWeeks.push(...included);
  });

  // Apply holiday to all results at once
  const finalRes = S.holiday && S.ranges.length
    ? applyHoliday(allResults, allWeeks).results
    : allResults;

  return { results: mergeResults(finalRes), weeks: allWeeks, years };
}

function mergeResults(results) {
  const map = new Map();
  results.forEach(row => {
    const key = JSON.stringify([row.province, row.targetType]); // FIX: no __ collision
    if (!map.has(key)) map.set(key, { province: row.province, targetType: row.targetType, weeklyTargets: {} });
    const acc = map.get(key);
    Object.entries(row.weeklyTargets || {}).forEach(([wk, v]) => {
      if (v) acc.weeklyTargets[wk] = (acc.weeklyTargets[wk] ?? 0) + v;
    });
  });
  return [...map.values()].sort((a, b) => {
    const p = a.province.localeCompare(b.province, 'zh-Hans-CN');
    return p !== 0 ? p : a.targetType.localeCompare(b.targetType, 'zh-Hans-CN');
  });
}

function roundedWeekDemand(total, weekKeys, props) {
  const items = weekKeys.map((k, i) => {
    const ex = total * (props[i] ?? 0);
    const fl = Math.floor(ex);
    return { weekKey: k, floor: fl, rem: ex - fl };
  });
  const deficit = total - items.reduce((s, it) => s + it.floor, 0);
  const sorted  = [...items].sort((a, b) => b.rem - a.rem);
  const dm = new Map(sorted.map((it, i) => [it.weekKey, it.floor + (i < deficit ? 1 : 0)]));
  return weekKeys.map(k => ({ weekKey: k, demand: dm.get(k) ?? 0 }));
}

function exactMatrix(typeTotals, weekKeys, props) {
  const m = new Map();
  typeTotals.forEach(({ targetType, monthTotal }) => {
    const row = new Map(weekKeys.map((k, i) => [k, (monthTotal ?? 0) * (props[i] ?? 0)]));
    m.set(targetType, row);
  });
  return m;
}

function solveAllocation({ typeTotals, weekKeys, weekDemand, exactMat }) {
  const demMap = new Map(weekDemand.map(d => [d.weekKey, d.demand]));
  const lower = new Map(), rem = new Map();

  typeTotals.forEach(({ targetType }) => {
    const rl = new Map(), rr = new Map();
    weekKeys.forEach(k => {
      const ex = exactMat.get(targetType)?.get(k) ?? 0;
      const fl = Math.floor(ex);
      rl.set(k, fl); rr.set(k, ex - fl);
    });
    lower.set(targetType, rl); rem.set(targetType, rr);
  });

  const rowRem = new Map(typeTotals.map(({ targetType, monthTotal }) => {
    const base = [...(lower.get(targetType)?.values() ?? [])].reduce((s, v) => s + v, 0);
    return [targetType, (monthTotal ?? 0) - base];
  }));
  const colRem = new Map(weekKeys.map(k => {
    const base = typeTotals.reduce((s, { targetType }) => s + (lower.get(targetType)?.get(k) ?? 0), 0);
    return [k, (demMap.get(k) ?? 0) - base];
  }));

  const totalRowRem = [...rowRem.values()].reduce((a, b) => a + b, 0);
  const totalColRem = [...colRem.values()].reduce((a, b) => a + b, 0);
  if (totalRowRem !== totalColRem) throw new Error('内部错误：月度拆分边际不一致');

  const incr = totalRowRem > 0 ? mcmfAllocate({ typeTotals, weekKeys, rowRem, colRem, rem }) : new Map();

  const out = [];
  typeTotals.forEach(({ targetType }) => {
    weekKeys.forEach(k => {
      const base = lower.get(targetType)?.get(k) ?? 0;
      const inc  = incr.get(JSON.stringify([targetType, k])) ?? 0;
      if (base + inc) out.push({ targetType, weekKey: k, value: base + inc });
    });
  });
  return out;
}

function mcmfAllocate({ typeTotals, weekKeys, rowRem, colRem, rem }) {
  const SCALE = 1000000;
  const types = typeTotals.map(t => t.targetType);
  const N = 2 + types.length + weekKeys.length;
  const S_node = 0, T_node = N - 1;
  const tOff = 1, wOff = 1 + types.length;

  const graph = Array.from({ length: N }, () => []);
  const addEdge = (u, v, cap, cost) => {
    graph[u].push({ to: v, rev: graph[v].length, cap, cost });
    graph[v].push({ to: u, rev: graph[u].length - 1, cap: 0, cost: -cost });
  };

  types.forEach((t, i) => { const s = rowRem.get(t) ?? 0; if (s > 0) addEdge(S_node, tOff + i, s, 0); });
  weekKeys.forEach((k, j) => { const d = colRem.get(k) ?? 0; if (d > 0) addEdge(wOff + j, T_node, d, 0); });
  types.forEach((t, i) => {
    weekKeys.forEach((k, j) => {
      const r = rem.get(t)?.get(k) ?? 0;
      addEdge(tOff + i, wOff + j, 1_000_000_000, -Math.round(r * SCALE));
    });
  });

  const maxFlow = [...rowRem.values()].reduce((a, b) => a + b, 0);
  let flow = 0;
  const pot = new Array(N).fill(0);

  while (flow < maxFlow) {
    const dist = new Array(N).fill(Infinity);
    const prevV = new Array(N).fill(-1), prevE = new Array(N).fill(-1);
    dist[S_node] = 0;
    // FIX: Use index-based deque instead of Array.shift() for O(N) optimization
    const inQ = new Array(N).fill(false);
    const q = [S_node]; let head = 0;
    inQ[S_node] = true;
    while (head < q.length) {
      const u = q[head++]; inQ[u] = false;
      for (let ei = 0; ei < graph[u].length; ei++) {
        const e = graph[u][ei];
        if (e.cap <= 0) continue;
        const nd = dist[u] + e.cost + pot[u] - pot[e.to];
        if (nd < dist[e.to]) {
          dist[e.to] = nd; prevV[e.to] = u; prevE[e.to] = ei;
          if (!inQ[e.to]) { q.push(e.to); inQ[e.to] = true; }
        }
      }
    }
    if (!isFinite(dist[T_node])) throw new Error('内部错误：无法完成多目标类型的周度整数分配');
    for (let v = 0; v < N; v++) if (isFinite(dist[v])) pot[v] += dist[v];

    let add = maxFlow - flow;
    for (let v = T_node; v !== S_node; v = prevV[v]) add = Math.min(add, graph[prevV[v]][prevE[v]].cap);
    for (let v = T_node; v !== S_node; v = prevV[v]) {
      const e = graph[prevV[v]][prevE[v]];
      e.cap -= add;
      graph[v][e.rev].cap += add;
    }
    flow += add;
  }

  const incr = new Map();
  types.forEach((t, i) => {
    graph[tOff + i].forEach(e => {
      if (e.to >= wOff && e.to < wOff + weekKeys.length) {
        const used = graph[e.to][e.rev].cap;
        if (used > 0) incr.set(JSON.stringify([t, weekKeys[e.to - wOff]]), used);
      }
    });
  });
  return incr;
}

// ─── Holiday exclusion ────────────────────────────────────────────────────────
function applyHoliday(results, weeks) {
  const validRanges = S.ranges
    .filter(r => r.start && r.end)
    .map(r => {
      let s = new Date(r.start), e = new Date(r.end);
      if (!isFinite(s) || !isFinite(e)) return null;
      if (s > e) [s, e] = [e, s];
      return { start: s, end: e, dir: r.dir };
    })
    .filter(Boolean);

  if (!validRanges.length) return { results, weeks };

  const exInfo = new Map();
  weeks.forEach((week, wi) => {
    const ws = parseDate(week.startDate), we = parseDate(week.endDate);
    const total = Math.round((we - ws) / C.MS_DAY) + 1;
    let excl = 0, dir = null;
    validRanges.forEach(r => {
      const os = new Date(Math.max(ws.getTime(), r.start.getTime()));
      const oe = new Date(Math.min(we.getTime(), r.end.getTime()));
      if (os <= oe) {
        excl += Math.round((oe - os) / C.MS_DAY) + 1;
        if (dir === null) dir = r.dir; // FIX: first match wins; overlapping ranges noted
      }
    });
    if (excl > 0) exInfo.set(week.weekKey, { excl, total, weekIdx: wi, full: excl >= total, dir });
  });

  const fullExcl = new Set([...exInfo.entries()].filter(([, v]) => v.full).map(([k]) => k));

  function findTarget(startIdx, dir, excluded) {
    let idx = startIdx;
    while (idx >= 0 && idx < weeks.length) {
      if (!excluded.has(weeks[idx].weekKey)) return idx;
      idx += dir === 'prev' ? -1 : 1;
    }
    idx = startIdx;
    while (idx >= 0 && idx < weeks.length) {
      if (!excluded.has(weeks[idx].weekKey)) return idx;
      idx += dir === 'prev' ? 1 : -1;
    }
    return -1;
  }

  const adjResults = results.map(row => {
    const nt = { ...row.weeklyTargets };
    exInfo.forEach((info, weekKey) => {
      const cur = nt[weekKey] || 0;
      if (!cur) return;
      const xfer = info.full ? cur : Math.round(cur * info.excl / info.total);
      if (!xfer) return;
      const ti = findTarget(info.weekIdx, info.dir, fullExcl);
      if (ti >= 0) {
        const tk = weeks[ti].weekKey;
        nt[weekKey] = cur - xfer;
        nt[tk] = (nt[tk] || 0) + xfer;
      }
    });
    return { province: row.province, targetType: row.targetType, weeklyTargets: nt };
  });

  const adjWeeks = weeks.map(w => ({
    ...w,
    hasHolidayExclusion: exInfo.has(w.weekKey),
    isFullyExcluded: exInfo.get(w.weekKey)?.full || false,
  }));

  return { results: adjResults, weeks: adjWeeks };
}

// ─── UI control ───────────────────────────────────────────────────────────────
function setLoading(on) {
  S.busy = on;
  $('dz-upload').style.display = on ? 'none' : 'block';
  $('dz-loading').style.display = on ? 'block' : 'none';
  if (!on) $('file-input').value = '';
}

function setActiveSheet(index) {
  const item = S.sheetResults[index];
  if (!item) {
    S.result = null;
    S.weeks = null;
    S.sheetName = '';
    return;
  }
  S.result = item.results;
  S.weeks = item.weeks;
  S.sheetName = item.sheetName;
}

function setVisible(id, visible) {
  const node = $(id);
  if (node) node.style.display = visible ? '' : 'none';
}

function clearResultPanels() {
  RESULT_CARD_IDS.forEach(id => {
    const node = $(id);
    if (node) node.textContent = '';
  });
  OPTIONAL_SECTION_IDS.forEach(id => setVisible(id, false));
}

function renderSheetSwitcher() {
  const wrap = $('sheet-switch-wrap');
  const select = $('sheet-switcher');
  if (!wrap || !select) return;
  select.textContent = '';
  if (S.sheetResults.length <= 1) {
    wrap.classList.remove('open');
    return;
  }
  S.sheetResults.forEach((item, index) => {
    const option = document.createElement('option');
    option.value = String(index);
    option.textContent = item.sheetName;
    option.selected = item.sheetName === S.sheetName;
    select.appendChild(option);
  });
  wrap.classList.add('open');
}

function showResult() {
  $('upload-section').style.display = 'none';
  const rs = $('result-section');
  rs.classList.add('visible');
  renderSheetSwitcher();

  const years = [...new Set(S.weeks.map(w => w.year))].sort((a, b) => a - b);
  const types = [...new Set(S.result.map(r => r.targetType))];
  const yrTxt = years.length > 1 ? `${years[0]}–${years[years.length-1]}` : `${years[0]}`;

  $('result-badge-year').textContent = `${yrTxt} 年`;
  $('result-badge-rows').textContent = `${S.result.length} 条记录`;
  const tb = $('result-badge-types');
  if (types.length > 1) { tb.textContent = `${types.length} 种目标类型`; tb.style.display = ''; }
  else tb.style.display = 'none';

  // 显示sheet名称
  const sheetNameEl = $('sheet-name');
  if (sheetNameEl && S.sheetName) {
    sheetNameEl.textContent = S.sheetResults.length > 1
      ? `· ${S.sheetName}（当前预览）`
      : `· ${S.sheetName}`;
  }

  renderStats();
}

function fmt2(n) { return typeof n === 'number' ? n.toLocaleString('zh-CN') : n; }

function resetApp() {
  S.reset();
  $('upload-section').style.display = '';
  const rs = $('result-section');
  rs.classList.remove('visible');
  const sheetNameEl = $('sheet-name');
  if (sheetNameEl) sheetNameEl.textContent = '';
  const switchWrap = $('sheet-switch-wrap');
  const switcher = $('sheet-switcher');
  if (switchWrap) switchWrap.classList.remove('open');
  if (switcher) switcher.textContent = '';
  clearResultPanels();
}

  // ─── Analytics: color palette ────────────────────────────────────────────────
function getChartColors() {
  const isLight = document.documentElement.getAttribute('data-theme') === 'light';
  if (isLight) {
    return {
      primary: '#2563eb',
      primarySoft: 'rgba(37,99,235,.15)',
      grid: 'rgba(0,0,0,.06)',
      gridStrong: 'rgba(0,0,0,.1)',
      axis: '#5c5a54',
      peak: '#b45309',
      series: [
        '#2563eb',
        '#16a34a',
        '#b45309',
        '#9333ea',
        '#0891b2',
        '#dc2626',
        '#db2777',
        '#0d9488',
        '#4f46e5',
        '#65a30d',
        '#e11d48',
        '#0284c7'
      ],
      quarter: ['#2563eb', '#16a34a', '#b45309', '#9333ea'],
      heat: {
        minOpacity: 0.08,
        maxOpacity: 0.65
      }
    };
  }
  return {
    primary: '#60a5fa',
    primarySoft: 'rgba(96,165,250,.15)',
    grid: 'rgba(255,255,255,.06)',
    gridStrong: 'rgba(255,255,255,.1)',
    axis: '#b8b4ab',
    peak: '#fbbf24',
    series: [
      '#60a5fa',
      '#4ade80',
      '#fbbf24',
      '#c084fc',
      '#22d3ee',
      '#f87171',
      '#f472b6',
      '#2dd4bf',
      '#818cf8',
      '#a3e635',
      '#fb7185',
      '#38bdf8'
    ],
quarter: ['#60a5fa', '#4ade80', '#fbbf24', '#c084fc'],
      heat: {
        minOpacity: 0.1,
        maxOpacity: 0.7
      }
  };
}

let CHART_COLORS = getChartColors();
const PALETTE = () => CHART_COLORS.series;
function typeColor(types, t) { return CHART_COLORS.series[types.indexOf(t) % CHART_COLORS.series.length]; }
function provColor(i) { return CHART_COLORS.series[i % CHART_COLORS.series.length]; }
function updateChartColors() { CHART_COLORS = getChartColors(); }

function getMonochromeSeriesColor(idx, total) {
  const isLight = document.documentElement.getAttribute('data-theme') === 'light';
  if (isLight) {
    const minL = 15;
    const maxL = 70;
    const lightness = minL + (idx / Math.max(total - 1, 1)) * (maxL - minL);
    return `hsl(220, 5%, ${lightness}%)`;
  }
  return `rgba(245, 244, 240, ${Math.max(0.95 - (idx * 0.15), 0.35)})`;
}

// ─── Tooltip helpers ─────────────────────────────────────────────────────────
const TT = { el: null };
function initTooltip() {
  TT.el = document.getElementById('cht');
  document.addEventListener('mousemove', e => {
    if (!TT.el.classList.contains('on')) return;
    const r = TT.el.getBoundingClientRect();
    let x = e.clientX + 14, y = e.clientY - 10;
    if (x + r.width > window.innerWidth - 10) x = e.clientX - r.width - 14;
    if (y + r.height > window.innerHeight - 10) y = e.clientY - r.height - 10;
    TT.el.style.left = x + 'px';
    TT.el.style.top  = y + 'px';
  });
}

function ttEscape(s) {
  return String(s)
    .replaceAll('&', '&amp;')
    .replaceAll('<', '&lt;')
    .replaceAll('>', '&gt;')
    .replaceAll('"', '&quot;')
    .replaceAll("'", '&#39;');
}

function ttStripTags(s) {
  return String(s).replace(/<[^>]*>/g, '');
}

function ttNormalizeLines(raw) {
  const s = String(raw ?? '')
    .replaceAll('\r\n', '\n')
    .replaceAll('\r', '\n')
    .replaceAll('\n', '<br>');
  return s
    .split(/<br\s*\/?>/i)
    .map(x => x.trim())
    .filter(Boolean);
}

function ttFormat(raw) {
  const lines = ttNormalizeLines(raw);
  if (!lines.length) return '';

  const title = ttEscape(ttStripTags(lines[0]).trim());
  const rest = lines.slice(1).map(l => ttStripTags(l).trim()).filter(Boolean);

  const rows = rest.map(line => {
    const idxCN = line.indexOf('：');
    const idxEN = line.indexOf(':');
    const idx = (idxCN >= 0) ? idxCN : idxEN;
    if (idx > 0) {
      const k = line.slice(0, idx).trim();
      const v = line.slice(idx + 1).trim();
      return `<div class="tt-row"><span class="tt-k">${ttEscape(k)}</span><span class="tt-v">${ttEscape(v)}</span></div>`;
    }
    return `<div class="tt-line">${ttEscape(line)}</div>`;
  }).join('');

  return `<div class="tt"><div class="tt-title">${title}</div><div class="tt-body">${rows}</div></div>`;
}

function ttShow(content) {
  if (!TT.el) return;
  TT.el.innerHTML = ttFormat(content);
  TT.el.classList.add('on');
}
function ttHide()     { if (TT.el) TT.el.classList.remove('on'); }

// ─── Analytics: data computation ─────────────────────────────────────────────
function computeData() {
  const weeks   = S.weeks;
  const result  = S.result;
  const types   = [...new Set(result.map(r => r.targetType))];
  const provs   = [...new Set(result.map(r => r.province))];
  const years   = [...new Set(weeks.map(w => w.year))].sort((a,b)=>a-b);
  const weekIndexMap = new Map(weeks.map((week, index) => [week.weekKey, index]));
  const weekTotals = weeks.map(week => ({ week, total: 0 }));
  const monthTotals = Array(C.MONTHS).fill(0);
  const quarterTotals = [0, 0, 0, 0];
  const byType = Object.fromEntries(types.map(type => [type, 0]));
  const byProv = Object.fromEntries(provs.map(province => [province, 0]));
  const typeWeek = Object.fromEntries(types.map(type => [type, {}]));
  const typeMonth = Object.fromEntries(types.map(type => [type, Array(C.MONTHS).fill(0)]));
  const provMonth = Object.fromEntries(provs.map(province => [province, Array(C.MONTHS).fill(0)]));
  const provWeek = Object.fromEntries(provs.map(province => [province, Array(weeks.length).fill(0)]));
  const yearWeek = Object.fromEntries(years.map(year => [year, {}]));

  result.forEach(row => {
    const type = row.targetType;
    const province = row.province;
    Object.entries(row.weeklyTargets || {}).forEach(([weekKey, value]) => {
      if (!value) return;
      const index = weekIndexMap.get(weekKey);
      if (index === undefined) return;
      const week = weeks[index];
      weekTotals[index].total += value;
      byType[type] += value;
      byProv[province] += value;
      typeWeek[type][weekKey] = (typeWeek[type][weekKey] ?? 0) + value;
      typeMonth[type][week.monthIndex] += value;
      provMonth[province][week.monthIndex] += value;
      provWeek[province][index] += value;
      yearWeek[week.year][week.weekNumber] = (yearWeek[week.year][week.weekNumber] ?? 0) + value;
    });
  });

  const grand = weekTotals.reduce((sum, item) => sum + item.total, 0);
  weekTotals.forEach(({ week, total }) => { monthTotals[week.monthIndex] += total; });
  monthTotals.forEach((value, index) => { quarterTotals[Math.floor(index / 3)] += value; });

  // stats
  const withPlan = weekTotals.filter(w => w.total > 0);
  const planned  = withPlan.length;
  const peak     = planned ? Math.max(...withPlan.map(w => w.total)) : 0;
  const trough   = planned ? Math.min(...withPlan.map(w => w.total)) : 0;
  const avg      = planned ? grand / planned : 0;
  const variance = planned ? withPlan.reduce((s, w) => s + (w.total - avg) ** 2, 0) / planned : 0;
  const cv       = avg > 0 ? Math.round((Math.sqrt(variance) / avg) * 100) : 0;
  const peakWeek = withPlan.reduce((a, w) => w.total > a.total ? w : a, withPlan[0] || { week: null, total: 0 });


  const peakGap = planned ? (peak - trough) : 0;
  const empty = weekTotals.length - planned;
  const emptyRatio = weekTotals.length ? Math.round((empty / weekTotals.length) * 100) : 0;


  const topMonthIdx = monthTotals.length ? monthTotals.reduce((bestIdx, v, idx, arr) => (v > (arr[bestIdx] ?? -1) ? idx : bestIdx), 0) : null;
  const topMonth = topMonthIdx != null ? { monthIndex: topMonthIdx, value: monthTotals[topMonthIdx] ?? 0 } : null;

  const topQuarterIdx = quarterTotals.length ? quarterTotals.reduce((bestIdx, v, idx, arr) => (v > (arr[bestIdx] ?? -1) ? idx : bestIdx), 0) : null;
  const topQuarter = topQuarterIdx != null ? { label: `Q${topQuarterIdx + 1}`, value: quarterTotals[topQuarterIdx] ?? 0 } : null;

  const topProvEntry = Object.entries(byProv).sort((a, b) => b[1] - a[1])[0];
  const topProv = topProvEntry ? { name: topProvEntry[0], value: topProvEntry[1] } : null;


  const monthPlanned = monthTotals.filter(v => v > 0).length;
  const monthEmpty = 12 - monthPlanned;

  return { weeks, result, weekTotals, grand, monthTotals, quarterTotals,
           byType, byProv, typeWeek, typeMonth, provMonth, provWeek, yearWeek,
           types, provs, years, planned, peak, trough, avg, cv, peakWeek,
           peakGap, empty, emptyRatio, topMonth, topQuarter, topProv,
           monthPlanned, monthEmpty };
}

// ─── SVG helpers ──────────────────────────────────────────────────────────────
const NS = 'http://www.w3.org/2000/svg';
function svgEl(tag, attrs) {
  const e = document.createElementNS(NS, tag);
  Object.entries(attrs || {}).forEach(([k, v]) => e.setAttribute(k, v));
  return e;
}
function makeSVG(vw, vh, cls) {
  return svgEl('svg', { viewBox: `0 0 ${vw} ${vh}`, width: '100%', height: vh, class: cls || '' });
}
function num(n, d=1) { return typeof n === 'number' ? (d===0?Math.round(n):+(n.toFixed(d))).toLocaleString('zh-CN') : n; }

function prepareChartCard(cardId, title, { note, legend } = {}) {
  const card = $(cardId);
  card.textContent = '';
  const hd = el('div', 'chart-hd');
  hd.appendChild(el('span', 'chart-ttl', title));
  if (note) hd.appendChild(el('span', 'chart-note', note));
  if (legend) hd.appendChild(legend);
  card.appendChild(hd);
  return card;
}

function getYearSegments(weeks) {
  return weeks.reduce((segments, week, index) => {
    const last = segments[segments.length - 1];
    if (!last || last.year !== week.year) {
      segments.push({ year: week.year, start: index, end: index });
    } else {
      last.end = index;
    }
    return segments;
  }, []);
}

function appendYAxisLabels(svg, { ticks, maxV, x, top, height }) {
  ticks.forEach(fraction => {
    const y = top + height - fraction * height;
    const label = svgEl('text', { x, y: y + 3, 'font-size': '9', fill: CHART_COLORS.axis, 'text-anchor': 'end', 'font-family': 'var(--ff-mono)' });
    label.textContent = num(fraction * maxV, 0);
    svg.appendChild(label);
  });
}

function appendWeekLabels(svg, weeks, { left, width, y, predicate = week => week.weekNumber % 4 === 1, formatter = week => `W${week.weekNumber}` }) {
  weeks.forEach((week, index) => {
    if (!predicate(week, index)) return;
    const x = left + (index / Math.max(weeks.length - 1, 1)) * width;
    const label = svgEl('text', { x, y, 'text-anchor': 'middle', 'font-size': '9', fill: CHART_COLORS.axis, 'font-family': 'var(--ff-mono)' });
    label.textContent = formatter(week, index);
    svg.appendChild(label);
  });
}

function appendYearLabels(svg, weeks, { left, width, y }) {
  getYearSegments(weeks).forEach(({ year, start, end }) => {
    const mid = (start + end) / 2;
    const x = left + (mid / Math.max(weeks.length - 1, 1)) * width;
    const label = svgEl('text', { x, y, 'text-anchor': 'middle', 'font-size': '9', fill: CHART_COLORS.axis, 'font-family': 'var(--ff-mono)' });
    label.textContent = `${String(year).slice(-2)}年`;
    svg.appendChild(label);
  });
}

function buildProgressList(entries, { total = 0, tooltip } = {}) {
  const maxValue = entries.reduce((max, item) => Math.max(max, item.value), 1);
  const list = el('div', 'prov-list');
  entries.forEach((item, index) => {
    const percent = total ? Math.round(item.value / total * 100) : 0;
    const row = el('div', 'prov-row');
    const name = el('div', 'prov-name', item.label);
    name.style.cssText = 'font-weight:600;color:var(--text)';
    const track = el('div', 'prov-track');
    const fill = el('div', 'prov-fill');
    fill.style.width = `${(item.value / maxValue) * 100}%`;
    fill.style.background = 'var(--text)';
    fill.style.opacity = '0.7';
    track.appendChild(fill);
    row.append(name, track, el('div', 'prov-val', fmt2(item.value)), el('div', 'prov-pct', `${percent}%`));
    if (tooltip) {
      row.addEventListener('mouseenter', () => ttShow(tooltip(item, { index, percent })));
      row.addEventListener('mouseleave', ttHide);
    }
    list.appendChild(row);
  });
  return list;
}

const LAYOUT = { WIDE: 'wide', TIDY: 'tidy' };

function buildSheetRows(item, layout) {
  const { results, weeks } = item;
  if (layout === LAYOUT.WIDE) {
    return [
      ['归属年份', '', ...weeks.map(week => String(week.year))],
      ['归属季度', '', ...weeks.map(week => String(Math.floor(week.monthIndex / 3) + 1))],
      ['归属月份', '', ...weeks.map(week => String(week.monthIndex + 1))],
      ['省份', '目标类型', ...weeks.map(week => String(week.weekNumber))],
      ['(日期范围)', '', ...weeks.map(week => `${week.startDate}~${week.endDate.slice(5)}`)],
      ...results.map(row => [row.province, row.targetType || '默认', ...weeks.map(week => row.weeklyTargets[week.weekKey] ?? 0)]),
    ];
  }
  const headers = ['省份', '目标类型', '周号', '月份', '季度', '年度', '周开始日期', '周结束日期', '周度计划', '辅助列'];
  const rows = [];
  results.forEach(row => {
    weeks.forEach(week => {
      const year = String(week.year);
      const month = String(week.monthIndex + 1);
      const weekNumber = String(week.weekNumber);
      rows.push([
        row.province,
        row.targetType || '默认',
        weekNumber,
        month,
        String(Math.floor(week.monthIndex / 3) + 1),
        year,
        week.startDate,
        week.endDate,
        row.weeklyTargets[week.weekKey] ?? 0,
        `${row.province}-${year}-${month}-${weekNumber}`,
      ]);
    });
  });
  return [headers, ...rows];
}

// ─── KPI cards ────────────────────────────────────────────────────────────────
function renderKPIs(d) {
  const kg = $('kpi-grid');
  kg.textContent = '';

  // 计算洞察指标
  const weeks = d.weekTotals.filter(w => w.total > 0);
  const vals = weeks.map(w => w.total);
  const mean = vals.length ? vals.reduce((a,b) => a+b, 0) / vals.length : 0;
  const variance = vals.length ? vals.reduce((s, v) => s + (v - mean) ** 2, 0) / vals.length : 0;
  const stdDev = Math.sqrt(variance);
  const evenness = mean > 0 ? Math.max(0, 100 - (stdDev / mean) * 50) : 100;
  const consistency = vals.length > 1 ? Math.max(0, 100 - (Math.abs(vals[vals.length-1] - mean) / mean) * 100) : 100;

  // 重新排序的KPI卡片（16个，分4行，前3行每行5个）
  const cards = [
    // 第1行：基础规模指标
    { label:'总计划量', value: fmt2(d.grand), sub: `${d.result.length} 条记录`, cls:'' },
    { label:'有计划周', value: String(d.planned), sub: `${d.empty} 空周`, cls:'' },
    { label:'有计划月', value: String(d.monthPlanned), sub: `${d.monthEmpty} 空月`, cls:'' },
    { label:'活跃省份', value: `${d.provs.length}`, sub: `${d.result.length}条记录`, cls:'' },
    { label:'Top省份', value: d.topProv?.name ?? '—', sub: d.topProv?.value ? fmt2(d.topProv.value) : '—', cls:'' },
    // 第2行：峰值/极值指标
    { label:'周均目标', value: num(d.avg, 1), sub: '有计划周口径', cls:'' },
    { label:'空周占比', value: `${d.emptyRatio}%`, sub: '空周 / 总周数', cls:'' },
    { label:'峰值周', value: fmt2(d.peak), sub: d.peakWeek?.week ? `${d.peakWeek.week.monthName} W${d.peakWeek.week.weekNumber}` : '', cls:'' },
    { label:'谷值周', value: fmt2(d.trough), sub: '有计划周最低', cls:'' },
    { label:'峰谷差', value: fmt2(d.peakGap), sub: '峰值周 - 谷值周', cls:'' },


    // 第3行：分布质量指标
    { label:'峰值月', value: `${d.topMonth?.monthIndex != null ? `${d.topMonth.monthIndex+1}月` : '—'}`, sub: d.topMonth?.value ? fmt2(d.topMonth.value) : '—', cls:'' },
    { label:'最高季度', value: d.topQuarter?.label ?? '—', sub: d.topQuarter?.value ? fmt2(d.topQuarter.value) : '—', cls:'' },
    { label:'均衡度', value: `${Math.round(evenness)}%`, sub: '分布均匀程度', cls:'' },
    { label:'稳定性', value: `${Math.round(consistency)}%`, sub: '末周偏离均值', cls:'' },
    { label:'变异系数', value: `${d.cv}%`, sub: 'CV 越低越均衡', cls:'' },


  ];

  cards.forEach(({ label, value, sub, cls }) => {
    const card = el('div', 'card kpi-card');
    card.appendChild(el('p', 'kpi-label', label));
    card.appendChild(el('p', `kpi-value${cls?' '+cls:''}`, value));
    if (sub) card.appendChild(el('p', 'kpi-sub', sub));
    kg.appendChild(card);
  });
}

// ─── Chart 1: Weekly trend (SVG line + area) ─────────────────────────────────
function renderWeeklyTrend(d) {
  const card = prepareChartCard('trend-card', '周度目标总量走势', {
    note: `共 ${d.weeks.length} 周  ·  峰值 ${fmt2(d.peak)}  ·  均值 ${num(d.avg,1)}`,
  });

  const W = 800, H = 130, PL = 44, PR = 10, PT = 10, PB = 28;
  const cw = W - PL - PR, ch = H - PT - PB;
  const maxV = d.peak || 1;
  const svg = makeSVG(W, H, 'svg-hit');

  const monthBoundaries = d.weeks
    .map((w, idx) => ({ idx, year: w.year, monthIndex: w.monthIndex }))
    .filter((cur, i, arr) => {
      if (i === 0) return false;
      const prev = arr[i - 1];
      return cur.year !== prev.year || cur.monthIndex !== prev.monthIndex;
    });

  monthBoundaries.forEach(({ idx, monthIndex }) => {
    if (idx <= 0) return;
    const x = PL + (idx / (d.weeks.length - 1 || 1)) * cw;
    const m = svgEl('text', { x: x+3, y: PT+ch+12, 'font-size':'9', fill:CHART_COLORS.axis, 'font-family':'var(--ff-mono)' });
    m.textContent = `${monthIndex+1}月`;
    svg.appendChild(m);
  });

  appendYearLabels(svg, d.weeks, { left: PL, width: cw, y: PT + ch + 22 });
  appendYAxisLabels(svg, { ticks: [0, 0.5, 1], maxV, x: PL - 4, top: PT, height: ch });

  // Area + line path
  const pts = d.weekTotals.map(({ total }, i) => {
    const x = PL + (i / Math.max(d.weekTotals.length - 1, 1)) * cw;
    const y = PT + ch - (total / maxV) * ch;
    return [x, y];
  });

  if (pts.length > 0) {
    const areaD = `M${PL},${PT+ch} ` + pts.map(([x,y]) => `L${x},${y}`).join(' ') + ` L${pts[pts.length-1][0]},${PT+ch} Z`;
    svg.appendChild(svgEl('path', { d: areaD, fill:'var(--text-2)', opacity:'0.12' }));
    const lineD = `M${pts[0][0]},${pts[0][1]} ` + pts.slice(1).map(([x,y]) => `L${x},${y}`).join(' ');
    svg.appendChild(svgEl('path', { d: lineD, fill:'none', stroke:'var(--text)', 'stroke-width':'1.5', 'stroke-linejoin':'round', opacity:'0.85' }));
  }

  // Peak marker
  const pkIdx = d.weekTotals.findIndex(w => w.total === d.peak);
  if (pkIdx >= 0) {
    const [px, py] = pts[pkIdx];
    svg.appendChild(svgEl('circle', { cx:px, cy:py, r:'3', fill:'var(--text)', opacity:'0.7' }));
  }

  // Hover hit areas
  d.weekTotals.forEach(({ total, week }, i) => {
    const x = PL + (i / Math.max(d.weekTotals.length - 1, 1)) * cw;
    const hit = svgEl('rect', { x: x-8, y: PT, width:16, height:ch+PB-4, fill:'transparent' });
    hit.addEventListener('mouseenter', () => {
      ttShow(`<b>W${week.weekNumber}</b>  ${week.monthName}<br>${week.startDate.slice(5)} ~ ${week.endDate.slice(5)}<br>目标合计：<b>${fmt2(total)}</b>`);
    });
    hit.addEventListener('mouseleave', ttHide);
    svg.appendChild(hit);
    // tick dot on hover — use a small visible circle
    if (total > 0 && d.weekTotals.length <= 60) {
      const [cx, cy] = pts[i];
      svg.appendChild(svgEl('circle', { cx, cy, r:'2', fill:'var(--text)', opacity:'0.35' }));
    }
  });

  card.appendChild(svg);
}

// ─── Chart 2: Monthly bar ─────────────────────────────────────────────────────
function renderMonthlyBar(d) {
  const avg = d.grand && d.monthPlanned ? Math.round(d.grand / d.monthPlanned) : 0;
  const card = prepareChartCard('month-card', '月度分布', {
    note: avg > 0 ? `均值 ${fmt2(avg)}` : '',
  });

  const W=800, H=140, PL=44, PR=10, PT=24, PB=22;
  const cw=W-PL-PR, ch=H-PT-PB;
  const maxV = Math.max(...d.monthTotals, 1);
  const svg = makeSVG(W, H, 'svg-hit');
  const bw = cw / 12;
  const barPadding = bw * 0.12;

  d.monthTotals.forEach((v, mi) => {
    const isActive = v > 0;
    const bh = (v / maxV) * ch;
    const x  = PL + mi * bw + barPadding;
    const w  = bw - barPadding * 2;
    const y  = PT + ch - bh;

    const rect = svgEl('rect', {
      x, y, width:w, height:Math.max(bh,1), rx:'2',
      fill: isActive ? 'var(--text)' : 'var(--surface-2)',
      opacity: isActive ? '0.8' : '0.3',
      style: `transition: all .2s ease; cursor: pointer;`
    });
    rect.dataset.mi = mi;
    svg.appendChild(rect);

    if (isActive && bh > 18) {
      const valLbl = svgEl('text', {
        x: x + w/2, y: y + bh/2 + 4,
        'text-anchor': 'middle', 'font-size': '10', 'font-weight': '600',
        fill: 'var(--bg)', 'font-family': 'var(--ff-mono)',
        style: 'pointer-events: none;'
      });
      valLbl.textContent = fmt2(v);
      svg.appendChild(valLbl);
    } else if (isActive) {
      const valLbl = svgEl('text', {
        x: x + w/2, y: y - 5,
        'text-anchor': 'middle', 'font-size': '9', 'font-weight': '500',
        fill: 'var(--text)', 'font-family': 'var(--ff-mono)',
        style: 'pointer-events: none;'
      });
      valLbl.textContent = fmt2(v);
      svg.appendChild(valLbl);
    }

    const lbl = svgEl('text', { x: x+w/2, y:H-5, 'text-anchor':'middle', 'font-size':'10', fill:CHART_COLORS.axis, 'font-family':'var(--ff-mono)' });
    lbl.textContent = `${mi+1}月`;
    svg.appendChild(lbl);

    const hit = svgEl('rect', { x:PL+mi*bw, y:PT, width:bw, height:ch+PB, fill:'transparent' });
    const pct = d.grand ? Math.round(v/d.grand*100) : 0;
    hit.addEventListener('mouseenter', () => {
      ttShow(`<b>${mi+1}月</b><br>目标：<b>${fmt2(v)}</b><br>占比：${pct}%`);
      rect.style.opacity = '0.75';
      rect.style.transform = 'scaleY(1.02)';
      rect.style.transformOrigin = 'bottom';
    });
    hit.addEventListener('mouseleave', () => {
      ttHide();
      rect.style.opacity = isActive ? '1' : '.18';
      rect.style.transform = 'scaleY(1)';
    });
    svg.appendChild(hit);
  });

  card.appendChild(svg);
}

// ─── Chart 3: Quarterly bar ───────────────────────────────────────────────────
function renderQuarterlyBar(d) {
  const card = prepareChartCard('quarter-card', '季度分布');
  const entries = d.quarterTotals.map((value, quarterIndex) => ({ label: `Q${quarterIndex + 1}`, value, quarterIndex }));
  card.appendChild(buildProgressList(entries, {
    total: d.grand,
    tooltip: (item, { percent }) => `<b>${item.label}</b>  ${['一', '二', '三', '四'][item.quarterIndex]}季度\n合计：<b>${fmt2(item.value)}</b>\n占全年：${percent}%\n月份：${item.quarterIndex * 3 + 1}–${item.quarterIndex * 3 + 3}月`,
  }));
}

// ─── Chart 4: Type donut + legend ────────────────────────────────────────────
function renderTypeChart(d) {
  const rows = Object.entries(d.byType).sort((a, b) => b[1] - a[1]);
  const card = prepareChartCard('type-card', '目标类型占比');
  card.appendChild(buildProgressList(rows.map(([label, value]) => ({ label, value })), {
    total: rows.reduce((sum, [, value]) => sum + value, 0),
    tooltip: (item, { percent }) => `<b>${item.label}</b>\n合计：${fmt2(item.value)}\n占比：${percent}%`,
  }));
}

// ─── Chart 5: Province horizontal bars ───────────────────────────────────────
function renderProvinceBar(d) {
  const entries = Object.entries(d.byProv).sort((a,b)=>b[1]-a[1]);
  const card = prepareChartCard('prov-card', '省份排行', {
    note: `${d.provs.length} 个省份`,
  });
  card.appendChild(buildProgressList(entries.map(([label, value]) => ({ label, value })), {
    total: d.grand,
    tooltip: (item, { index, percent }) => `<b>${item.label}</b>\n合计：${fmt2(item.value)}\n占比：${percent}%\n排名：第${index + 1}`,
  }));
}

// ─── Chart 6: Type × Month stacked bar (multi-type only) ─────────────────────
function renderStackedMonthly(d) {
  if (d.types.length < 2) { setVisible('stacked-section', false); return; }
  setVisible('stacked-section', true);

  const lg = el('div','legend');
  d.types.forEach((t, idx) => {
    const item = el('div','legend-item');
    const dot = el('span','legend-sq');
    dot.style.background = getMonochromeSeriesColor(idx, d.types.length);
    item.append(dot, document.createTextNode(t));
    lg.appendChild(item);
  });
  const card = prepareChartCard('stacked-card', '类型 × 月份堆叠分布', { legend: lg });

  const W=800, H=130, PL=44, PR=10, PT=10, PB=24;
  const cw=W-PL-PR, ch=H-PT-PB;
  const monthMaxes = Array(12).fill(0).map((_,mi) =>
    d.types.reduce((s,t) => s + (d.typeMonth[t]?.[mi]??0), 0)
  );
  const maxV = Math.max(...monthMaxes, 1);
  const bw   = cw / 12;
  const svg  = makeSVG(W, H, 'svg-hit');

  appendYAxisLabels(svg, { ticks: [0.25, 0.5, 0.75, 1], maxV, x: PL - 4, top: PT, height: ch });

  Array(12).fill(0).forEach((_, mi) => {
    let yOff = PT + ch;
    d.types.forEach((t, idx) => {
      const v  = d.typeMonth[t]?.[mi] ?? 0;
      if (!v) return;
      const bh = (v / maxV) * ch;
      const x  = PL + mi * bw + bw * .08;
      const w  = bw * .84;
      yOff -= bh;
      // 根据主题使用不同颜色策略
      const fill = getMonochromeSeriesColor(idx, d.types.length);
      svg.appendChild(svgEl('rect', { x, y:yOff, width:w, height:bh, rx:'1.5', fill }));
    });

    const hit = svgEl('rect', { x:PL+mi*bw, y:PT, width:bw, height:ch+PB, fill:'transparent' });
    const total = d.types.reduce((s,t)=>s+(d.typeMonth[t]?.[mi]??0),0);
    hit.addEventListener('mouseenter', () => {
      const lines = d.types.filter(t=>d.typeMonth[t]?.[mi]>0).map(t=>`${t}：${fmt2(d.typeMonth[t][mi])}`).join('\n');
      ttShow(`<b>${mi+1}月</b>  合计 ${fmt2(total)}\n${lines}`);
    });
    hit.addEventListener('mouseleave', ttHide);
    svg.appendChild(hit);

    const lbl = svgEl('text', { x:PL+mi*bw+bw/2, y:H-5, 'text-anchor':'middle', 'font-size':'9', fill:CHART_COLORS.axis, 'font-family':'var(--ff-mono)' });
    lbl.textContent = `${mi+1}月`;
    svg.appendChild(lbl);
  });

  card.appendChild(svg);
}

// ─── Chart 7: Province × Month heatmap ───────────────────────────────────────
function renderHeatmap(d) {
  if (d.provs.length < 2) { setVisible('heatmap-section', false); return; }
  setVisible('heatmap-section', true);
  const card = prepareChartCard('heatmap-card', '省份 × 月份热力图', {
    note: '颜色深度表示目标量相对大小',
  });

  // Find max value for normalization
  const allVals = d.provs.flatMap(p => d.provMonth[p] || []);
  const maxV = Math.max(...allVals, 1);

  const scroll = el('div','hm-scroll');
  const table  = el('table','hm-table');
  const thead  = el('thead');
  const hrow   = el('tr');
  hrow.appendChild(el('th','hm-th','')); // corner
  for (let mi=0;mi<12;mi++) {
    const th = el('th','hm-th',`${mi+1}月`);
    hrow.appendChild(th);
  }
  thead.appendChild(hrow);
  table.appendChild(thead);

  const tbody = el('tbody');
  d.provs.forEach(p => {
    const tr = el('tr');
    const th = el('th','hm-th-row', p);
    tr.appendChild(th);
    for (let mi=0;mi<12;mi++) {
      const v   = d.provMonth[p]?.[mi] ?? 0;
      const td  = el('td','hm-cell');
      const inn = el('div','hm-in', v ? fmt2(v) : '');
      
      if (v) {
        // 使用平方根函数让小值更明显，避免小数值几乎看不见
        const pct = Math.sqrt(v / maxV);
        const clamped = Math.max(0, Math.min(1, pct));
        // 提高最小透明度到0.35，确保所有非零值都有足够背景
        const opacity = Math.max(0.35, 0.35 + clamped * 0.55);
        inn.style.background = `var(--text)`;
        inn.style.opacity = opacity.toFixed(2);
        
        // 降低阈值到0.4，让更多单元格使用高对比度的浅色文字
        if (opacity > 0.4) {
          // 深色背景：使用浅色文字
          inn.style.color = 'var(--bg)';
          inn.style.textShadow = 'none';
        } else {
          // 中等深度背景：使用浅色文字配微弱阴影增强可读性
          inn.style.color = 'var(--bg)';
          inn.style.textShadow = '0 0 2px rgba(0,0,0,0.5)';
        }
      } else {
        // 零值：完全透明
        inn.style.background = 'transparent';
        inn.style.opacity = '1';
      }
      
      td.appendChild(inn);
      td.addEventListener('mouseenter', () => ttShow(`<b>${p}</b>  ${mi+1}月\n目标：<b>${fmt2(v)}</b>\n占该省：${d.byProv[p]?Math.round(v/d.byProv[p]*100):0}%`));
      td.addEventListener('mouseleave', ttHide);
      tr.appendChild(td);
    }
    tbody.appendChild(tr);
  });
  table.appendChild(tbody);
  scroll.appendChild(table);
  card.appendChild(scroll);
}

// ─── Chart 8: Multi-type weekly trend lines ───────────────────────────────────
function renderMultiTypeTrend(d) {
  if (d.types.length < 2) { setVisible('multitype-section', false); return; }
  setVisible('multitype-section', true);

  const lg = el('div','legend');
  d.types.forEach(t => {
    const item = el('div','legend-item');
    const dot = el('span','legend-dot');
    dot.style.background = typeColor(d.types,t);
    item.append(dot, document.createTextNode(t));
    lg.appendChild(item);
  });
  const card = prepareChartCard('multitype-card', '各类型周度趋势对比', { legend: lg });

  const multiYear = d.weeks && [...new Set(d.weeks.map(w => w.year))].length > 1;
  const W=800, H=130, PL=44, PR=10, PT=10, PB = multiYear ? 28 : 24;
  const cw=W-PL-PR, ch=H-PT-PB;

  // max across all types × weeks
  const allWkVals = d.weeks.flatMap(w => d.types.map(t => d.typeWeek[t]?.[w.weekKey] ?? 0));
  const maxV = Math.max(...allWkVals, 1);
  const svg = makeSVG(W, H, 'svg-hit');

  appendYAxisLabels(svg, { ticks: [0.5, 1], maxV, x: PL - 4, top: PT, height: ch });

  d.types.forEach((t, ti) => {
    const color = typeColor(d.types, t);
    const pts   = d.weeks.map((w, i) => {
      const v = d.typeWeek[t]?.[w.weekKey] ?? 0;
      const x = PL + (i / Math.max(d.weeks.length-1,1)) * cw;
      const y = PT + ch - (v / maxV) * ch;
      return [x, y];
    });
    const lineD = `M${pts[0][0]},${pts[0][1]} ` + pts.slice(1).map(([x,y])=>`L${x},${y}`).join(' ');
    svg.appendChild(svgEl('path', { d: lineD, fill:'none', stroke: color, 'stroke-width':'1.5', 'stroke-linejoin':'round', opacity:'.85' }));
  });

  // Hit areas
  d.weeks.forEach((w, i) => {
    const x = PL + (i / Math.max(d.weeks.length-1,1)) * cw;
    const hit = svgEl('rect', { x:x-8, y:PT, width:16, height:ch+PB, fill:'transparent' });
    hit.addEventListener('mouseenter', () => {
      const lines = d.types.filter(t=>d.typeWeek[t]?.[w.weekKey]>0).map(t=>`${t}：${fmt2(d.typeWeek[t][w.weekKey])}`).join('\n');
      ttShow(`<b>W${w.weekNumber}</b>  ${w.monthName}\n${lines}`);
    });
    hit.addEventListener('mouseleave', ttHide);
    svg.appendChild(hit);
  });

  appendWeekLabels(svg, d.weeks, { left: PL, width: cw, y: PT + ch + 12 });

  if (multiYear) appendYearLabels(svg, d.weeks, { left: PL, width: cw, y: PT + ch + 22 });

  card.appendChild(svg);
}

// ─── Chart 9: Year-over-year (multi-year only) ────────────────────────────────
function renderYoY(d) {
  if (d.years.length < 2) { setVisible('yoy-section', false); return; }
  setVisible('yoy-section', true);

  const yearColors = d.years.map((_, yi) => CHART_COLORS.series[yi % CHART_COLORS.series.length]);

  const lg = el('div','legend');
  d.years.forEach((yr, yi) => {
    const item = el('div','legend-item');
    const dot  = el('span','legend-dot');
    dot.style.background = yearColors[yi];
    item.append(dot, document.createTextNode(`${yr}年`));
    lg.appendChild(item);
  });
  const card = prepareChartCard('yoy-card', '年度对比（同期周号）', { legend: lg });

  const W=800, H=130, PL=44, PR=10, PT=10, PB=24;
  const cw=W-PL-PR, ch=H-PT-PB;

  // All week numbers present in any year
  const allWknums = [...new Set(d.weeks.map(w=>w.weekNumber))].sort((a,b)=>a-b);
  const maxW = allWknums[allWknums.length-1] || 53;

  const allVals = d.years.flatMap(yr => allWknums.map(wn => d.yearWeek[yr]?.[wn] ?? 0));
  const maxV = Math.max(...allVals, 1);
  const svg  = makeSVG(W, H, 'svg-hit');

  appendYAxisLabels(svg, { ticks: [0.5, 1], maxV, x: PL - 4, top: PT, height: ch });

  d.years.forEach((yr, yi) => {
    const color = yearColors[yi];
    const pts   = allWknums.map(wn => {
      const v = d.yearWeek[yr]?.[wn] ?? 0;
      const x = PL + ((wn-1) / Math.max(maxW-1,1)) * cw;
      const y = PT + ch - (v / maxV) * ch;
      return { x, y, v, wn };
    }).filter(p => p.v > 0);
    if (pts.length < 2) return;
    const lineD = `M${pts[0].x},${pts[0].y} ` + pts.slice(1).map(p=>`L${p.x},${p.y}`).join(' ');
    svg.appendChild(svgEl('path', { d: lineD, fill:'none', stroke: color, 'stroke-width':'1.8', 'stroke-linejoin':'round' }));
  });

  // Hit areas
  allWknums.forEach(wn => {
    const x = PL + ((wn-1) / Math.max(maxW-1,1)) * cw;
    const hit = svgEl('rect', { x:x-8, y:PT, width:16, height:ch+PB, fill:'transparent' });
    hit.addEventListener('mouseenter', () => {
      const lines = d.years.map(yr=>`${yr}年：${fmt2(d.yearWeek[yr]?.[wn]??0)}`).join('\n');
      ttShow(`<b>W${wn}</b>\n${lines}`);
    });
    hit.addEventListener('mouseleave', ttHide);
    svg.appendChild(hit);
  });

  // Week labels every 4 weeks
  allWknums.filter(wn=>wn%4===1).forEach(wn => {
    const x = PL + ((wn-1) / Math.max(maxW-1,1)) * cw;
    const lbl = svgEl('text', { x, y:H-5, 'text-anchor':'middle', 'font-size':'9', fill:CHART_COLORS.axis, 'font-family':'var(--ff-mono)' });
    lbl.textContent = `W${wn}`;
    svg.appendChild(lbl);
  });

  card.appendChild(svg);
}

// ─── Chart 10: Province Volatility Analysis ──────────────────────────────────────
function renderVolatilityCard(d) {
  const card = prepareChartCard('volatility-card', '省份波动分析');

  // Calculate volatility (CV - Coefficient of Variation) for each province
  const provVolatility = Object.entries(d.byProv).map(([prov, total]) => {
    const weekValues = (d.provWeek[prov] || []).filter(v => v > 0);

    if (weekValues.length < 2) return { prov, total, cv: 0, values: weekValues, mean: 0 };

    const mean = weekValues.reduce((a, b) => a + b, 0) / weekValues.length;
    const variance = weekValues.reduce((s, v) => s + Math.pow(v - mean, 2), 0) / weekValues.length;
    const stdDev = Math.sqrt(variance);
    const cv = mean > 0 ? (stdDev / mean) * 100 : 0;

    return { prov, total, cv, values: weekValues, mean };
  });

  // Sort all by volatility descending
  const allProvs = provVolatility
    .filter(p => p.cv > 0)
    .sort((a, b) => b.cv - a.cv);

  if (allProvs.length === 0) {
    card.appendChild(el('p', null, '暂无波动数据'));
    return;
  }

  // Multi-year check
  const multiYear = d.weeks && [...new Set(d.weeks.map(w => w.year))].length > 1;

  // Chart container
  const W = 800, H = 160, PL = 60, PR = 80, PT = 10, PB = multiYear ? 30 : 24;
  const cw = W - PL - PR, ch = H - PT - PB;

  // Calculate global max (all provinces for consistent scale)
  let globalMax = 0;
  allProvs.forEach(p => {
    p.values.forEach(v => globalMax = Math.max(globalMax, v));
  });
  globalMax = Math.max(globalMax, 1);

  const svg = makeSVG(W, H, 'svg-hit');

  appendYAxisLabels(svg, { ticks: [0.5, 1], maxV: globalMax, x: PL - 4, top: PT, height: ch });
  appendWeekLabels(svg, d.weeks, { left: PL, width: cw, y: PT + ch + 12 });
  if (multiYear) appendYearLabels(svg, d.weeks, { left: PL, width: cw, y: PT + ch + 24 });

  card.appendChild(svg);

  // Province label group
  const labelGroup = svgEl('g', { style: 'pointer-events: none;' });
  svg.appendChild(labelGroup);

  // State: visible provinces (start with top 1)
  const visibleProvs = new Set([allProvs[0].prov]);
  const lineElements = new Map();
  const labelElements = new Map();

  // Draw line for a province
  function drawLine(p, idx) {
    const color = provColor(idx);
    const fullValues = d.provWeek[p.prov] || [];

    const pts = fullValues.map((v, i) => {
      const x = PL + (i / Math.max(d.weeks.length - 1, 1)) * cw;
      const y = PT + ch - (v / globalMax) * ch;
      return { x, y, v };
    });

    const lineD = `M${pts[0].x},${pts[0].y} ` + pts.slice(1).map(pt => `L${pt.x},${pt.y}`).join(' ');
    const path = svgEl('path', {
      d: lineD,
      fill: 'none',
      stroke: color,
      'stroke-width': '2',
      'stroke-linejoin': 'round',
      opacity: '1',
      'data-prov': p.prov,
      style: 'cursor: pointer; transition: all .2s ease'
    });

    path.addEventListener('mouseenter', () => {
      path.style.strokeWidth = '3';
      const lastPt = pts[pts.length - 1];
      showLabel(p.prov, p.cv.toFixed(1) + '%', color, lastPt.x + 8, lastPt.y + 3);
    });

    path.addEventListener('mouseleave', () => {
      path.style.strokeWidth = '2';
      hideLabel(p.prov);
    });

    svg.appendChild(path);
    lineElements.set(p.prov, path);
    return path;
  }

  // Show inline label
  function showLabel(prov, text, color, x, y) {
    let lbl = labelElements.get(prov);
    if (!lbl) {
      lbl = svgEl('text', { 'font-size': '11', 'font-weight': '600', 'font-family': 'var(--ff-mono)' });
      labelGroup.appendChild(lbl);
      labelElements.set(prov, lbl);
    }
    lbl.textContent = `${prov} ${text}`;
    lbl.setAttribute('fill', color);
    lbl.setAttribute('x', x);
    lbl.setAttribute('y', y);
    lbl.style.display = 'block';
  }

  function hideLabel(prov) {
    const lbl = labelElements.get(prov);
    if (lbl) lbl.style.display = 'none';
  }

  // Draw initial province (top 1)
  drawLine(allProvs[0], 0);

  // Province grid
  const tableWrap = el('div', 'stats-mb');
  tableWrap.style.marginTop = 'var(--space-md)';
  tableWrap.style.maxHeight = '200px';
  tableWrap.style.overflowY = 'auto';

  const grid = el('div');
  grid.style.display = 'grid';
  grid.style.gridTemplateColumns = 'repeat(auto-fill, minmax(100px, 1fr))';
  grid.style.gap = 'var(--space-2xs)';

  allProvs.forEach((p, idx) => {
    const color = provColor(idx);
    const item = el('div');
    item.style.cssText = 'display:flex;justify-content:space-between;align-items:center;padding:var(--space-2xs) var(--space-xs);border-radius:var(--r);font-size:11px;cursor:pointer;transition:all var(--transition-fast);user-select:none;';
    item.style.background = idx === 0 ? 'var(--surface-2)' : 'var(--surface)';
    item.style.border = idx === 0 ? `1px solid ${getComputedStyle(document.documentElement).getPropertyValue('--eyebrow-color').trim()}` : '1px solid var(--border)';

    // Add color indicator
    const indicator = el('span');
    indicator.style.cssText = 'width:8px;height:8px;border-radius:2px;margin-right:var(--space-xs);flex-shrink:0;transition:all var(--transition-fast);';
    indicator.style.background = idx === 0 ? color : 'transparent';
    indicator.style.opacity = idx === 0 ? '1' : '0.3';

    const nameSpan = el('span');
    nameSpan.style.cssText = 'color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;';
    nameSpan.textContent = p.prov;

    const valSpan = el('span');
    valSpan.style.cssText = `font-family:var(--ff-mono);font-weight:600;color:var(--text);margin-left:var(--space-xs);`;
    valSpan.textContent = p.cv.toFixed(1) + '%';

    item.append(indicator, nameSpan, valSpan);

    // Click to toggle visibility
    item.addEventListener('click', () => {
      if (visibleProvs.has(p.prov)) {
        // Hide this province
        visibleProvs.delete(p.prov);
        const line = lineElements.get(p.prov);
        if (line) {
          line.remove();
          lineElements.delete(p.prov);
        }
        indicator.style.background = 'transparent';
        indicator.style.opacity = '0.3';
        item.style.background = 'var(--surface)';
        item.style.border = '1px solid var(--border)';
        hideLabel(p.prov);
      } else {
        // Show this province
        visibleProvs.add(p.prov);
        drawLine(p, idx);
        indicator.style.background = color;
        indicator.style.opacity = '1';
        item.style.background = 'var(--surface-2)';
        item.style.border = `1px solid var(--eyebrow-color)`;
      }
    });

    grid.appendChild(item);
  });

  tableWrap.appendChild(grid);
  card.appendChild(tableWrap);
}

// ─── Main stats render ────────────────────────────────────────────────────────
function renderStats() {
  if (!TT.el) initTooltip();
  const d = computeData();
  renderKPIs(d);
  renderWeeklyTrend(d);
  renderMonthlyBar(d);
  renderQuarterlyBar(d);
  renderTypeChart(d);
  renderProvinceBar(d);
  renderStackedMonthly(d);
  renderHeatmap(d);
  renderMultiTypeTrend(d);
  renderYoY(d);
  renderVolatilityCard(d);
}

// ─── Export ───────────────────────────────────────────────────────────────────
function suffix() {
  let s = '';
  if (S.noSpan) s += '_不跨年';
  if (S.holiday && S.ranges.some(r => r.start && r.end)) s += '_含排除';
  return s;
}

function yearText(weeks = S.weeks) {
  const yrs = [...new Set(weeks.map(w => w.year))].sort((a, b) => a - b);
  return yrs.length > 1 ? `${yrs[0]}-${yrs[yrs.length-1]}年` : `${yrs[0]}年`;
}

function safeSheetName(name) {
  return String(name || '未命名Sheet').replace(/[\\/:*?"<>|]/g, '_').trim() || '未命名Sheet';
}

function exportSheetResults() {
  if (S.sheetResults.length) return S.sheetResults;
  if (!S.result || !S.weeks) return [];
  return [{ sheetName: S.sheetName || '结果', results: S.result, weeks: S.weeks }];
}

function combinedYearText(items = exportSheetResults()) {
  const years = [...new Set(items.flatMap(item => item.weeks.map(w => w.year)))].sort((a, b) => a - b);
  if (!years.length) return '';
  return years.length > 1 ? `${years[0]}-${years[years.length - 1]}年` : `${years[0]}年`;
}

function saveWorkbook(workbook, filename) {
  XLSX.writeFile(workbook, filename);
}

function downloadWide() {
  const items = exportSheetResults();
  if (!items.length) return;
  if (items.length === 1) {
    const [{ results, weeks }] = items;
    saveCSV('\uFEFF' + Papa.unparse(buildSheetRows({ results, weeks }, LAYOUT.WIDE)), `${yearText(weeks)}周度计划_宽表${suffix()}.csv`);
    return;
  }
  const wb = XLSX.utils.book_new();
  items.forEach(item => {
    const ws = XLSX.utils.aoa_to_sheet(buildSheetRows(item, LAYOUT.WIDE));
    XLSX.utils.book_append_sheet(wb, ws, safeSheetName(item.sheetName));
  });
  saveWorkbook(wb, `${combinedYearText(items)}周度计划_宽表${suffix()}_多Sheet.xlsx`);
}

function downloadTidy() {
  const items = exportSheetResults();
  if (!items.length) return;
  if (items.length === 1) {
    const [{ results, weeks }] = items;
    saveCSV('\uFEFF' + Papa.unparse(buildSheetRows({ results, weeks }, LAYOUT.TIDY)), `${yearText(weeks)}周度计划_竖表${suffix()}.csv`);
    return;
  }
  const wb = XLSX.utils.book_new();
  items.forEach(({ sheetName, results, weeks }) => {
    const ws = XLSX.utils.aoa_to_sheet(buildSheetRows({ sheetName, results, weeks }, LAYOUT.TIDY));
    XLSX.utils.book_append_sheet(wb, ws, safeSheetName(sheetName));
  });
  saveWorkbook(wb, `${combinedYearText(items)}周度计划_竖表${suffix()}_多Sheet.xlsx`);
}

function downloadTemplate() {
  const yr = S.year;
  const headers = ['年份', '目标类型', '省份', '合计', '1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
  const rows = [
    ['', '', '【单年度·单类型示例】', ...Array(13).fill('')],
    ['', '', '上海区', '12', ...Array(12).fill('1')],
    ['', '', '江苏区', '24', ...Array(12).fill('2')],
    ['', '', '', ...Array(13).fill('')],
    ['', '', '【单年度·多类型示例】', ...Array(13).fill('')],
    ['', '类型A', '上海区', '12', ...Array(12).fill('1')],
    ['', '类型B', '上海区', '6', '0','1','1','1','0','1','1','1','0','0','0','0'],
    ['', '', '', ...Array(13).fill('')],
    ['', '', '【多年度·多类型示例】', ...Array(13).fill('')],
    [String(yr),   '类型A', '北京区', '12', ...Array(12).fill('1')],
    [String(yr+1), '类型A', '北京区', '18', '1','1','1','1','2','2','2','2','2','2','1','1'],
  ];
  saveCSV('\uFEFF' + Papa.unparse([headers, ...rows]), '目标拆分_导入模板.csv');
}

function saveCSV(content, filename) {
  const blob = new Blob([content], { type: 'text/csv;charset=utf-8;' });
  const a = document.createElement('a');
  a.href = URL.createObjectURL(blob);
  a.download = filename;
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
  URL.revokeObjectURL(a.href);
}

})();
</script>
</body>
</html>