/*
版本: v0.7.0
变更记录:
- v0.7.0 (2025-10-29): 新增候选列表多选样式（复选框、选中状态、确认按钮），优化交互体验
- v0.6.8 (2025-08-22): 统一高度策略（CSS变量+clamp）；整合列表样式并降低hover抖动；补充Firefox滚动条样式；加入 prefers-reduced-motion 降级；移除移动端冗余max-height覆盖
- v0.6.7 (2025-08-22): 固定“已选择列/原始表头”两个虚线面板高度，列表在面板内滚动，确保可见内容不超出虚线底线；移动端降低固定高度
- v0.6.6 (2025-08-22): 防止“已选择列/原始表头”面板内容纵向越界：面板裁剪溢出并稳定滚动条占位
- v0.6.5 (2025-08-22): 第2区域滚动条优化：列表仅纵向滚动并隐藏横向；卡片底部增加内边距；自定义滚动条轨道为透明，消除“越界条”观感
- v0.6.4 (2025-08-22): 预览表格在字段过多时优化：单元格单行省略、限制最大宽度，保留水平滚动，避免视觉越界
- v0.6.3 (2025-08-22): 第2区域滚动逻辑调整：取消整块滚动，改为“已选择列/原始表头”列表分别滚动；为列表设置最大高度
- v0.6.2 (2025-08-22): 增加“选择字段列名”搜索行与下方面板的垂直间距（8px → 16px），视觉更呼吸
- v0.6.1 (2025-08-22): 优化联想下拉布局与美观：输入与按钮同一行、输入不再独占整行；下拉仅覆盖输入区域且不遮挡按钮；细化阴影/边框
- v0.6.0 (2025-08-22): 为第2区域输入框新增下拉联想样式（.input-wrap、.suggest、.suggest .item、.suggest .item.active、mark）
- v0.5.11 (2025-08-22): 新增模态弹窗样式（.modal、.modal-dialog、.modal-backdrop），页眉采用flex并添加 .header-actions 区域
- v0.5.10 (2025-08-21): headers项添加清晰的 :focus-visible 样式；selectedList 禁用hover背景变化；icon按钮显示手型
- v0.5.9 (2025-08-21): 禁用已选择列表hover背景变化；为headers项提供清晰的键盘焦点样式
- v0.5.8 (2025-08-21): 统一列表文字截断与指针样式（selectedList 不显示手型，span 弹性占位并省略号）
- v0.5.7 (2025-08-21): 统一两个列表的span文字规则（.list li > span），配合JS统一DOM结构，彻底消除字体差异
- v0.5.6 (2025-08-21): 为 #selectedList li > span 明确设定字体与行高，确保新添加字段文字与原始表头一致
- v0.5.5 (2025-08-21): 强制为 #selectedList li 与 #headersList li 指定相同字体与行高，彻底消除文字大小不一致
- v0.5.4 (2025-08-21): 统一列表项字体大小，.list li 统一 13px；移除 .list.compact 的字体差异
- v0.5.3 (2025-08-21): 统一"已选择列"和"原始表头"区域字体大小，移除compact类的字体差异
- v0.5.2 (2025-08-21): 优化按钮样式（渐变主按钮、统一圆角、微交互动效、层次阴影）
- v0.5.1 (2025-08-21): 统一现代配色方案（单一主色调、协调色彩体系、简约风格）
- v0.5.0 (2025-08-21): 现代化清新配色方案（明亮色调、青绿主色、柔和对比）
- v0.4.2 (2025-08-21): 优化底部背景过渡，消除横向分割边界（渐变参数+渐隐覆盖）
- v0.4.1 (2025-08-21): 页面底部加入柔和光晕与底部留白，背景过渡更自然
- v0.4.0 (2025-08-21): 引入半透明玻璃拟态配色（卡片、页眉页脚、输入与按钮）
- v0.3.2 (2025-08-21): 第2区域按钮行与面板间增加下边距，避免贴合
- v0.3.1 (2025-08-21): 第2区域内"已选择列/原始表头"面板统一默认高度
- v0.3.0 (2025-08-21): 第2区域提高最大高度并设置最小高度以填充下方空白
- v0.2.9 (2025-08-21): 预览表头层级修正；预览容器圆角以贴合卡片边界
- v0.2.8 (2025-08-21): 卡片裁剪配合圆角与粘性表头；页脚与内容区增加安全间距
- v0.2.7 (2025-08-21): 移除 .flex 高度硬编码，避免区域边界间距冲突
- v0.2.6 (2025-08-21): 修复第2卡片高度冲突；统一卡片标题间距
- v0.2.5 (2025-08-21): 预览表格列宽固定，支持横向滚动
- v0.2.4 (2025-08-21): 预览区限制高度与列宽；长内容单行省略
- v0.2.3 (2025-08-21): 新增第5区域预览布局与表格样式，底部横跨两列
- v0.2.2 (2025-08-21): 列名/历史/导出输入框自适应100%宽度并留边距，提升美观
- v0.2.1 (2025-08-21): 限制右侧字段选择区最大高度并内部滚动，防止挤压左侧区域
- v0.2.0 (2025-08-21): 桌面端两栏布局；选择区自适应高度+滚动；紧凑化间距
- v0.1.1 (2025-08-21): 限制选择字段区域高度，列表可滚动
- v0.1.0 (2025-08-21): 初始样式，简洁紧凑
*/

