/* ============================================================================
 * pixel-skin.css —— 热点运营页「像素风」皮肤
 * 目标：与「垂类/策划」趋势预测页（蓝天+草地+像素卡片）视觉统一
 * 依赖：bg/pixel-sky-bg.css（背景层）、libs/pixel-retroui-fonts.css（Zpix/Minecraft）
 * 原则：背景只当背景（pointer-events:none），所有业务卡片给不透明奶油底保证可读
 * ========================================================================== */

:root{
  --pk-ink:#2B1A10;        /* 描边棕黑 */
  --pk-red:#D23A27;        /* 主题红 */
  --pk-red-dk:#8C2318;
  --pk-cream:#FFFDF7;      /* 卡面奶油白 */
  --pk-cream-2:#F5E9D7;    /* 次级米色 */
  --pk-mute:#806A58;       /* 次要文字 */
  --pk-sky:#6CB6FA;
}

/* ── 1. 全站底：像素天空（固定，不随滚动漂移） ───────────────────────── */
html{background:var(--pk-sky)}
body{background:transparent!important;color:var(--pk-ink)!important}
body{position:relative;min-height:100vh}
#pxbg-fixed{position:absolute;left:0;right:0;top:0;bottom:var(--pk-footer-h,0px);
  z-index:0;pointer-events:none}
#pxbg-fixed .pxbg{position:absolute;inset:0}
main,#nav,#footer{position:relative;z-index:1}

/* 像素字：中文 Zpix + 英数 Minecraft，关抗锯齿 */
body,button,select,input,textarea{
  font-family:Minecraft,"Zpix","PingFang SC","Microsoft YaHei",sans-serif!important;
  -webkit-font-smoothing:none;font-smooth:never;
}
.mono,.material-symbols-outlined{-webkit-font-smoothing:auto}
.material-symbols-outlined{font-family:"Material Symbols Outlined"!important}

/* ── 2. 页签：像素标签页 ─────────────────────────────────────────────── */
main > .flex.items-center.gap-1{
  border-bottom:none!important;gap:10px!important;padding:14px 2px 0!important;flex-wrap:wrap;
}
.tab{
  background:var(--pk-cream)!important;color:var(--pk-ink)!important;
  border:3px solid var(--pk-ink)!important;border-radius:0!important;
  box-shadow:4px 4px 0 0 rgba(43,26,16,.35)!important;
  padding:8px 16px!important;font-size:15px!important;margin:0 0 6px 0!important;
  transition:transform .08s ease,box-shadow .08s ease;
}
.tab:hover{transform:translate(1px,1px);box-shadow:3px 3px 0 0 rgba(43,26,16,.35)!important}
.tab.text-brand,.tab[data-active="1"]{
  background:var(--pk-red)!important;color:#fff!important;
  box-shadow:4px 4px 0 0 var(--pk-red-dk)!important;
}

/* ── 3. 统计条 ───────────────────────────────────────────────────────── */
#statbar-wrap{
  background:var(--pk-cream)!important;border:3px solid var(--pk-ink)!important;
  border-radius:0!important;box-shadow:5px 5px 0 0 rgba(43,26,16,.35)!important;
  height:auto!important;padding:10px 14px!important;margin-bottom:6px;
}
#statbar-wrap select{
  background:var(--pk-cream-2)!important;border:2px solid var(--pk-ink)!important;
  border-radius:0!important;color:var(--pk-ink)!important;padding:3px 26px 3px 8px!important;
  box-shadow:2px 2px 0 0 rgba(43,26,16,.3)!important;
}
#updated{
  background:var(--pk-ink);color:#FFE9A8;padding:3px 8px;border:2px solid var(--pk-ink);
}

/* ── 4. 卡片：奶油底 + 黑描边 + 红硬阴影 ─────────────────────────────── */
/* ⚠️ 2026-09-03 两次修正后的正确写法。
   踩过的两个坑：
     ① 原来 `[data-r="card"] > div` —— 命中**每一个**子 div，标题/副标题/
        内容各画一个框，一张卡裂成两三个分离小框；
     ② 改成 `> div:first-child` —— 框只包住标题那一层，图表内容掉到框外
        裸露在蓝底上。
   正确解法：框画在 **data-r="card" 外层容器本身**，它包住全部子元素；
   内部所有层一律不画框。 */
