/* ============================================================
   design-v9.css · 视觉系统 v9（2026-09-23）
   推广主题组（竞争页「主题组」对照，data-pane="topic"）
   —— 把同一推广主题的题归为一组单独看：
      提及率（开放题口径）+ 样本数 N + 可信度 + 时间范围 → 一屏之内看到；
      缺口题 / 与我方竞品对比 / 建议内容选题 / 主题组输入口。
   只做展示：不动鉴权、不动客户只读隔离、不新增依赖、不展示任何毛利·成本口径。
   ============================================================ */

/* 对照切换多了一项（第 8 项：主题组）→ 桌面端补一列，避免第 8 个 chip 单独折到第二行 */
body.is-desktop .cmp-switch{grid-template-columns:repeat(8,minmax(0,1fr))}
body.is-tablet .cmp-switch{grid-template-columns:repeat(4,minmax(0,1fr))}

/* ---------- 主题组选择 chip ---------- */
.tgrp-switch{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 10px}
.tgrp-chip{
  appearance:none;cursor:pointer;text-align:left;
  border:1px solid var(--line);border-radius:11px;background:var(--card);
  padding:6px 10px;font-size:12px;font-weight:700;color:var(--fg2);line-height:1.35;
  max-width:100%;
}
.tgrp-chip:hover{border-color:var(--brand-200);color:var(--brand-deep)}
.tgrp-chip.active{background:var(--brand-wash);color:var(--brand-deep);border-color:var(--brand-200);box-shadow:var(--sh-1)}
.tgrp-chip i{
  display:inline-block;margin-left:6px;padding:1px 6px;font-style:normal;
  font-size:10.5px;font-weight:800;border-radius:999px;
  background:var(--brand-deep);color:#fff;
}
.tgrp-chip b{display:block;margin-top:2px;font-size:11px;font-weight:600;color:var(--fg2)}
.tgrp-chip.active b{color:var(--brand-deep)}

/* 「当前投放主题」标记 */
.tgrp-cur{
  display:inline-block;margin-left:6px;padding:1px 8px;border-radius:999px;
  font-size:10.5px;font-weight:800;background:var(--brand-deep);color:#fff;vertical-align:middle;
}

/* ---------- 主题组抬头 ---------- */
.tgrp-head{margin:2px 0 8px}
.tgrp-head h3{margin:0 0 2px;font-size:var(--fs-3);font-weight:800}
.tgrp-head p{margin:0}

/* ---------- 口径条：提及率 / 样本数 N / 可信度 / 时间范围（一屏看到） ---------- */
.tgrp-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:8px 0 10px}
.tgrp-cell{
  min-width:0;padding:9px 11px;border:1px solid var(--line);border-radius:12px;background:var(--card);
  display:flex;flex-direction:column;gap:2px;
}
.tgrp-k{font-size:11px;font-weight:700;color:var(--fg2);letter-spacing:.02em}
.tgrp-v{font-size:17px;font-weight:800;letter-spacing:-.01em;color:var(--brand-deep);line-height:1.25;overflow-wrap:anywhere}
.tgrp-v .unit{font-size:11.5px;font-weight:700;color:var(--fg2);margin-left:3px}
.tgrp-n{font-size:11px;line-height:1.5;color:var(--fg2);overflow-wrap:anywhere}

/* ---------- 待采集态（0 条回答） ---------- */
.tgrp-pending{
  display:flex;flex-direction:column;gap:3px;margin:8px 0 10px;
  padding:10px 12px;border-radius:12px;border:1px dashed var(--line);
  background:#EEF1F5;color:#3B4450;font-size:12px;line-height:1.6;
}
.tgrp-pending b{color:#1F2937;font-size:12.5px}

/* ---------- 表格 ---------- */
.tgrp-h4{margin:14px 0 6px;font-size:12.5px;font-weight:800;color:var(--fg2)}
.tgrp-table{min-width:640px}
.tgrp-table td,.tgrp-table th{white-space:normal;overflow-wrap:anywhere}
.tgrp-table .num{font-variant-numeric:tabular-nums}
.tgrp-table tr.tgrp-self{background:var(--brand-wash)}
.tgrp-table tr.row-pending td{background:color-mix(in srgb,#EEF1F5 70%,transparent)}
.tgrp-conf{
  display:inline-block;padding:1px 8px;border-radius:999px;font-size:11px;font-weight:700;
  border:1px solid var(--line);color:var(--fg2);
}
.tgrp-conf.ok{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 40%,transparent);background:color-mix(in srgb,var(--ok) 8%,transparent)}
.tgrp-conf.warn{color:var(--warn-ink,var(--warn));border-color:color-mix(in srgb,var(--warn) 40%,transparent);background:color-mix(in srgb,var(--warn) 10%,transparent)}
.tgrp-conf.none{color:var(--fg2);background:#EEF1F5}

/* ---------- 建议内容选题 ---------- */
.tgrp-sugg{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:8px;margin:6px 0 10px}
.tgrp-sugg-card{
  padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--card);
}
.tgrp-sugg-card.gap{border-left:4px solid var(--brand)}
.tgrp-sugg-card h4{margin:0 0 5px;font-size:12.5px;font-weight:800;color:var(--brand-deep);line-height:1.45}
.tgrp-sugg-card p{margin:4px 0 0;font-size:11.5px;line-height:1.6;overflow-wrap:anywhere}

/* ---------- 主题组输入口（内部功能） ---------- */
.tgrp-edit{
  border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin:8px 0;background:var(--card);
}
.tgrp-edit .inrow{gap:8px;flex-wrap:wrap}
.tgrp-name{min-width:200px;flex:1 1 200px}
.tgrp-intent{min-width:150px}
.tgrp-qlist{
  max-height:260px;overflow:auto;border:1px solid var(--line);border-radius:10px;
  padding:6px 8px;background:var(--bg2,rgba(0,0,0,.02));margin-top:6px;
}
.tgrp-qopt{display:flex;align-items:flex-start;gap:6px;padding:3px 0;font-size:11.5px;line-height:1.55}
.tgrp-qopt input{margin-top:3px;flex:none}
.tgrp-qopt span{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.tgrp-qopt em{flex:none;font-style:normal;font-size:10.5px;color:var(--fg2);white-space:nowrap}

/* ---------- 手机 / 平板 ---------- */
body.is-mobile .tgrp-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
body.is-mobile .tgrp-v{font-size:15px}
body.is-mobile .tgrp-chip{font-size:11.5px;padding:5px 8px}
body.is-mobile .tgrp-sugg{grid-template-columns:1fr}
body.is-mobile .tgrp-table{min-width:560px}
body.is-mobile .tgrp-qopt em{white-space:normal}