/* 上传价格源演示 —— 补充样式（复用 demo.css） */

/* 模式选择卡 */
.modes{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:760px){.modes{grid-template-columns:1fr}}
.modecard{
  text-align:left;background:var(--kf-surface);border:1.5px solid var(--line);border-radius:var(--radius-md2);
  padding:18px;font:inherit;cursor:pointer;transition:.16s;
}
.modecard:hover{border-color:var(--kf-brand-line);background:var(--kf-surface-hover)}
.modecard.on{border-color:var(--brand);background:var(--brand-soft);box-shadow:inset 0 0 0 1px var(--brand)}
.modecard b{display:block;font-size:var(--fs-md3);margin-bottom:6px}
.modecard p{margin:0;font-size:var(--fs-base);color:var(--muted);line-height:1.55}
.modecard .rec{font-size:var(--fs-micro);color:var(--brand);background:var(--kf-white);border:1px solid var(--kf-brand-line2);border-radius:999px;padding:1px 8px;margin-left:6px;vertical-align:2px}

/* 5 问表单 */
.quiz{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.quiz .q{background:var(--kf-surface);border:1px solid var(--line);border-radius:var(--radius-panel-sm);padding:12px 14px}
.quiz .q>.qn{font-size:var(--fs-micro);color:var(--brand);font-weight:600;margin-bottom:6px}
.quiz .q .why{font-size:var(--fs-micro);color:var(--muted);margin-top:6px;line-height:1.5}
.quiz select{margin-top:0}
.derived{margin-top:16px;background:var(--blue-soft);border:1px solid var(--kf-blue-line);border-radius:var(--radius-panel-sm);padding:13px 16px}
.derived h4{margin:0 0 8px;font-size:var(--fs-base2);color:var(--blue)}
.derived table{width:100%;border-collapse:collapse;font-size:var(--fs-base)}
.derived td{padding:3px 0}
.derived td:first-child{color:var(--muted);width:150px}
.derived td:last-child{font-weight:600}

/* 拖拽区 */
.dropzone{
  border:1.5px dashed var(--kf-dash);border-radius:var(--radius-md2);padding:26px;text-align:center;background:var(--kf-surface);
  transition:.16s;cursor:pointer;
}
.dropzone:hover,.dropzone.hot{border-color:var(--brand);background:var(--kf-surface-hot)}
.dropzone .big{font-size:var(--fs-3xl);line-height:1}
.dropzone strong{display:block;font-size:var(--fs-md2);margin-top:8px}
.dropzone p{margin:6px 0 0;color:var(--muted);font-size:var(--fs-base)}
.filechips{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:14px}
.fchip{font-size:var(--fs-sm);background:var(--kf-white);border:1px solid var(--line);border-radius:var(--radius-btn);padding:4px 10px;color:var(--muted)}
.fchip.ai{border-color:var(--kf-blue-line);background:var(--blue-soft);color:var(--blue)}
.fchip.plain{border-color:var(--kf-warn-line);background:var(--warn-soft);color:var(--warn)}

.samples{margin-top:16px;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.samples .lb{font-size:var(--fs-sm2);color:var(--muted)}
.sbtn{background:var(--kf-white);border:1px solid var(--line);border-radius:var(--radius-card-sm);padding:7px 13px;font:inherit;font-size:var(--fs-base);cursor:pointer}
.sbtn:hover{border-color:var(--brand);color:var(--brand)}

/* 识别结果 */
.recog{border:1px solid var(--kf-blue-line);background:var(--blue-soft);border-radius:var(--radius-md);padding:16px 18px;margin-bottom:16px}
.recog.memo{border-color:var(--kf-brand-line2);background:var(--brand-soft)}
.recog h3{margin:0 0 10px;font-size:var(--fs-md);color:var(--blue)}
.recog.memo h3{color:var(--brand)}
.recog .row{display:flex;gap:10px;flex-wrap:wrap;align-items:baseline;font-size:var(--fs-base2);margin-bottom:6px}
.recog .k{color:var(--muted);min-width:88px}
.recog .ev{font-size:var(--fs-sm2);color:var(--muted);margin-top:8px;line-height:1.6}
.conf{display:inline-block;font-size:var(--fs-micro);border-radius:999px;padding:2px 9px;background:var(--kf-white);border:1px solid var(--kf-brand-line2);color:var(--brand);font-weight:600}
.conf.mid{border-color:var(--kf-warn-line);color:var(--warn)}

/* 映射表 */
.mapping{width:100%;border-collapse:collapse;font-size:var(--fs-base2);margin-top:6px}
.mapping th{background:var(--kf-surface);font-size:var(--fs-micro);color:var(--muted);font-weight:500;text-align:left;padding:7px 10px;border-bottom:1px solid var(--line)}
.mapping td{padding:6px 10px;border-bottom:1px solid var(--kf-hairline);vertical-align:middle}
.mapping select{width:100%;margin:0;padding:6px 9px;font-size:var(--fs-base)}
.mapping .src{font-family:ui-monospace,Consolas,monospace;font-size:var(--fs-sm2);color:var(--ink)}
.mapping tr.un td{background:var(--kf-warn-wash2)}
.mapping tr.un .src{color:var(--warn)}
.mapping .warnbadge{font-size:var(--fs-note);color:var(--warn);background:var(--warn-soft);border-radius:var(--radius-input);padding:1px 7px}

/* 预览计数 */
.counts{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.cnt{border:1px solid var(--line);border-radius:var(--radius-card);padding:9px 15px;background:var(--kf-surface);min-width:88px}
.cnt .v{font-size:var(--fs-lg2);font-weight:700;line-height:1.15}
.cnt .k{font-size:var(--fs-micro);color:var(--muted)}
.cnt.ok .v{color:var(--brand)}
.cnt.upd .v{color:var(--blue)}
.cnt.skip .v{color:var(--muted)}
.cnt.bad .v{color:var(--warn)}
.preview{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius-panel-sm)}
table.pv{width:100%;border-collapse:collapse;font-size:var(--fs-base)}
table.pv th{background:var(--kf-ink);color:var(--kf-white);font-size:var(--fs-micro);font-weight:500;padding:8px 10px;text-align:left;white-space:nowrap}
table.pv td{padding:5px 10px;border-bottom:1px solid var(--kf-hairline);white-space:nowrap}
table.pv tr:last-child td{border-bottom:0}
table.pv tr.todo td{background:var(--kf-warn-wash2)}
table.pv input{width:100%;min-width:74px;margin:0;padding:5px 7px;font-size:var(--fs-sm2);border-radius:var(--radius-chip)}
table.pv .warnbadge{font-size:var(--fs-note);color:var(--warn);background:var(--warn-soft);border-radius:var(--radius-input);padding:1px 7px}
.aiMark{font-size:var(--fs-xs);background:var(--blue-soft);color:var(--blue);border-radius:var(--radius-sm);padding:1px 6px;margin-left:5px}

/* 结果 */
.result{text-align:center;padding:30px 20px}
.result .tick{font-size:var(--fs-4xl);line-height:1;color:var(--brand)}
.result h2{margin:12px 0 6px}
.result p{color:var(--muted);font-size:var(--fs-base3);margin:0 0 6px}
.logbox{margin-top:22px;text-align:left;background:var(--kf-surface);border:1px solid var(--line);border-radius:var(--radius-panel-sm);padding:15px 18px;font-size:var(--fs-base)}
.logbox h4{margin:0 0 10px;font-size:var(--fs-base2)}
.logbox table{width:100%;border-collapse:collapse}
.logbox td{padding:4px 0;vertical-align:top}
.logbox td:first-child{color:var(--muted);width:112px}
.actions{margin-top:22px;display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

/* ============ 价格类型驱动（2026-10-08 重新设计） ============ */

/* 步骤条：跳过态 */
.step.is-skip{opacity:.4;cursor:not-allowed;text-decoration:line-through}
.step.is-skip b{background:var(--kf-chip-skip)}

/* 价格类型卡片 */
.ptypes{display:block}
.ptgroup{margin-bottom:18px}
.ptgroup-t{font-size:var(--fs-sm2);font-weight:600;color:var(--brand);margin-bottom:8px;letter-spacing:.4px}
.ptgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.ptcard{
  text-align:left;background:var(--kf-surface);border:1.5px solid var(--line);border-radius:var(--radius-md);
  padding:13px 14px;font:inherit;cursor:pointer;transition:.15s;display:flex;flex-direction:column;gap:6px;
}
.ptcard:hover{border-color:var(--kf-brand-line);background:var(--kf-surface-hover)}
.ptcard.on{border-color:var(--brand);background:var(--brand-soft);box-shadow:inset 0 0 0 1px var(--brand)}
.ptcard .pticon{font-size:var(--fs-lg);line-height:1}
.ptcard b{font-size:var(--fs-base3);display:block}
.ptcard .pthint{font-size:var(--fs-sm);color:var(--muted);line-height:1.5}
.ptcard.on .pthint{color:var(--kf-warn-ok)}
.ptsum{
  margin-top:8px;padding:12px 15px;background:var(--brand-soft);border-radius:var(--radius-panel-sm);
  font-size:var(--fs-base2);border:1px solid var(--kf-brand-line2);
}
.ptsum em{font-style:normal;font-weight:700;color:var(--brand)}

/* 每个价格类型一块参数 */
.pcard{border:1px solid var(--line);border-radius:var(--radius-md2);padding:16px 18px;margin-bottom:14px;background:var(--kf-white)}
.pcard-h{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  padding-bottom:10px;margin-bottom:12px;border-bottom:1px solid var(--kf-chip);font-size:var(--fs-md);
}
.pcard-h .tag{margin-left:0}

/* 港口联动 + 费率行 */
.raterow{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;align-items:end}
.raterow label{display:block}
.raterow select,.raterow input{margin-top:5px}
.q.wide{grid-column:1 / -1}
/* 2026-10-11（用户："手工录入界面要和页面同宽，现在太窄了，一个豆腐块"）：
 * 手动录入的三组表格被挤成 228px 的豆腐块，根因是**外层包裹 `#kfManualBox` 没有类**，
 * 它才是 `.quiz` 网格的格子（默认只占一列）；里面 `.q.wide` 的 `grid-column:1/-1` 因为父级不是网格而完全不生效。
 * `grid-column` 只对**网格子项**起作用 —— 所以必须让这层包裹自己跨满所有列。 */
#kfManualBox{grid-column:1 / -1}
/* 同一处：三组各自的「档位（A/B/C）」下拉不必铺满整行（它只有 3 个选项） */
#kfManualBox .raterow select{max-width:220px}
/* ===== 手工录入表格美化（2026-10-11，用户："把这些手工录入框调美观一点，字体大小，列宽之类的"）=====
 * 起因（实测）：`.mapping` 只给 select 上了样式，**input 完全没有样式** ⇒ 用的是浏览器默认边框
 * （height 21px / padding 1px 2px / border-radius 0 / border 2px inset 灰）——这才是"看起来蠢"的直接原因；
 * 另外 `table-layout:auto` 把「档位」压到 41px、把「计费单位」撑到 256px（列宽完全失衡）。
 * 这里做三件事：① 输入框与下拉统一皮肤（含 focus 态）；② 固定列宽比例，按内容分配；③ 表头/行高/分隔线/金额右对齐。 */
#kfManualBox table.mapping{table-layout:fixed}
/* 带档位列（分组表：档位|费用及说明|币种|费用标准|计费单位|最低收费|✕） */
#kfManualBox table.mapping.m-tiered thead th:nth-child(1){width:9%}
#kfManualBox table.mapping.m-tiered thead th:nth-child(2){width:27%}
#kfManualBox table.mapping.m-tiered thead th:nth-child(3){width:9%}
#kfManualBox table.mapping.m-tiered thead th:nth-child(4){width:15%}
#kfManualBox table.mapping.m-tiered thead th:nth-child(5){width:20%}
#kfManualBox table.mapping.m-tiered thead th:nth-child(6){width:15%}
#kfManualBox table.mapping.m-tiered thead th:nth-child(7){width:5%}
/* 不带档位列（普通表：费用及说明|币种|费用标准|计费单位|最低收费|✕） */
#kfManualBox table.mapping:not(.m-tiered) thead th:nth-child(1){width:32%}
#kfManualBox table.mapping:not(.m-tiered) thead th:nth-child(2){width:10%}
#kfManualBox table.mapping:not(.m-tiered) thead th:nth-child(3){width:17%}
#kfManualBox table.mapping:not(.m-tiered) thead th:nth-child(4){width:21%}
#kfManualBox table.mapping:not(.m-tiered) thead th:nth-child(5){width:15%}
#kfManualBox table.mapping:not(.m-tiered) thead th:nth-child(6){width:5%}

#kfManualBox table.mapping thead th{font-size:var(--fs-sm);font-weight:600;letter-spacing:.02em;color:var(--kf-ink-soft);
  background:var(--kf-surface-head);padding:9px 10px;white-space:nowrap;border-bottom:1px solid var(--line)}
#kfManualBox table.mapping tbody td{padding:8px 10px;vertical-align:middle;border-bottom:1px solid var(--kf-hairline2)}
#kfManualBox table.mapping tbody tr:last-child td{border-bottom:0}
/* 输入框与下拉统一皮肤（此前 input 是浏览器默认样式） */
#kfManualBox table.mapping input,#kfManualBox table.mapping select{
  width:100%;box-sizing:border-box;margin:0;font-size:var(--fs-base2);line-height:1.35;
  padding:7px 10px;border:1px solid var(--line);border-radius:var(--radius-card-sm);background:var(--kf-white);color:var(--ink)}
#kfManualBox table.mapping input:focus,#kfManualBox table.mapping select:focus{
  outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(31,111,82,.12)}