.card,.pix,[data-r="card"]{
  background:var(--pk-cream)!important;border:3px solid var(--pk-ink)!important;
  border-radius:0!important;box-shadow:6px 6px 0 0 var(--pk-red)!important;
}
/* 内部各层不再画框，内容连成一张完整的卡。
   ⚠️ 例外：RetroUI 自己渲染的 .pixelCard 是**它自带的**卡片实现（框画在
   子元素上、5px 边框），垂类页的三张 brief 卡走的就是这条路径。
   一律清掉子元素的框会让它们变成裸内容飘在背景上 —— 所以放它过。 */
[data-r="card"] > div:not([class*="pixelCard"]){
  border:0!important;box-shadow:none!important;background:transparent!important;
}
/* 外层已经有框时，内层 pixelCard 不必再叠一层，去掉外层的即可 */
[data-r="card"]:has(> div[class*="pixelCard"]){
  border:0!important;box-shadow:none!important;background:transparent!important;
  padding:0!important;
}
.pix-soft{box-shadow:4px 4px 0 0 rgba(210,58,39,.5)!important}
#panel > *,#rail > *{margin-bottom:18px}

/* 行分隔线：实心像素线 */
.divide-y > * + *{border-top:2px solid rgba(43,26,16,.18)!important}
.border-line,.border-b,.border-t{border-color:rgba(43,26,16,.25)!important}