:root {
  --bg: #f8fafc;
  --card: #ffffff;
  --text: #0f172a;
  --muted: #475569;
  --primary: #3b82f6;
  --secondary: #6366f1;
  --accent: #06b6d4;
  --danger: #ef4444;
  --warn: #f59e0b;
  --border: #e2e8f0;
  /* 统一现代玻璃拟态变量 */
  --glass: rgba(255, 255, 255, 0.9); /* 高透明度白色 */
  --glass-strong: rgba(255, 255, 255, 0.95);
  --glass-border: rgba(59, 130, 246, 0.12);
  --glass-shadow: 0 4px 24px rgba(59, 130, 246, 0.08);
  --glass-blur: saturate(110%) blur(10px);
}

* { box-sizing: border-box; }
body { margin: 0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, PingFang SC, Noto Sans SC, Arial; color: var(--text); background:
  radial-gradient(1400px 700px at 25% -5%, rgba(59,130,246,0.06), transparent 70%),
  radial-gradient(1200px 600px at 75% 20%, rgba(99,102,241,0.04), transparent 65%),
  radial-gradient(1600px 800px at 50% 110%, rgba(59,130,246,0.03), transparent 85%),
  linear-gradient(180deg, #f8fafc 30%, #f1f5f9 100%);
  position: relative;
}

/* 底部渐隐覆盖，进一步抹掉任何分割线痕迹 */
body::after {
  content: "";
  position: fixed;
  left: 0; right: 0; bottom: 0; height: 180px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(248,250,252,0) 0%, rgba(248,250,252,0.4) 60%, rgba(248,250,252,0.7) 100%);
}

.app-header, .app-footer { padding: 12px 16px; background: var(--glass); border-bottom: 1px solid var(--glass-border); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); }
.app-footer { border-top: 1px solid var(--glass-border); border-bottom: none; text-align: center; color: var(--muted); margin-top: 12px; }
.app-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.app-header h1 { margin: 0; font-size: 18px; }
.header-actions { display: flex; gap: 8px; align-items: center; }

.container { max-width: 1180px; margin: 16px auto; padding: 0 12px 20px; display: grid; gap: 12px; }
.container { grid-template-columns: 320px 1fr; grid-auto-rows: min-content; align-items: start; }
/* 区块定位：1上传、2选择、3历史、4导出 */
.container > .card:nth-of-type(1) { grid-column: 1; grid-row: 1; }
.container > .card:nth-of-type(2) { grid-column: 2; grid-row: 1 / span 3; }
.container > .card:nth-of-type(3) { grid-column: 1; grid-row: 2; }
.container > .card:nth-of-type(4) { grid-column: 1; grid-row: 3; }
/* 第5块预览：横跨两列，与上方边界对齐 */
.container > .card:nth-of-type(5) { grid-column: 1 / span 2; grid-row: 4; }

/* 末卡片与底部留出安全距离，避免贴边产生割裂感 */
.container > .card:last-of-type { margin-bottom: 8px; }

/* 右侧字段选择区：限制最大高度并内部滚动，避免拉伸页面 */
.container > .card:nth-of-type(2) {
  /* 取消整体滚动，由列表分别滚动 */
  max-height: none;
  min-height: 420px;
  overflow: visible;
  padding-bottom: 10px; /* 给内部滚动条留出呼吸，避免贴边显露横条 */
  /* 固定两个虚线面板的基准高度（clamp自适应） */
  --panel-fixed-h: clamp(300px, 48vh, 420px);
}

