/* 销售洞察报告（2026-09-25）：每月两期的「发现」页。只放发现不放流水，所以版式是「要点 → 五个板块各几张小表」。
   配色规矩（dataviz）：好消息 chart-positive、要注意 chart-negative、中性 accent；文字永远用文字色。 */
body { background: var(--canvas); }
.in-app { max-width: 1180px; margin: 0 auto; padding: 24px 18px 70px; }
.in-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; }
.in-head h1 { margin: 0 0 4px; font-size: 22px; }
.in-head p { margin: 0; color: var(--text-secondary); font-size: 13px; max-width: 780px; line-height: 1.6; }
.in-head nav { display: flex; gap: 8px; flex-shrink: 0; }
.in-head nav a { color: var(--text-secondary); font-size: 12px; text-decoration: none; background: var(--surface); border: 1px solid var(--border); border-radius: 7px; padding: 5px 11px; }
[data-embedded="1"] .in-head nav a[href="/"] { display: none; }
.in-muted { color: var(--text-muted); font-size: 12px; }
.in-spacer { flex: 1; }
[hidden] { display: none !important; }

.in-controls { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 16px 0 14px; position: sticky; top: 0; z-index: 5; background: var(--canvas); padding: 8px 0; }
.in-controls select { border: 1px solid var(--border); border-radius: 9px; padding: 7px 10px; background: var(--surface); font: inherit; font-size: 13px; color: var(--text-primary); }
.in-controls label { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-secondary); }
/* 2026-10-01 工具条和板块标签合成一条吸顶后：「报告期」别被下拉框挤成一字一行，下拉框放不下就自己缩（字太长「…」） */
.in-controls label { white-space: nowrap; max-width: 100%; min-width: 0; }
.in-controls select { min-width: 0; max-width: 100%; }
/* 手机上这条一直吸在顶上：只留「报告期」+ 板块标签；期数说明和下拉框重复、「重算 / 生成」是电脑上管理员用的，收起来别占屏 */
@media (max-width: 640px) {
  .in-controls { gap: 6px; padding: 6px 0; }
  .in-controls label { flex: 1 1 100%; }
  .in-controls label select { flex: 1 1 auto; font-size: 16px; }   /* iPhone 上小于 16px 一点就整页放大 */
  #in-meta, .in-controls .soft { display: none; }
}
.soft { border: 1px solid var(--border); background: var(--surface); border-radius: 9px; padding: 7px 12px; font: inherit; font-size: 13px; color: var(--text-primary); cursor: pointer; }
.soft:hover { border-color: var(--border-strong); }
.soft:disabled { opacity: .5; cursor: default; }
.in-loading, .in-empty { color: var(--text-muted); padding: 30px 0; text-align: center; font-size: 13px; }

/* 顶部：本期四个数 + 要点 */
.in-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 14px; }
.in-kpi { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 12px 16px 10px; }
.in-kpi .label { font-size: 12px; color: var(--text-secondary); }
.in-kpi .value { font-size: 28px; font-weight: 600; margin: 2px 0 0; color: var(--text-primary); line-height: 1.15; font-variant-numeric: tabular-nums; }
.in-kpi .value small { font-size: 13px; font-weight: 400; color: var(--text-muted); margin-left: 3px; }
.in-kpi .delta { font-size: 12px; margin-top: 4px; color: var(--text-muted); }
.delta.up { color: var(--chart-positive); } .delta.down { color: var(--chart-negative); }
@media (max-width: 900px) { .in-kpis { grid-template-columns: repeat(2, 1fr); } }