/* 列表行 hover：整行米黄，不用半透明 */
.divide-y > div:hover,tbody tr:hover{background:#FBF0D9!important}

/* ── 5. 按钮 ─────────────────────────────────────────────────────────── */
button:not(.tab):not([data-r-done]):not(.pxbg *){
  border-radius:0!important;
}
.heat-bg,button.bg-brand{
  background:var(--pk-red)!important;background-image:none!important;color:#fff!important;
  border:3px solid var(--pk-ink)!important;box-shadow:4px 4px 0 0 var(--pk-red-dk)!important;
}
.heat-bg:active,button.bg-brand:active{transform:translate(2px,2px);box-shadow:2px 2px 0 0 var(--pk-red-dk)!important}
button.border-line,button.border{
  background:var(--pk-cream-2)!important;border:3px solid var(--pk-ink)!important;
  box-shadow:4px 4px 0 0 rgba(43,26,16,.3)!important;color:var(--pk-ink)!important;
}
input:not([type=checkbox]),select,textarea{
  border-radius:0!important;border:2px solid var(--pk-ink)!important;background:#fff!important;
}

/* ── 6. 徽标 / 进度条 ────────────────────────────────────────────────── */
.mono.text-\[11px\],[class*="rounded"].mono{border-radius:0!important}
span.px-2.py-0\.5.rounded,span.px-1\.5.py-0\.5.rounded{
  border-radius:0!important;border:2px solid var(--pk-ink)!important;
}
.bg-brand{background:var(--pk-red)!important}
.text-brand{color:var(--pk-red)!important}

/* ── 7. 文字层级 ─────────────────────────────────────────────────────── */
.text-ink-3,.k{color:var(--pk-mute)!important}
.text-ink-2{color:#5b4636!important}
h1,h2,h3,.font-bold{letter-spacing:.02em}

/* ── 8. 吉祥物：空态里站一只热薯 ─────────────────────────────────────── */
.pk-mascot{image-rendering:pixelated;width:120px;height:154px;display:block;margin:0 auto 10px}
/* 120 = 60px 原图 ×2 整数倍放大，不会出现半像素糊边 */

/* ── 9. 页脚/导航贴合像素底 ──────────────────────────────────────────── */
footer{box-shadow:0 -4px 0 rgba(43,26,16,.12)}

/* 滚动条也做成像素感 */
::-webkit-scrollbar{width:14px;height:14px}
::-webkit-scrollbar-track{background:#E9DCC6}
::-webkit-scrollbar-thumb{background:var(--pk-red);border:3px solid var(--pk-ink)}

/* ── 10. emoji 不走像素字体，避免出现豆腐块 ─────────────────────────── */
.pixnav .logo-circle,.pixnav .bell-btn,.pixnav .avatar-pixel,
.pk-emoji{font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif!important}

/* ── 11. 底部「场景带」：树 + 草地占固定高度，内容不许进这个区 ──────────
   参考「垂类/策划」页：地面整图 1166×341，草皮顶线在 y=239，
   即 草皮+泥土 102px，树在草皮上再长 239px。这里照抄这套尺寸。 */
.pxbg__deco{--pxbg-deco-h:341px}
.pxbg__deco--l{left:54px}   /* 左树左缘在图内 x=6，54+6=60 */
.pxbg__deco--r{right:0}     /* 右树右缘距图右边 60，两边页边距都是 60px */
/* 正文底部留出 341px 场景高度 + 40px 呼吸，任何卡片都不会被树/草地压住 */
main{padding-bottom:381px!important}
/* 页脚压在场景之上，且自身不透明 */
#footer{position:relative;z-index:3}
#footer footer{background:var(--pk-cream)!important}

/* ── 12. 场景装饰件（云 / 星星 / 蘑菇，由 pixel-deco.js 生成）─────────
   它们由脚本插进 #pxbg-fixed，本身已 position:absolute。
   这里只补一条保险：装饰绝不参与命中测试 —— 万一某个件盖在按钮上，
   点击必须照样落到按钮上，不能被一朵云吃掉。 */
.pk-scene-deco{pointer-events:none!important}

/* ── 13. 图表可读性重排（2026-09-03）──────────────────────────────────
   用户反馈「图表仍然挤在一起，太丑」。诊断出来的具体拥挤点：
     ① 列表行距只有 10px，5 行数据像三明治一样叠在一起；
     ② 每行右侧塞一长串复合文本 / 斜杠数字，顶满容器边缘；
     ③ 卡片内容紧贴粗黑描边，没有内边距缓冲；
     ④ 图例文字紧贴最后一行数据，两个黑框几乎挨着；
     ⑤ 左右分栏疏密不均：雷达图一侧大片空，列表一侧密不透风。
   原则：不改像素风（描边/硬阴影/配色全留），只调**间距与信息分层**。 */

/* 卡片内边距：内容不要贴着描边。
   ⚠️ 只能选**卡片容器本身**。写成 `[data-r="card"] > div` 会命中卡片的
   每一个直接子元素（标题、副标题、内容各自一份），于是标题被单独框成
   一个小盒子、和内容裂成两块 —— RetroUI 的 data-r=card 会把边框画在
   它的第一层子 div 上，所以这里用 :first-child 精确锁定那一层。 */
#panel .card,
#panel [data-r="card"]{padding:16px 18px!important}
#panel [data-r="card"] > div{padding:0!important}

/* ── 互动效率：行距 + 数值分两层 ── */
.eff-list{margin-top:4px}
.eff-row{padding:9px 0 11px}
.eff-row + .eff-row{border-top:2px solid rgba(43,26,16,.10)}
.eff-head{display:flex;align-items:baseline;justify-content:space-between;
  gap:10px;margin-bottom:7px}
.eff-dim{font-size:13.5px;font-weight:700}
/* 主数值放大右对齐：5 行纵向对齐才能一眼比出大小 */
.eff-val{font-size:15px;font-weight:800;white-space:nowrap;
  font-variant-numeric:tabular-nums}
.eff-unit{font-size:10.5px;font-weight:400;color:var(--pk-mute);margin-left:3px}
/* 明细降级到次行，不再和主数值抢同一行 */
.eff-meta{margin-top:6px;font-size:10.5px;color:var(--pk-mute);
  font-variant-numeric:tabular-nums}
.eff-legend{margin-top:12px!important;padding-top:9px;
  border-top:2px solid rgba(43,26,16,.10)}

/* ── 四口径象限对比：合计上移、明细下沉、色条加高 ── */
.struct-row{padding:10px 0 12px}
.struct-row + .struct-row{border-top:2px solid rgba(43,26,16,.10)}
.struct-head{display:flex;align-items:baseline;justify-content:space-between;
  gap:10px;margin-bottom:7px}
.struct-label{font-size:13px;font-weight:700}
.struct-total{font-size:11.5px;color:var(--pk-mute);white-space:nowrap;
  font-variant-numeric:tabular-nums}
/* 色条加高 + 段间白缝：五段各自占比看得清 */
.struct-bar{display:flex;height:18px;border:2px solid var(--pk-ink);
  background:var(--pk-cream-2);overflow:hidden}
.struct-bar > div{border-right:1px solid rgba(255,253,247,.65)}
.struct-bar > div:last-child{border-right:0}
/* 明细：每个数字前带一个同色小方块，和色条一一对应 */
.struct-detail{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:8px;
  font-size:10.5px;color:var(--pk-mute);font-variant-numeric:tabular-nums}
.struct-detail span{display:inline-flex;align-items:center;gap:4px}
.struct-detail i{width:8px;height:8px;display:inline-block;
  border:1px solid rgba(43,26,16,.45)}

/* 图例/脚注不要紧贴上方内容（只认卡片里最后那行小字，且它前面必须有内容） */
#panel .card > .k:last-child:not(:first-child),
#panel [data-r="card"] > div > .k:last-child:not(:first-child){
  margin-top:12px!important;padding-top:9px;
  border-top:2px solid rgba(43,26,16,.10)}

/* 雷达图一侧留白过多：让 SVG 吃满卡片宽度，与右侧密度平衡 */
#panel svg{max-width:100%;height:auto}

/* ── 14. 四象限散点 tooltip：不透明深底，别再让白字飘在气泡上 ────────
   用户反馈：悬停文字是白色、背景半透明，叠在密集彩色气泡上完全读不清。
   做成深墨底 + 奶油字（对比度 >12:1）+ 像素描边 + 硬阴影，
   任何背景上都能读。 */
#qtip.qtip-px{
  position:fixed;z-index:9999;max-width:300px;
  background:#2B1A10!important;
  border:3px solid #fffdf7;
  box-shadow:5px 5px 0 0 rgba(43,26,16,.55);
  border-radius:0;padding:9px 11px;
  font-family:"UISans","PingFang SC","Microsoft YaHei",sans-serif;
  pointer-events:none;
}
#qtip .qtip-t{
  color:#FFE9A8;font-size:12.5px;font-weight:900;line-height:1.35;
  margin-bottom:4px;padding-bottom:4px;
  border-bottom:2px solid rgba(255,233,168,.32);
}
#qtip .qtip-m{color:#F3E7DA;font-size:11px;font-weight:700;line-height:1.5}
#qtip .qtip-v{color:#FFFDF7;font-size:11px;font-weight:700;line-height:1.55;letter-spacing:.2px}