/* 第2区域内左右两个面板统一默认高度，保持视觉一致 */
.container > .card:nth-of-type(2) .panel {
  /* 固定面板高度，防止虚线边框被内容撑开 */
  height: var(--panel-fixed-h);
  min-height: var(--panel-fixed-h);
  max-height: var(--panel-fixed-h);
  overflow: hidden;          /* 裁剪内部溢出，防止纵向越界 */
  scrollbar-gutter: stable;  /* 稳定滚动条占位，防止抖动 */
}

.card { background: var(--glass); border: 1px solid var(--glass-border); border-radius: 14px; padding: 12px; box-shadow: var(--glass-shadow); overflow: hidden; backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); }
.card h2 { margin: 0 0 8px 0; font-size: 16px; }

.row { display: flex; gap: 8px; align-items: flex-start; flex-wrap: wrap; }
.container > .card:nth-of-type(2) > .row { margin-bottom: 16px; }
.flex { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.panel { border: 1px dashed var(--glass-border); border-radius: 12px; padding: 8px; min-height: 160px; display: flex; flex-direction: column; background: rgba(59,130,246,0.02); }
.panel-title { color: var(--muted); font-size: 12px; margin-bottom: 8px; }

/* 输入+联想容器 */
.input-wrap { position: relative; flex: 1 1 0; min-width: 260px; }
.input-wrap > input { width: 100%; }
.suggest { position: absolute; left: 0; right: 0; top: calc(100% + 6px); background: rgba(255,255,255,0.92); border: 1px solid rgba(59,130,246,0.18); border-radius: 10px; box-shadow: 0 8px 24px rgba(15,23,42,0.08); padding: 4px; display: flex; flex-direction: column; gap: 2px; max-height: 280px; overflow: auto; z-index: 20; }
.suggest .item { 
  padding: 8px 10px; 
  border-radius: 8px; 
  cursor: pointer; 
  font-size: 13px; 
  display: flex; 
  align-items: center; 
  gap: 8px;
  transition: background 0.15s ease;
}
.suggest .item:hover { background: rgba(59,130,246,0.06); }
.suggest .item.active { background: rgba(59,130,246,0.10); color: var(--text); }
.suggest .item.selected { background: rgba(59,130,246,0.12); border: 1px solid rgba(59,130,246,0.25); }
.suggest .item.selected:hover { background: rgba(59,130,246,0.15); }
.suggest mark { background: rgba(59,130,246,0.18); color: inherit; padding: 0 1px; border-radius: 2px; }

/* 候选列表中的复选框 */
.suggest-checkbox {
  width: 16px;
  height: 16px;
  margin: 0;
  cursor: pointer;
  flex-shrink: 0;
  accent-color: var(--primary);
}

.suggest-label {
  flex: 1;
  cursor: pointer;
  user-select: none;
}

/* 确认按钮 */
.suggest-confirm {
  margin: 4px 4px 6px 4px;
  padding: 8px 12px;
  background: rgba(59, 130, 246, 0.12);
  border: 1px solid rgba(59, 130, 246, 0.25);
  color: var(--primary);
  font-weight: 500;
  font-size: 13px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
}

.suggest-confirm:hover {
  background: rgba(59, 130, 246, 0.18);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}

.list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.list li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border: 1px solid var(--glass-border); border-radius: 10px; background: rgba(59,130,246,0.03); font-size: 13px; }
.list li:hover { background: rgba(59,130,246,0.06); cursor: pointer; }
.list.compact li { padding: 6px 8px; }

/* 强制两侧列表文字大小一致（避免被其他规则或控件影响） */
#selectedList li, #headersList li { font-size: 13px; line-height: 1.25; }
/* 统一两个列表的文本节点（span）样式，配合JS统一的 li>span 结构 */
.list li > span { font-size: 13px; line-height: 1.25; flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* “已选择列”项自身不可点击，仅删除按钮可点击，避免误导性的手型指针 */
#selectedList li { cursor: default; }
#selectedList li:hover { cursor: default; }
/* “已选择列”悬停不改变背景，避免与“可点击的表头”产生误导性差异 */
#selectedList li:hover { background: rgba(59,130,246,0.03); }
/* 可点击的“原始表头”支持键盘聚焦的可视化高亮 */
#headersList li:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* 选择区域自适应高度并滚动（selectedList 与 headersList） */
/* 列表在固定面板内自适应填充并滚动；仅纵向滚动，隐藏横向 */
.panel .list { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; max-height: none; }
/* 自定义滚动条，轨道透明，降低存在感 */
.panel .list::-webkit-scrollbar { width: 8px; height: 8px; }
.panel .list::-webkit-scrollbar-thumb { background: rgba(59,130,246,0.35); border-radius: 8px; }
.panel .list::-webkit-scrollbar-track { background: transparent; }
/* Firefox 滚动条样式 */
.panel .list { scrollbar-width: thin; scrollbar-color: rgba(59,130,246,0.35) transparent; }
.suggest { scrollbar-width: thin; scrollbar-color: rgba(59,130,246,0.35) transparent; }

input[type="text"], select { background: rgba(255,255,255,0.8); color: var(--text); border: 1px solid var(--glass-border); border-radius: 10px; padding: 8px 10px; outline: none; backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); }
input[type="file"] { color: var(--text); }

