/* v11 · 操作路径微调：不改数据与口径，只让「看结论→选页→做动作」更清楚 */
.tab-tip{display:none!important}
@media (min-width: 1100px){
  main{max-width:1680px;margin:0 auto;padding-left:28px;padding-right:28px}
  .top{padding-left:28px;padding-right:28px}
  .tabs{padding-left:28px;padding-right:28px}
}

/* 顶部身份与项目区分层，避免运行状态挤在一条细线里 */
.brand h1{letter-spacing:-.02em}
.topinfo{row-gap:7px}
.topinfo .dataasof{padding:4px 8px;border-radius:999px;background:var(--bg2);border:1px solid var(--line)}
.topinfo .identity{border-color:color-mix(in srgb,var(--brand) 36%,var(--line));color:var(--brand-deep);font-weight:700}

/* 主导航做成明确的操作入口，更多页签仍保持紧凑 */
.tabs{gap:4px}
.tabs > .tab{min-height:40px;padding:10px 16px;font-weight:700}
.tabs > .tab.active{background:var(--brand-wash);border-radius:10px 10px 0 0}
.tab-more{margin-left:4px;border-left:1px solid var(--line)!important;padding-left:18px!important}

/* 复测归因页：输入区是动作卡，不让按钮漂在大块留白里 */
#tab-effect .effectform{display:grid;grid-template-columns:auto minmax(360px,720px) auto;gap:12px;align-items:end;padding:16px 18px;margin:12px 0 16px;border:1px solid var(--line);border-radius:14px;background:var(--card);box-shadow:var(--sh-1)}
#tab-effect .effectform label{font-weight:700;color:var(--fg2);font-size:12px}
#tab-effect #effectUrls{width:100%;min-height:150px;resize:vertical;line-height:1.55}
#tab-effect .effectform button{min-height:42px;white-space:nowrap}
#tab-effect .concl{margin-bottom:12px}

@media (max-width: 900px){
  #tab-effect .effectform{grid-template-columns:1fr}
  #tab-effect .effectform button{justify-self:start}
}

/* ============================================================
   总览图表：对称等宽网格 + 点击放大 + 悬停预览（2026-10-08 碧涵需求 #7）
   诉求原话：「如果有六个图表，按照每行3个排2行，而不是第一行5个、第二行1个；
             要能根据页面宽窄自适应；点击能放大单独查看；鼠标放上要有信息预览。」
   做法：列数由 JS 按「图表个数」动态均分（layoutCharts()），CSS 只负责等宽与伸展。
   ============================================================ */
.charts{
  display:grid!important;
  grid-template-columns:repeat(var(--chart-cols,3),minmax(0,1fr))!important;
  gap:10px!important;
  align-items:stretch!important;
  margin:12px 0 10px!important;
}
.charts > div{min-width:0;min-height:260px;display:flex}
.charts > div > .chart,.charts > div.chart{height:100%;display:flex;flex-direction:column;width:100%}
.charts .chart-bd{flex:1 1 auto;max-height:none;overflow:visible}
.charts .chart-hd{display:flex;align-items:baseline;justify-content:space-between;gap:8px;flex-wrap:wrap}
.charts .chart-hd b{font-size:13px;line-height:1.35}
/* rq_图表呈现不完全：概览图表网格内的标题/note 允许换行（覆盖 design-demo.css 的 nowrap+ellipsis），
   数值列允许换行（覆盖 design-demo.css 的 bar-vl nowrap），解除 chart-bd 150px 高度限制让折线/环形/条形完整呈现 */