/* ── 15. 控制页面长度：板块内滑动，不再让整页拉到 2.5 屏 ─────────────
   用户反馈"网页太长了，可以控制一下，翻页或者板块内滑动"。
   实测选中线索后热点数据分析 tab 高 2520px（2.5 屏），要滚三次。
   策略：把「长列表型」板块限高 + 内部滚动，图表本身不动
   （图表压缩会牺牲可读性，那是上一轮刚修好的）。 */

/* 在线热点线索列表：最多显示约 6 行，其余板块内滚动 */
#panel .hot-picker-scroll{
  max-height:262px!important;overflow-y:auto!important;
  border-top:2px solid rgba(43,26,16,.14);
}
/* 四象限事件列表 / 媒体回稿表等长表格：限高内滚 */
#panel .tbl-scroll{max-height:340px!important;overflow-y:auto!important}

/* 四象限散点图：上一轮为了让 187 个气泡分得开，放到了 460px；
   加上标题、口径说明、图例、脚注，整块 662px，是页面最高的一块。
   这里把**散点图之外**的附属信息压紧（图例换行紧排、脚注收小），
   散点图本身不动 —— 可读性是上一轮刚修好的，不能牺牲。 */
#panel .quad-legend{
  gap:6px 10px!important;font-size:10px!important;line-height:1.3!important;
  padding-top:5px!important;
}
#panel .quad-foot{font-size:10px!important;line-height:1.4!important;margin-top:3px!important}