#kfManualBox table.mapping input::placeholder{color:var(--kf-placeholder)}
/* 金额列右对齐：带档位表是第 4、6 列，普通表是第 3、5 列 */
#kfManualBox table.mapping.m-tiered tbody td:nth-child(4) input,
#kfManualBox table.mapping.m-tiered tbody td:nth-child(6) input,
#kfManualBox table.mapping:not(.m-tiered) tbody td:nth-child(3) input,
#kfManualBox table.mapping:not(.m-tiered) tbody td:nth-child(5) input{text-align:right}
/* 档位值做成小胶囊；删除按钮收紧、hover 变红 */
#kfManualBox table.mapping tbody td strong{display:inline-flex;min-width:22px;justify-content:center;
  padding:2px 7px;border-radius:var(--radius-input);background:var(--blue-soft);color:var(--kf-blue-ink);font-size:var(--fs-sm)}
#kfManualBox table.mapping .sbtn{padding:5px 9px;font-size:var(--fs-sm);line-height:1;border-radius:var(--radius-btn)}
#kfManualBox table.mapping .sbtn:hover{background:var(--kf-danger-soft);border-color:var(--kf-danger-line2);color:var(--kf-danger-ink2)}
/* 行内那句计算说明保持安静 */
#kfManualBox table.mapping .why[data-mnote]{font-size:var(--fs-micro);margin-top:3px}
/* 说明为空时不要占一行（否则行高被无内容 div 撑到 71px） */
#kfManualBox table.mapping .why[data-mnote]:empty{display:none}