/* 让主要输入控件在各自区域占满宽度（保留卡片内padding即为边距） */
#colInput, #historySelect, #sheetName {
  width: 100%;
  flex: 1 1 100%;
}

button { 
  border: 1px solid var(--glass-border); 
  background: var(--glass); 
  color: var(--text); 
  padding: 10px 16px; 
  border-radius: 12px; 
  cursor: pointer; 
  backdrop-filter: var(--glass-blur); 
  -webkit-backdrop-filter: var(--glass-blur);
  font-weight: 500;
  font-size: 14px;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.04);
}
button.primary { 
  background: rgba(59, 130, 246, 0.08); 
  border-color: var(--glass-border); 
  color: var(--primary);
  font-weight: 500;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.04);
}
button.secondary { 
  background: rgba(59, 130, 246, 0.08); 
  border-color: var(--glass-border); 
  color: var(--primary);
  font-weight: 500;
}
button.ghost { 
  background: transparent; 
  color: var(--muted); 
  border-color: transparent;
  padding: 10px 12px;
}
button.icon-btn { 
  background: var(--glass); 
  border: 1px solid var(--glass-border); 
  width: 32px; 
  height: 32px; 
  border-radius: 10px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
button:hover { 
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(59, 130, 246, 0.12);
}
/* 列表中的小图标按钮不做位移动效，降低抖动感 */
.list .icon-btn:hover { transform: none; box-shadow: 0 2px 8px rgba(59,130,246,0.08); }

/* 动效降级：用户偏好减少动态时，关闭位移与大阴影 */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  button:hover { transform: none; box-shadow: 0 2px 8px rgba(59,130,246,0.08); }
}
button.primary:hover {
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.3);
}
button.secondary:hover {
  background: rgba(59, 130, 246, 0.12);
}
button.ghost:hover {
  background: rgba(59, 130, 246, 0.04);
  color: var(--primary);
}
button:active {
  transform: translateY(0);
}

.hint { color: var(--muted); font-size: 12px; margin-top: 8px; }
.hint.info { color: var(--muted); }
.hint.warn { color: var(--warn); }
.hint.error { color: var(--danger); }

/* 预览表格样式 */
.preview-wrap { overflow: auto; max-height: 280px; border-radius: 12px; background: rgba(255,255,255,0.8); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); }
.preview-table { border-collapse: collapse; font-size: 11px; table-layout: fixed; min-width: 100%; width: max-content; }
.preview-table th, .preview-table td {
  border: 1px solid var(--glass-border);
  padding: 6px 8px;
  white-space: nowrap;          /* 单行显示 */
  overflow: hidden;             /* 超出隐藏 */
  text-overflow: ellipsis;      /* 省略号 */
  max-width: 180px;             /* 每列最大可视宽度 */
}
.preview-table th { background: rgba(59,130,246,0.06); color: var(--text); position: sticky; top: 0; z-index: 1; backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); }
.preview-table tr:nth-child(even) td { background: rgba(59,130,246,0.015); }

@media (max-width: 720px) {
  .container { display: flex; flex-direction: column; }
  .flex { grid-template-columns: 1fr; height: auto; }
  .container > .card:nth-of-type(2) { max-height: none; overflow: visible; }
  .input-wrap { min-width: 0; flex: 1 1 100%; }
  /* 移动端：clamp 已自适应，无需强制覆盖高度 */
}

/* 模态弹窗 */
.modal[hidden] { display: none !important; }
.modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.35); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.modal-dialog { position: relative; width: min(680px, 92vw); max-height: 80vh; overflow: auto; background: var(--glass-strong); border: 1px solid var(--glass-border); border-radius: 14px; box-shadow: var(--glass-shadow); padding: 12px; }
.modal-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.modal-header h3 { margin: 0; font-size: 16px; }
.modal-body { font-size: 14px; color: var(--text); }
.modal-body ol { padding-left: 18px; margin: 0 0 8px 0; }