/* 像素风滚动条（默认滚动条在像素风里很突兀） */
#panel .hot-picker-scroll::-webkit-scrollbar,
#panel .tbl-scroll::-webkit-scrollbar,
#rail .rail-scroll::-webkit-scrollbar{width:10px;height:10px}
#panel .hot-picker-scroll::-webkit-scrollbar-track,
#panel .tbl-scroll::-webkit-scrollbar-track,
#rail .rail-scroll::-webkit-scrollbar-track{background:rgba(43,26,16,.07)}
#panel .hot-picker-scroll::-webkit-scrollbar-thumb,
#panel .tbl-scroll::-webkit-scrollbar-thumb,
#rail .rail-scroll::-webkit-scrollbar-thumb{
  background:var(--pk-ink);border:2px solid var(--pk-cream);
}
#panel .hot-picker-scroll::-webkit-scrollbar-thumb:hover,
#panel .tbl-scroll::-webkit-scrollbar-thumb:hover{background:var(--pk-red)}

/* ── 16. 五维结构 / 互动效率 等高对齐 ────────────────────────────────
   用户截图：左卡雷达图 SVG 只 230px、右卡效率 5 行 525px，两卡等高
   → 左卡下方空一大片，头重脚轻。让雷达图容器吃掉剩余高度并居中。 */
/* ⚠️ 两次调整：只写 stretch 会让雷达图跟着右卡撑到 646px，页面反而从
   2.5 屏涨到 2.8 屏。所以整行**封顶**：右卡（互动效率 5 行）内部滚动，
   雷达图在封顶高度内居中撑满 —— 既不留大片空，也不把页面拉长。 */
.eqrow2{align-items:stretch!important}
/* ⚠️ 2026-09-03 第三次调整：412px 封顶 + overflow:hidden 把互动效率的
   第 5 行「关注」直接裁到了框外（用户："为什么关注数据甚至在图表外面"）。
   封顶的初衷是防雷达图撑高页面，但代价是裁掉真实数据 —— 数据完整性优先。
   改法：不再硬性封顶，改为按内容自适应（5 行 + 图例约 470px），
   雷达图仍由 .radar-box 的 max-height 单独约束，不会反过来撑高整行。 */
/* ⚠️ 2026-09-04 用户反馈「图例在框外」：548px 定高本来只为互动效率那一行量的，
   但 .eqrow2 同时挂在**四象限那一行**上（两行共用等高机制），于是四象限卡也被
   压到 548px，底部的颜色图例被挤出黑框。修法：定高只作用于非四象限行，
   四象限行回到内容自适应（它本来就靠 stretch 等高，不需要定高）。 */
.eqrow2:not(.quadrow) > [data-r="card"]{
  display:flex!important;flex-direction:column;min-height:0;
}
.eqrow2 > [data-r="card"] > div:last-child{flex:1;min-height:0}
/* 互动效率列：内容自然铺开，不裁切、不内滚（只有 5 行，装得下） */
.eqrow2:not(.quadrow) > [data-r="card"]:nth-child(2) > div:last-child{overflow:visible}
.radar-box{
  flex:1;min-height:0;
  display:flex!important;align-items:center;justify-content:center;
  padding:0;
}
.radar-box svg{
  width:auto!important;height:100%!important;
  max-height:330px!important;max-width:100%!important;
}

/* ⚠️ 2026-09-03 用户反馈「这部分占据空间太大，请适当压窄上下宽度」：
   这一行的高度是由**互动效率那一列**（5 行明细 + 图例，约 470px）撑出来的，
   雷达图只有 330px，于是五边形上下各留一大片空白，图表本身只占卡片 3~4 成。
   压法不是把雷达图放大（五边形放大并不更好读），而是**压缩这一行的整体高度**：
   互动效率的行距、图例、内边距各收一点，把行高压到 ~380px，
   雷达图跟着占满，留白自然消失、图表比例上来。 */