.in-headline { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 12px 16px; margin-bottom: 18px; }
.in-headline h2 { margin: 0 0 8px; font-size: 14px; }
.in-headline ol { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.in-headline li { font-size: 13px; line-height: 1.55; color: var(--text-primary); }
.in-headline li::marker { color: var(--text-muted); }
.in-headline li.good { border-left: 3px solid var(--chart-positive); padding-left: 8px; list-style: none; margin-left: -20px; }
.in-headline li.warn { border-left: 3px solid var(--chart-negative); padding-left: 8px; list-style: none; margin-left: -20px; }
.in-headline li.info { border-left: 3px solid var(--accent); padding-left: 8px; list-style: none; margin-left: -20px; }
.in-headline li a { color: var(--text-secondary); font-size: 12px; margin-left: 6px; text-decoration: none; white-space: nowrap; }

/* 本期要点一眼看懂（2026-10-01 老板：「字太多了，人反应不过来」）：左边产品图 + 打头小标签 + 关键字荧光色。
   颜色：绿 = 好事、红 = 要当心、黄 = 该去做 / 该去看的、只加粗 = 主角；哪段字上什么色由后端 build_headline 给。 */
.in-headline h2 { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; margin-bottom: 10px; }
.hl-legend { display: inline-flex; flex-wrap: wrap; gap: 4px 10px; margin-left: auto; font-size: 11px; font-weight: 400; color: var(--text-secondary); }
.in-headline ol { padding-left: 0; gap: 8px; list-style: none; }
.in-headline li.hl { display: flex; align-items: center; gap: 12px; margin-left: 0; padding: 4px 4px 4px 10px; list-style: none; border-left: 3px solid var(--border-strong); }
.in-headline li.hl.good { border-left-color: var(--chart-positive); }
.in-headline li.hl.warn { border-left-color: var(--chart-negative); }
.in-headline li.hl.info { border-left-color: var(--info-fg); }
.hl-body { flex: 1; min-width: 0; font-size: 13.5px; line-height: 1.65; }
.hl-tag { display: inline-block; margin-right: 6px; padding: 0 8px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 19px; white-space: nowrap; vertical-align: 1px; border: 1px solid var(--border); }
.hl-tag.good { background: var(--success-bg); color: var(--success-fg); border-color: var(--success-border); }
.hl-tag.warn { background: var(--danger-bg); color: var(--danger-fg); border-color: var(--danger-border); }
.hl-tag.info { background: var(--info-bg); color: var(--info-fg); border-color: var(--info-border); }
/* 荧光笔：只涂字的下大半截，像真在纸上划了一道 */
.in-headline mark { color: inherit; background: none; padding: 0 2px; border-radius: 2px; font-weight: 600; }
.in-headline mark.hl-good { background: linear-gradient(transparent 30%, var(--g-200) 30%); color: var(--g-800); }
.in-headline mark.hl-bad { background: linear-gradient(transparent 30%, var(--r-200) 30%); color: var(--r-800); }
.in-headline mark.hl-key { background: linear-gradient(transparent 30%, var(--a-200) 30%); color: var(--text-primary); }
.in-headline mark.hl-b { padding: 0; color: var(--text-primary); }
/* 左边一格：产品图（固定 48 见方，鼠标放上去放大看清是什么）；没图就是带底色的小图标 */
.hl-media { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; min-width: 48px; }
.hl-pic { position: relative; display: block; width: 48px; height: 48px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); }
.hl-pic img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 7px; background: var(--surface); transition: transform .12s ease; transform-origin: left center; }
.hl-pic:hover { z-index: 4; }
.hl-pic:hover img { transform: scale(3.2); box-shadow: var(--shadow-2); border: 1px solid var(--border); }
.hl-pic.broken { display: none; }
.hl-arrow { color: var(--text-muted); font-size: 14px; }
.hl-media .hl-ico { display: none; }
.hl-media.noimg .hl-ico { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 8px; font-size: 22px; background: var(--surface-sunken); }
.hl-media.noimg .hl-arrow { display: none; }
li.hl.good .hl-media.noimg .hl-ico { background: var(--success-bg); }
li.hl.warn .hl-media.noimg .hl-ico { background: var(--danger-bg); }
li.hl.info .hl-media.noimg .hl-ico { background: var(--info-bg); }
@media (max-width: 640px) {
  .hl-legend { margin-left: 0; }
  .in-headline li.hl { gap: 8px; padding-left: 6px; }
  .hl-pic, .hl-media.noimg .hl-ico { width: 40px; height: 40px; }
  .hl-media { min-width: 40px; }
  .hl-media.pair { flex-direction: column; gap: 0; }   /* 交叉销售两张图手机上竖着叠、箭头朝下，别把字挤成一条 */
  .hl-media.pair .hl-pic { width: 34px; height: 34px; }
  .hl-media.pair .hl-arrow { transform: rotate(90deg); font-size: 12px; line-height: 14px; }
  .hl-body { font-size: 13px; }
}