.charts .chart-hd>b,.charts .chart-hd>.muted{white-space:normal;overflow:visible;text-overflow:clip}
.charts .bar-vl{white-space:normal;overflow-wrap:anywhere}
.charts .donut-wrap svg{width:100%;height:auto;max-width:180px}
/* 「放大」提示：整张卡片可点，右上角常驻一个淡淡的放大角标 */
.charts > div{position:relative}
.charts > div::after{
  content:'⤢';position:absolute;top:6px;right:8px;font-size:12px;line-height:1;
  color:var(--fg2);opacity:.28;pointer-events:none;transition:opacity .15s ease;
}
.charts > div:hover::after{opacity:.85;color:var(--brand,#8b5cf6)}
.charts > div:hover{box-shadow:var(--sh-2,0 2px 10px rgba(0,0,0,.08))}
.charts > div{cursor:zoom-in;border-radius:var(--r-card,10px);transition:box-shadow .15s ease}

/* 悬停信息预览：条形/对比条整行可悬停，吐出一句看得懂的话 */
.charts .bar-row,.charts .cmp-row{position:relative}
.charts .bar-row:hover,.charts .cmp-row:hover{background:color-mix(in srgb,var(--brand,#8b5cf6) 8%,transparent);border-radius:6px}
.charts .legend .lg,.charts .heat td{position:relative}

/* 放大弹窗 */
.chart-zoom{
  position:fixed;z-index:130;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(20,22,26,.5);padding:24px;cursor:zoom-out;
}
.chart-zoom.hidden{display:none}
.chart-zoom-card{
  width:min(1180px,96vw);max-height:92vh;overflow:auto;background:var(--card);
  border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh-3);padding:16px 18px 20px;cursor:auto;
}
/* rq_mv0a1ycn42ss: 折线图放大后显示不完全 —— body 给最小高度，svg/canvas/.chart 撑满宽度自适应高度 */
.chart-zoom-body{min-height:50vh}
.chart-zoom-body :is(svg,canvas,.chart){width:100%;height:auto;max-height:none}
.chart-zoom-body .chart-bd{max-height:none;overflow:visible}
.chart-zoom-card .chart-hd b{font-size:16px}
.chart-zoom-card .chart-hd{margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.chart-zoom-card .bar-row .bar-lb{min-width:74px;font-size:13px}
.chart-zoom-card .bar-vl{font-size:13px}
.chart-zoom-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.chart-zoom-card .chart-zoom-x{
  border:1px solid var(--line);background:var(--card);border-radius:999px;cursor:pointer;
  font-size:13px;line-height:1;padding:6px 11px;color:var(--fg2);
}
.chart-zoom-card .chart-zoom-x:hover{border-color:var(--brand);color:var(--brand-deep)}
.chart-zoom-hint{font-size:11.5px;color:var(--fg2);margin:8px 0 0}

/* 悬停信息预览小气泡（跟手，不依赖浏览器原生 title） */
.chart-tip{
  position:fixed;z-index:140;pointer-events:none;max-width:300px;
  background:#1f2430;color:#fff;font-size:11.5px;line-height:1.5;
  padding:6px 9px;border-radius:7px;box-shadow:0 6px 18px rgba(0,0,0,.28);
  white-space:normal;word-break:break-word;
}
.chart-tip.hidden{display:none}
.charts .heat td,.charts .heat-rh,#chartHeat .heat td,#chartHeat .heat-rh{cursor:default}
.charts .bar-row,.charts .cmp-row,.charts .legend .lg{cursor:default}
.charts > div .chart,#chartHeat .chart{cursor:inherit}

/* ============================================================
   rq_mv0a9ye6y5ow · 竞品档案卡顶部高亮（杜碧涵需求 1009-4）
   诉求原话：「点开要有详细陈列 ai 问答中得到的关于竞品优于、劣于我们产品的信息点，
            他们的主打价值点是什么……等有利于更好分析现况和进行调适的信息」
   做法：在 .prof-body 顶部加 3 个高亮块——主打价值点 / 主要短板 / 对比我方·优于我们的题。
        不改后端口径，全部用 /api/competition 已有字段渲染。
   ============================================================ */
.prof-body .prof-hl{
  margin:0 0 var(--sp-2);
  padding:var(--sp-2) var(--sp-3);
  border:1px solid var(--line);border-radius:var(--r-ctl);background:var(--bg);
}
.prof-body .prof-hl-strong{border-left:3px solid #2f9e6e;background:color-mix(in srgb,#2f9e6e 8%,var(--bg))}
.prof-body .prof-hl-weak{border-left:3px solid #c0392b;background:color-mix(in srgb,#c0392b 8%,var(--bg))}
.prof-body .prof-hl-vs{border-left:3px solid var(--brand,#8b5cf6);background:color-mix(in srgb,var(--brand,#8b5cf6) 6%,var(--bg))}
.prof-body .prof-hl .prof-h4{margin-top:0;color:var(--fg)}
.prof-body .prof-hl-theme{margin:2px 0 0;font-size:var(--fs-1);color:var(--fg2);line-height:1.55;word-break:break-word}
.prof-body .prof-hl-theme b{color:var(--fg);font-weight:700}
.prof-body .prof-hl-quote{margin:var(--sp-2) 0 0;padding:var(--sp-2) var(--sp-3);border-left:3px solid var(--line);background:var(--card);border-radius:6px}
.prof-body .prof-hl-quote p{margin:0;font-size:var(--fs-1);line-height:1.6;color:var(--fg);word-break:break-word;overflow-wrap:anywhere}
.prof-body .prof-hl-quote p::before{content:'\"';color:var(--fg2)}
.prof-body .prof-hl-quote p::after{content:'\"';color:var(--fg2)}
.prof-body .prof-hl-quote cite{display:block;margin-top:4px;font-size:var(--fs-caption);color:var(--muted);font-style:normal;word-break:break-word}
.prof-body .prof-hl-vs-note{margin:2px 0 var(--sp-2);font-size:var(--fs-caption);color:var(--fg2);line-height:1.5}
.prof-body .prof-vs-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:var(--sp-2)}
.prof-body .prof-vs-item{padding:var(--sp-2) var(--sp-3);border:1px solid var(--line);border-radius:var(--r-ctl);background:var(--card);min-width:0}
.prof-body .prof-vs-q{margin:0;font-size:var(--fs-1);color:var(--fg);font-weight:600;line-height:1.5;word-break:break-word}
.prof-body .prof-vs-meta{margin:4px 0 0;font-size:var(--fs-caption);color:var(--muted);line-height:1.55;word-break:break-word}
@media (max-width:760px){
  .prof-body .prof-hl{padding:var(--sp-2)}
  .prof-body .prof-hl-quote{padding:var(--sp-2)}
}
@media print{
  .prof-body .prof-hl{break-inside:avoid;box-shadow:none}
}

/* ============================================================
   rq_mv0auk4ux519 · 监测页色点 + btnRun 置顶（杜碧涵需求 1009-6）
   诉求原话：「用列表或直观形式展示每个问题和对应的 ai 的监测情况，
            可以用不同颜色的色点进行区分：绿色=提及率高/无问题，
            红点=事实错误/低推荐率/负面」
   做法：runs 表行首加 .rdot 列，按行状态着色——
        绿=提及且无错；黄=样本不足；红=未提或有事实错误。
        btnRun 卡移到最上 + 重编号 01/02/03/04（index.html）。
   ============================================================ */
#runsTable .rdot{width:18px;text-align:center;padding:0}
#runsTable .rdot > i{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--line)}
#runsTable .rdot-ok > i{background:#2f9e6e}
#runsTable .rdot-warn > i{background:#d4a017}
#runsTable .rdot-bad > i{background:#c0392b}
#runsTable tr:has(.rdot-bad){background:color-mix(in srgb,#c0392b 5%,transparent)}
#runsTable tr:has(.rdot-warn){background:color-mix(in srgb,#d4a017 6%,transparent)}
#runsTable .thumbcell{padding:4px 6px;width:96px}
#runsTable .run-thumb{display:inline-block;line-height:0;border-radius:6px;overflow:hidden;border:1px solid var(--line,#e5dfe7);box-shadow:0 2px 6px rgba(0,0,0,.06);background:#f6f3f8}
#runsTable .run-thumb img{width:80px;height:56px;object-fit:cover;display:block;transition:transform .15s ease}
#runsTable .run-thumb:hover img{transform:scale(1.08)}
@media (max-width:1280px){
  #runsTable .thumbcell{width:72px}
  #runsTable .run-thumb img{width:60px;height:42px}
}
@media (max-width:920px){
  /* 移动端表格压缩：缩略图列变图标尺寸 */
  #runsTable .thumbcell{width:54px;padding:3px}
  #runsTable .run-thumb img{width:48px;height:34px}
}
@media (prefers-color-scheme: dark){
  #runsTable .rdot-ok > i{background:#4ade80}
  #runsTable .rdot-warn > i{background:#fbbf24}
  #runsTable .rdot-bad > i{background:#f87171}
}
/* rq_mv0a9ye6y5ow · 竞品档案「全部展开/折叠」按钮组（杜碧涵需求） */
.prof-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:6px 0 4px}
.prof-head h2{margin:0}
.prof-tools{display:flex;gap:6px;flex-wrap:wrap}
.prof-tools button{appearance:none;border:1px solid var(--line);border-radius:7px;padding:4px 10px;background:var(--card);color:var(--fg);font:inherit;font-size:12px;font-weight:600;cursor:pointer}
.prof-tools button:hover{background:var(--line)}
.distribution-center{margin:16px 0;padding:18px;border:1px solid var(--line);border-radius:18px;background:var(--card)}
.distribution-head{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;margin-bottom:14px}.distribution-head h3{margin:0 0 4px}.distribution-head p{margin:0;color:var(--muted)}
.distribution-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px}
.distribution-card{display:flex;flex-direction:column;gap:8px;text-align:left;padding:14px;border:1px solid var(--line);border-radius:14px;background:#fff;color:inherit}.distribution-card:hover{border-color:var(--primary);box-shadow:0 6px 18px rgba(70,35,110,.09)}
.distribution-card.building,.distribution-card.planned{background:var(--soft)}.dist-top{display:flex;justify-content:space-between;gap:10px}.dist-top i{font-style:normal;font-size:12px;color:var(--muted)}.dist-status,.dist-progress,.dist-actions{display:flex;flex-wrap:wrap;gap:6px;align-items:center}.dist-status em,.dist-progress em{font-style:normal;padding:3px 7px;border-radius:999px;background:#f1ecf7;color:#4f2c66;font-size:12px}.dist-status em{background:#eef4fa;color:#334155}.dist-actions{margin-top:auto}.dist-actions a.small{text-decoration:none;display:inline-flex;align-items:center}.dist-note{font-size:12px;color:var(--muted)}
@media(max-width:720px){.distribution-head{display:block}.distribution-head>.muted{display:block;margin-top:8px}.distribution-grid{grid-template-columns:1fr}}
.monitor-matrix-scroll{max-height:650px;overflow:auto;margin-top:12px}.monitor-matrix-table{min-width:850px;border-collapse:separate;border-spacing:0;width:100%}.monitor-matrix-table th,.monitor-matrix-table td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:center}.monitor-matrix-table thead th{position:sticky;top:0;z-index:2;background:var(--card)}.monitor-matrix-table th:first-child,.monitor-matrix-table td:first-child{position:sticky;left:0;z-index:1;background:var(--card)}.monitor-matrix-table thead th:first-child{z-index:3}.monitor-matrix-table tbody th{text-align:left;font-weight:500;min-width:360px;max-width:620px}.monitor-matrix-no{display:inline-block;margin-right:8px;color:var(--muted);font-size:12px}.monitor-matrix-cell{display:inline-flex;align-items:center;justify-content:center;gap:3px;min-width:52px;min-height:38px;border:0;border-radius:8px;background:transparent;cursor:pointer;color:#475569}.monitor-matrix-cell:hover,.monitor-matrix-cell:focus-visible{outline:2px solid var(--primary);outline-offset:1px}.monitor-matrix-cell small{font-size:11px}.monitor-matrix-dot{width:11px;height:11px;border-radius:50%;background:#d1d5db}.monitor-matrix-cell.positive .monitor-matrix-dot{background:#15977a}.monitor-matrix-cell.risk .monitor-matrix-dot{background:#d84747}.monitor-matrix-cell.missing .monitor-matrix-dot{background:#e5a812}.monitor-matrix-cell.invalid{color:#64748b;background:#f1f5f9;font-size:11px}.monitor-matrix-empty{color:#9ca3af}
.run-screenshot-button{display:block;width:100%;padding:8px;border:1px solid var(--line);border-radius:10px;background:var(--card);cursor:zoom-in}.run-screenshot-button img{display:block;max-width:100%;max-height:420px;object-fit:contain;margin:auto}.run-ai-summary{margin-top:18px;padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--soft)}.run-ai-summary h3{margin:0 0 10px}.run-ai-summary h3 small{font-size:12px;font-weight:400;color:var(--muted)}.run-ai-summary dl{display:grid;grid-template-columns:90px minmax(0,1fr);gap:8px 12px;margin:0}.run-ai-summary dt{font-weight:600;color:var(--muted)}.run-ai-summary dd{margin:0;overflow-wrap:anywhere}.run-ai-summary ul{margin:0;padding-left:18px}