/* ⚠️ 2026-09-04 用户反馈「图表出框」：392px 封顶压得过狠 ——「转发」那行的
   明细小字（占比/次数/大盘）被卡片下边框切掉一半，等于上一轮「关注」被裁的
   问题换了个位置复发。用户明确要求：先把所有图表收进框内，再把框加长
   原长的 1/5（392 × 1.2 ≈ 470px）。两列都用同一个高度，底边自然齐平。 */
.eqrow2:not(.quadrow) > [data-r="card"]{
  /* 高度按**浏览器实测的内容所需值**定，不靠估：
     实测左卡需 520px、右卡需 548px（5 行明细 × 82px + 图例 24px + 标题与内边距）。
     取 548 → 两列同高、底边严格齐平、且一个字都不裁。
     注：用户说的"加长 1/5"基准是 392px，但 392 本身就是压过头、
     正在裁掉「转发」明细的高度；548 仍比出问题前的 609px 短一截。 */
  height:548px!important;
  max-height:548px!important;
  display:flex!important;flex-direction:column!important;
  overflow:visible!important;      /* 不裁切：高度已经够，无需 hidden 兜底 */
}
/* 互动效率列：用户要求「横轴宽度变粗、行间距变窄」 */
.eqrow2:not(.quadrow) > [data-r="card"]:nth-child(2) .eff-row{
  padding-top:2px!important;padding-bottom:2px!important;   /* 行距再收窄 */
}
/* 横条粗细由 bar() 的高度参数控制，不在这里用 CSS 猜类名覆盖 */
.eqrow2:not(.quadrow) > [data-r="card"]:nth-child(2) .eff-legend-top{
  margin-bottom:3px!important;padding:3px 6px!important;font-size:10.5px!important;
}
.eqrow2:not(.quadrow) > [data-r="card"]:nth-child(2) > div:last-child{
  flex:1 1 auto;overflow:visible;  /* 仍不裁切数据（「关注」被裁的教训） */
}
/* 雷达图跟着加长后的行高走，把多出来的 78px 用掉，五边形更大更好读 */
.eqrow2:not(.quadrow) .radar-box{flex:1 1 auto;display:flex;align-items:center;justify-content:center}
.eqrow2:not(.quadrow) .radar-box svg{max-height:456px!important}  /* 实测 470 会超出卡底 3px */

/* ── 15. 长列表统一内滚 + 元信息不换行（2026-09-03 用户反馈）──────────
   反馈两点：① 已认领跟进区 34 条全展开，页面被拉得很长；
   ② 卡片里的元信息（「认领 hechan… · 已超时 57.4h ⚠ · 未动作」）
     折行，最后两个字「未动作」单独掉到第二行，很难看。
   对策：长列表限高到约 10 条后内部滚动；元信息行强制单行省略。 */
.list-scroll-10{
  max-height:520px!important;      /* ≈10 条（每条约 52px） */
  overflow-y:auto!important;overflow-x:hidden;
}
.nowrap-meta{
  white-space:nowrap!important;overflow:hidden!important;
  text-overflow:ellipsis!important;
}
/* 像素风滚动条，跟皮肤一致 */
.list-scroll-10::-webkit-scrollbar{width:10px}
.list-scroll-10::-webkit-scrollbar-track{background:rgba(43,26,16,.06)}
.list-scroll-10::-webkit-scrollbar-thumb{
  background:var(--pk-ink);border:2px solid var(--pk-cream);
}
.list-scroll-10::-webkit-scrollbar-thumb:hover{background:var(--pk-red)}

/* ── 16. 四象限区：图例放大居中 + 与结构对比图等高（2026-09-03 用户反馈）──
   用户四点：① 散点不加白边（已在 JS 去掉 stroke）；② 选中线索要高亮；
   ③ 图例放大且居中；④ 四象限图与结构对比图等高对齐。 */