/* ===== 2026-10-12 用户拍板「窄屏修复」③：手工录入表在窄屏不再把 7 列压成一团 =====
 * 实测 390（改动前）：表格只有 230px 宽，`table-layout:fixed` 按上面的百分比分下来
 * 档位/币种 = 17px、费用标准/最低收费 = 28px、计费单位 = 37px —— 6 个表头 `white-space:nowrap`
 * 全部超出自己的列（scrollWidth 34/34/59/59/59 > clientWidth 17/17/28/37/28），手机上糊成一行；
 * 列里的输入框/下拉也只剩 17px，没法录。
 * 处置（用户给的第二种等价做法）：**整表横向滚动** —— 上面 `#kfManualBox` 的表格本来就包在
 * `.preview{overflow-x:auto}` 里，所以只要在窄屏给表一个最小宽度，它就会在那一层左右滑动，
 * 列宽回到宽屏那套**已被用户验收的百分比比例**（600px 时：档位 52 / 费用及说明 156 / 币种 52 /
 * 费用标准 86 / 计费单位 115 / 最低收费 86 / ✕ 52 —— 最长的表头「费用及说明」也只要 61px）。
 * 断点与"内容宽度 = 视口 − 160px"的交点对齐（760−160 = 600 = min-width）⇒ 没有跳变：
 * 760px 以上 availW ≥ 600，表格仍按 width:100% 铺满，与今天逐像素一致。 */
@media (max-width: 760px){
  #kfManualBox table.mapping{min-width:600px}
}