/* 板块导航 */
.in-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.in-tabs a { font-size: 13px; color: var(--text-secondary); text-decoration: none; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); }
.in-tabs a b { color: var(--text-primary); font-weight: 600; margin-left: 4px; }

/* 板块 */
.in-section { margin-bottom: 26px; }
.in-section > h2 { font-size: 16px; margin: 0 0 4px; display: flex; align-items: baseline; gap: 10px; }
.in-section > h2 small { font-weight: 400; color: var(--text-muted); font-size: 12px; }
.in-section > p.lead { margin: 0 0 10px; font-size: 12px; color: var(--text-secondary); line-height: 1.55; }
.in-legend { margin: 0 0 12px; font-size: 12px; color: var(--text-secondary); line-height: 1.6; background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 0 8px 8px 0; padding: 8px 12px; }
.in-legend b { color: var(--text-primary); }
.in-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 12px; }
.in-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; min-width: 0; }
.in-card.wide { grid-column: 1 / -1; }
.in-card h3 { margin: 0 0 8px; font-size: 13px; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.in-card h3 span { font-weight: 400; color: var(--text-muted); font-size: 11px; }
.in-card h3 abbr { text-decoration: none; border-bottom: 1px dotted var(--text-muted); cursor: help; }
.in-card .none { color: var(--text-muted); font-size: 12px; padding: 6px 0; }

/* 表格一律套在 .in-tw 里横向可滚，绝不靠 ellipsis 藏数据（用户 2026-09-25：看不到被隐藏了） */
.in-tw { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.in-t { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12px; }
/* 表头往下滚也一直在（2026-09-26 老板看工厂待办时提的，全站同一条）。
   .in-tw 的 overflow-x:auto 会让它变成滚动容器，里面的 sticky 表头只跟 .in-tw、跟不住整页。
   insight.js 量过「这张表横向放得下」的给 .in-tw 加 .fits 去掉 overflow，表头就贴在顶部工具条下面（top 也由它按工具条实际高度写）；
   放不下的保持横向可滚、表头不跟——数据不藏（9-25 那条）优先。separate 是为了 sticky 的 th 不丢底边；热力图的圆角格子要 collapse 才是原样。 */
table.in-t.heatmap { border-collapse: collapse; }
.in-tw.fits { overflow: visible; }
.in-tw.fits table.in-t th { position: sticky; z-index: 2; background: var(--surface); }
table.in-t th, table.in-t td { padding: 5px 8px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; white-space: nowrap; }
table.in-t th { color: var(--text-muted); font-weight: 500; font-size: 11px; }
table.in-t td.n, table.in-t th.n { text-align: right; font-variant-numeric: tabular-nums; }
table.in-t td.wrap { white-space: normal; min-width: 150px; max-width: 280px; }
table.in-t tr:last-child td { border-bottom: 0; }
table.in-t b { font-weight: 600; color: var(--text-primary); }
table.in-t .sub { display: block; color: var(--text-muted); font-size: 11px; }

/* 产品单元格：缩略图 + 文字 */
.pcell { display: flex; gap: 8px; align-items: flex-start; }
.in-thumb { width: 34px; height: 34px; border-radius: 6px; object-fit: cover; background: var(--surface-hover); border: 1px solid var(--border); flex-shrink: 0; }
.in-thumb.ph { display: inline-block; }
.pmeta { min-width: 0; }

/* 业务员 × 品类 热力矩阵：格子越深占比越高（背景色由 JS 按占比行内算，避免 CSS 里出现自定义变量） */
table.heatmap td.heat { border-radius: 4px; }

/* 同比大数 */
.in-yoy-big { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 12px 16px; margin-bottom: 12px; }
.in-yoy-big .lbl { color: var(--text-secondary); font-size: 13px; }
.in-yoy-big .v { font-size: 26px; font-weight: 600; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.in-yoy-big .vs { color: var(--text-muted); font-size: 14px; }

/* 关注名单 */
.in-watch { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 8px; }
.in-watch .wl { font-size: 12px; color: var(--text-primary); }
.in-watch .wl-k { display: inline-block; background: color-mix(in srgb, var(--chart-negative) 12%, transparent); color: var(--chart-negative); border-radius: 6px; padding: 1px 7px; margin-right: 6px; cursor: help; }

.tag { display: inline-block; border-radius: 999px; padding: 1px 7px; font-size: 11px; line-height: 1.5; background: var(--accent-soft-bg); color: var(--accent-soft-fg); white-space: nowrap; cursor: help; }
.tag.warn { background: color-mix(in srgb, var(--chart-negative) 14%, transparent); color: var(--chart-negative); }
.tag.good { background: color-mix(in srgb, var(--chart-positive) 14%, transparent); color: var(--chart-positive); }
.tag.mute { background: var(--surface-hover); color: var(--text-muted); }

/* 复制空档矩阵：行=产品，列=国家，打叉=没卖进过 */
table.in-matrix { width: 100%; border-collapse: collapse; font-size: 12px; }
table.in-matrix th, table.in-matrix td { padding: 4px 5px; border-bottom: 1px solid var(--border); text-align: center; white-space: nowrap; }
table.in-matrix th:first-child, table.in-matrix td:first-child { text-align: left; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
table.in-matrix th { color: var(--text-muted); font-weight: 500; font-size: 11px; writing-mode: horizontal-tb; }
table.in-matrix td.ok { color: var(--chart-positive); }
table.in-matrix td.gap { color: var(--chart-negative); font-weight: 600; }
table.in-matrix td.gaptodo { color: var(--chart-negative); font-weight: 700; }        /* ‼ 该推没推 */
table.in-matrix td.gapdone { color: var(--text-muted); font-weight: 400; }             /* · 已定性/在推 */

/* 复制空档待办 */
table.gap-table select.gap-reason { border: 1px solid var(--border); border-radius: 7px; padding: 4px 6px; font: inherit; font-size: 12px; background: var(--surface); color: var(--text-primary); }
table.gap-table input.gap-note { border: 1px solid var(--border); border-radius: 7px; padding: 4px 8px; font: inherit; font-size: 12px; background: var(--surface); color: var(--text-primary); width: 100%; min-width: 150px; }
tr.gap-row.todo select.gap-reason { border-color: var(--chart-negative); color: var(--chart-negative); font-weight: 600; }
tr.gap-row.done { opacity: .72; }
tr.gap-row.done select.gap-reason { border-color: var(--chart-positive); }
tr.gap-row.undecided td:first-child { box-shadow: inset 3px 0 0 var(--accent); }

/* 出处链接：简道云要突出（用户 2026-09-25），秒TC 次之，最近一单再次 */
.src { display: inline-block; font-size: 11px; line-height: 1.5; padding: 0 6px; border-radius: 6px; text-decoration: none; margin-left: 4px; vertical-align: 1px; white-space: nowrap; }
.src.jdy { background: var(--accent-soft-bg); color: var(--accent-soft-fg); font-weight: 600; border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); }
.src.jdy:hover { background: var(--accent); color: var(--text-on-accent); }
.src.nas { background: var(--surface-hover); color: var(--text-secondary); border: 1px solid var(--border); }
.src.nas:hover { border-color: var(--border-strong); color: var(--text-primary); }
.src.order { color: var(--text-muted); border: 1px dashed var(--border); }
.src.order:hover { color: var(--text-primary); }
table.in-t td .src { margin-left: 3px; }

/* 问这期数据：输入框 + 建议问题 + 答案 + 历史 */
.in-qa { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 12px 16px; margin-bottom: 18px; }
.in-qa h2 { margin: 0 0 8px; font-size: 14px; display: flex; align-items: baseline; gap: 10px; }
.in-qa h2 small { font-weight: 400; color: var(--text-muted); font-size: 12px; }
.in-qa-row { display: flex; gap: 8px; align-items: center; }
.in-qa-row input { flex: 1; border: 1px solid var(--border); border-radius: 9px; padding: 8px 12px; background: var(--canvas); font: inherit; font-size: 13px; color: var(--text-primary); min-width: 0; }
.in-qa-row input:focus { outline: none; border-color: var(--accent); }
.in-qa-chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0 4px; }
.in-qa-chips button { border: 1px solid var(--border); background: var(--canvas); color: var(--text-secondary); border-radius: 999px; padding: 3px 10px; font: inherit; font-size: 12px; cursor: pointer; }
.in-qa-chips button:hover { border-color: var(--accent); color: var(--text-primary); }
.in-qa-note { font-size: 12px; color: var(--text-muted); margin-top: 6px; }
.in-qa-answer { margin-top: 10px; border-left: 3px solid var(--accent); padding: 8px 12px; background: var(--canvas); border-radius: 0 8px 8px 0; font-size: 13px; line-height: 1.6; white-space: pre-wrap; color: var(--text-primary); }
.in-qa-answer.busy { color: var(--text-muted); border-left-color: var(--border); }
.in-qa-answer .q { font-weight: 600; margin-bottom: 4px; }
.in-qa-history { margin-top: 10px; border-top: 1px solid var(--border); padding-top: 8px; }
.in-qa-history summary { font-size: 12px; color: var(--text-secondary); cursor: pointer; }
.in-qa-history .item { padding: 6px 0; border-bottom: 1px dashed var(--border); font-size: 12px; }
.in-qa-history .item:last-child { border-bottom: 0; }
.in-qa-history .item .q { color: var(--text-primary); font-weight: 600; cursor: pointer; }
.in-qa-history .item .q:hover { color: var(--accent); }
.in-qa-history .item .meta { color: var(--text-muted); margin-left: 6px; font-weight: 400; }
.in-qa-history .item .a { color: var(--text-secondary); white-space: pre-wrap; line-height: 1.55; margin-top: 3px; display: none; }
.in-qa-history .item.open .a { display: block; }

/* 质量说明 */
.in-quality { font-size: 12px; color: var(--text-secondary); background: var(--surface); border: 1px dashed var(--border); border-radius: 10px; padding: 10px 14px; line-height: 1.6; }
.in-quality b { color: var(--text-primary); }

/* 2026-10-04 老板：可视化——板块小标题前的图标（SquViz.h 样式，字号沿用本页）、页头「说明」折叠、状态牌 */
.in-section > h2.sqv-h, .in-headline h2.sqv-h, .in-qa h2.sqv-h { align-items: center; }
.in-section > h2.sqv-h > .sqv-ico, .in-headline h2.sqv-h > .sqv-ico, .in-qa h2.sqv-h > .sqv-ico { width: 24px; height: 24px; border-radius: 7px; }
.in-section > h2.sqv-h small, .in-qa h2.sqv-h small { margin-left: 0; }
.in-how { margin-top: 4px; font-size: 13px; color: var(--text-muted); }
.in-how summary { cursor: pointer; width: max-content; color: var(--text-secondary); }
.in-how p { margin: 4px 0 0; line-height: 1.7; }
.in-t td .sqv-pill + .sub { margin-left: 4px; }