.quad-legend{
  display:flex!important;flex-wrap:wrap!important;
  justify-content:center!important;      /* 居中 */
  align-items:center;gap:8px 16px!important;
  margin-top:10px!important;padding:8px 6px!important;
  background:rgba(255,253,247,.72);border:2px solid rgba(43,26,16,.28);
}
.qleg-item{display:flex;align-items:center;gap:6px}
.qleg-dot{
  width:14px;height:14px;display:inline-block;border-radius:2px;   /* 9px → 14px */
  border:1.5px solid rgba(43,26,16,.55);
}
.qleg-label{font-size:13px!important;font-weight:700;color:var(--pk-ink)}
.qleg-num{font-size:13px!important;font-weight:900;color:#6B5747}

/* 四象限那一行：不套用五维行的 412px 封顶（散点图需要高度），
   只做两卡等高 —— 高度由较高的一侧决定，另一侧拉齐。 */
.quadrow.eqrow2 > [data-r="card"]{
  max-height:none!important;       /* 内容自适应：图例、说明条都必须完整显示 */
  height:100%!important;           /* 两卡拉到同高（实测左 752 / 右 576，差 176px 太明显） */
  display:flex!important;flex-direction:column!important;
}
.quadrow.eqrow2{align-items:stretch!important}
/* 结构对比图在等高后把 4 组柱子均匀铺开，不在底部留空 */
.quadrow.eqrow2 > [data-r="card"]:nth-child(2) > div:last-child{
  display:flex!important;flex-direction:column;justify-content:space-between;
}
/* 选中线索不在四象限池内时的说明条 */
.quad-nosel{
  margin-top:8px;padding:7px 10px;font-size:11px;line-height:1.5;
  background:rgba(255,233,168,.5);border:2px solid rgba(43,26,16,.35);
  color:#6B4A20;
}

/* ── 17. 互动效率：大盘平均竖线与图例（2026-09-03 用户反馈）──────────
   用户两问：① 「关注」行跑到图表外面（412px 封顶裁掉了第 5 行，已解除）；
             ② 灰色竖杠是什么意思（= 大盘平均，原图例藏在最底部小字）。 */
/* ⚠️ 2026-09-04 用户反馈「灰杠和柱状图没对齐」：这两个值原本是按 8px 横条
   配的（top:-2px + height:12px = 上下各露 2px）。昨天把横条加粗到 14px 后
   没同步改这里，于是灰杠比横条矮、位置偏上，看起来就是没对齐。
   现在按 14px 重算：height 18px、top -2px → 上下各匀露 2px，垂直居中。 */
.eff-bench{
  position:absolute;top:-2px;width:2px;height:18px;
  background:#6b645a;cursor:help;      /* 同步压深，浅灰在米底上太弱 */
}
.eff-bench::after{     /* 加宽热区，方便悬浮看 title */
  content:"";position:absolute;left:-4px;top:-3px;width:10px;height:24px;
}
.eff-bench-txt{color:#8d918f}
/* 图例提到列表上方，说清竖线读法 */
.eff-legend-top{
  display:flex;align-items:center;flex-wrap:wrap;gap:5px;
  font-size:11px;line-height:1.5;color:#6B5747;
  margin:6px 0 10px;padding:5px 8px;
  background:rgba(255,253,247,.7);border:1px solid rgba(43,26,16,.2);
}
.eff-legend-bar{
  display:inline-block;width:16px;height:8px;background:#c2352c;
  border:1px solid rgba(43,26,16,.3);
}
.eff-legend-tick{
  display:inline-block;width:2px;height:12px;background:#8d918f;
  margin-left:6px;
}
.eff-legend-top b{color:var(--pk-ink);font-weight:900}

/* ── 21. 四象限「早期爆款」虚线圈图例（2026-09-03）────────────────────
   用户问「虚线的散点代表了什么」——图上原先没有任何说明。
   这一条图例跟颜色图例是两个独立维度，所以单独一行、左侧画一个虚线小圈
   直接对应图上的记号。 */
.qleg-item--eb{
  flex-basis:100%;justify-content:center;
  margin-top:5px;padding-top:5px;
  border-top:1px dashed rgba(43,26,16,.22);
}
.qleg-ring{
  display:inline-block;width:14px;height:14px;border-radius:50%;
  border:2px dashed var(--pk-ink,#2B1A10);opacity:.62;
  flex:0 0 auto;
}
.qleg-item--eb .qleg-label{font-size:12px!important;font-weight:700}