/* ============================================================================
 * trend-skin.css —— 垂类 / 策划页「像素风」皮肤
 *
 * 定位：**只换皮，不动结构**。垂类页上全是真实数据模块（OPP_SCORE 评分环、
 *       四板块分析、三张切角卡、历史相似热点 TOP3、两张 iframe 图表），
 *       这些的 DOM、id、事件绑定一个都不改 —— 皮肤只负责视觉。
 *
 * 与参考设计稿的关系：设计稿是固定舞台（1448×1086，绝对定位、零取数），
 *       我们这页是流式布局、内容高度随查询结果变。所以**不照搬舞台缩放**，
 *       改用与 hotspot 相同的方案：像素场景作为一层背景（pointer-events:none），
 *       业务卡片给不透明奶油底压在上面。这样内容再长也不会把场景撑坏。
 *
 * 依赖：bg/pixel-sky-bg.css（背景层）、libs/pixel-retroui-fonts.css（Zpix/Minecraft）
 * 配色严格取设计稿：天空 #6CB6FA / 奶油 #FFFDF7 / 描边 #2B1A10 / 主题红 #D23A27
 * ========================================================================== */

:root{
  --pk-ink:#2B1A10;
  --pk-red:#D23A27;
  --pk-red-dk:#8C2318;
  --pk-cream:#FFFDF7;
  --pk-cream-2:#F5E9D7;
  --pk-mute:#6B5747;      /* 次要文字：比设计稿的 #806A58 再深一档，保证 4.5:1 */
  --pk-sky:#6CB6FA;
}

/* ── 1. 底：像素天空 + 贴底草地泥土 ────────────────────────────────── */
html{background:var(--pk-sky)}
body{background:transparent!important;color:var(--pk-ink)!important;position:relative}

#pxbg-fixed{position:fixed;left:0;right:0;top:0;bottom:0;z-index:0;pointer-events:none}
#pxbg-fixed .pxbg{position:absolute;inset:0}

/* 业务层压在场景之上。侧栏/主区都要显式抬 z-index，否则会被天空盖住 */
#nav,.shell{position:relative;z-index:1}

/* 底部留白：背景层是 position:fixed（铺满视口、不随滚动），
   树和草地永远贴在**屏幕**底部而不是文档底部，所以不需要按树高
   (341px) 去留白 —— 那样只会在内容末尾拉出一大片空蓝。
   这里只留够最后一张卡片不被草地压住的量。 */
main{padding-bottom:130px!important}

/* ── 2. 字体：正文黑体，像素感交给边框和背景 ────────────────────────
   2026-09-03 用户反馈「画框部分请改为更清晰的黑体字」。
   原来整页强制 Minecraft/Zpix 像素字：小字号锯齿糊、中文笔画粘连，
   面板里那段说明文字几乎读不清。参考页的做法是**双字体分工** ——
   UISans（黑体）承担所有要读的正文，RSPixel 只用在 ANALYZE 这类
   需要复古质感的短标签上。像素风由描边 + 硬阴影 + 背景素材表达，
   不靠牺牲正文可读性来换。 */
@font-face{font-family:"UISans";font-weight:700;
  src:url("/trend-fonts/ui700.woff2") format("woff2");font-display:swap}
@font-face{font-family:"UISans";font-weight:900;
  src:url("/trend-fonts/ui700.woff2") format("woff2");font-display:swap}
@font-face{font-family:"RSPixel";
  src:url("/trend-fonts/pixel.woff2") format("woff2");font-display:swap}

body,button,select,input,textarea,h1,h2,h3{
  font-family:"UISans","PingFang SC","Microsoft YaHei",sans-serif!important;
  -webkit-font-smoothing:antialiased!important;font-smooth:always!important;
}
/* ⚠️ UISans 只做了 700/900 两档。页面若按 400 渲染，浏览器会用 700
   去"合成"细体，同一句话里部分字显得粗细不匀（实测「回应」「开发」偏粗）。
   所以正文统一钉在 700，标题走 900 —— 只用字体真实存在的字重。 */
body,button,select,input,textarea{font-weight:700!important}
h1,h2,h3,.font-bold{font-weight:900!important}
/* 像素字只给显式标记的元素（ANALYZE 按钮、流程小标等） */
.pixel-font,.retro-tab{
  font-family:"RSPixel",Minecraft,"PingFang SC",monospace!important;
  -webkit-font-smoothing:none!important;
}
.mono,.material-symbols-outlined{-webkit-font-smoothing:auto}
.mono{font-family:"JetBrains Mono",monospace!important}
.material-symbols-outlined{font-family:"Material Symbols Outlined"!important}

/* ── 3. 侧栏：奶油面 + 粗描边 ───────────────────────────────────── */
#sb{
  background:var(--pk-cream)!important;
  border-right:4px solid var(--pk-ink)!important;
}
#sb .sbi{
  border-radius:0!important;
  border:2px solid transparent;
}
#sb .sbi:hover{background:var(--pk-cream-2)!important;border-color:var(--pk-ink)}
#sb .sbi.on{
  background:#F8CBC9!important;color:var(--pk-ink)!important;
  border:3px solid var(--pk-ink)!important;
  box-shadow:3px 3px 0 0 var(--pk-ink);font-weight:700;
}
#sb button{
  border-radius:0!important;border:3px solid var(--pk-ink)!important;
  box-shadow:4px 4px 0 0 rgba(43,26,16,.35)!important;
  background:#F9F8F8!important;
}
#sb button:active{transform:translate(2px,2px);box-shadow:2px 2px 0 0 rgba(43,26,16,.35)!important}
input.s{
  border-radius:0!important;border:2px solid var(--pk-ink)!important;background:#F8F8F8!important;
}

/* ── 4. 卡片：奶油底 + 硬阴影（像素风的灵魂是硬边硬影，不要圆角不要柔阴影）── */
.card,.box,#steps{
  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,.30)!important;
}
.box{padding:14px 16px 12px!important}

/* 卡里嵌的浅底块跟着换成次级米色，避免奶油底上又铺白色显脏 */
.card [style*="background:#fff"],.card [style*="background: #fff"]{
  background:var(--pk-cream-2)!important;
}

/* ── 5. 主标题与吉祥物 ─────────────────────────────────────────── */
h1.t{
  color:var(--pk-ink)!important;
  text-shadow:3px 3px 0 rgba(43,26,16,.18);
  letter-spacing:.02em;
}
/* 吉祥物放大到设计稿观感（设计稿 173×222），并保持像素硬边 */
.mascot{
  width:168px!important;
  image-rendering:pixelated!important;
  filter:drop-shadow(4px 6px 0 rgba(43,26,16,.22));
}

/* 热薯旁的对话气泡：设计稿里 mascot 带一句话，这里用纯 CSS 画，
   不额外压素材（气泡图宽度固定，中文长度一变就被拉花）。
   ⚠️ 气泡放在 mascot **右侧**而不是上方：上方是 h1 标题，压上去会糊成一团。 */
.mascot-wrap{position:relative}
.mascot-bubble{
  position:absolute;left:calc(50% + 96px);top:18px;
  background:var(--pk-cream);border:3px solid var(--pk-ink);
  box-shadow:4px 4px 0 0 rgba(43,26,16,.28);
  padding:8px 12px;font-size:13px;line-height:18px;color:var(--pk-ink);
  max-width:250px;z-index:2;
}
.mascot-bubble::after{     /* 像素小尾巴：一个方块转 45°会有反锯齿，所以用切角方块 */
  content:"";position:absolute;left:-10px;top:16px;
  width:10px;height:10px;background:var(--pk-cream);
  border-left:3px solid var(--pk-ink);border-bottom:3px solid var(--pk-ink);
}
@media(max-width:1100px){.mascot-bubble{display:none}}



/* 左侧树丛要躲开侧栏（侧栏 220px 宽、不透明），否则树整棵被盖住 */
#pxbg-fixed .pxbg__deco--l{left:var(--sb,220px)}

/* ── 6. 输入框与标签 ───────────────────────────────────────────── */
#q{
  background:#F7F7F7!important;border:3px solid var(--pk-ink)!important;border-radius:0!important;
}
#quick button,.tagbtn{
  background:var(--pk-cream)!important;border:3px solid var(--pk-ink)!important;
  border-radius:0!important;box-shadow:3px 3px 0 0 rgba(43,26,16,.30)!important;
  color:var(--pk-ink)!important;
}
#quick button:hover{background:#F8CBC9!important}
#quick button:active{transform:translate(2px,2px);box-shadow:1px 1px 0 0 rgba(43,26,16,.30)!important}

/* ── 7. 可读性守门 ─────────────────────────────────────────────────
   像素风最容易牺牲的就是正文对比度。上一轮刚把四级文字全部拉到 4.5:1
   以上，这里不能因为换皮又打回去 —— 三级文字统一压到 --pk-mute。 */
.k,.text-ink-3,[class*="text-ink-3"]{color:var(--pk-mute)!important}

/* iframe 图表：给个像素边框，让它和卡片是一套 */
iframe{border:3px solid var(--pk-ink)!important;border-radius:0!important;background:var(--pk-cream)}

/* ── 12. 压在像素场景上的裸文字：必须自带衬底 ─────────────────────────
   2026-09-03 用户反馈「圈出来的字看不清」。原因不是颜色不够深，而是
   这些文字**直接浮在插画上**：底下是蓝天 + 绿草 + 红白蘑菇，
   花色背景下任何单一文字颜色都会在某一段失效（灰字压蓝天已经够淡，
   再叠上高饱和的红蘑菇，笔画直接被吃掉）。
   所以解法是给衬底，不是继续调色 —— 卡片内的文字不受影响（那里本来有白底）。 */

/* 输入卡下方那行「格式：事件主体 + 事件动作…」 */
.center > .k:not([class*="card"] .k){
  display:inline-block;
  background:rgba(255,253,247,.92)!important;
  color:var(--pk-ink)!important;
  padding:5px 10px!important;
  border:2px solid rgba(43,26,16,.18)!important;
  box-shadow:2px 2px 0 0 rgba(43,26,16,.10);
}

/* 主标题：黑体下 6px 描边会显脏，改成气泡式衬底 ——
   参考页把标题放在一个对话气泡框里，既解决「白字压白云」，
   也和薯薯的对白气泡形成同一套语言。 */
h1.t{
  color:var(--pk-ink)!important;
  display:inline-block;
  background:var(--pk-cream);
  border:4px solid var(--pk-ink);
  box-shadow:6px 6px 0 0 rgba(43,26,16,.28);
  padding:14px 30px!important;
  margin:0 auto 22px!important;
  -webkit-text-stroke:0!important;
  text-shadow:none!important;
  letter-spacing:.02em;
}
.center h1.t{display:block;width:fit-content;margin-left:auto;margin-right:auto}

/* 侧栏「还没有分析记录」这类空态字同样在浅底上偏淡，压深一档 */
#hist, #hist *{color:var(--pk-ink)!important}

/* ── 13. 页面高度：内容少时不要拖出大片空白蓝底 ──────────────────────
   垂类页首屏只有"标题 + 薯薯 + 输入框"，内容天然短。
   底部若按热点运营页那样固定预留 380px 场景带，就会在输入框和草地之间
   拉出一大片纯蓝 —— 用户两次截图里的空白就是这个。
   改法：未出结果时（body 无 .answered）把主区高度压到一屏内，
   草地紧跟内容；出结果后再恢复正常文档流。 */
body:not(.answered) main{min-height:auto!important;padding-bottom:130px!important}
body:not(.answered) #pxbg-fixed{height:100vh}

/* ── 14. 分析结果区：外框像素风，内部不再层层套框 ────────────────────
   2026-09-03 用户反馈「没有必要每一行都开一个新表格，图表的外框呈现
   像素风图框即可」。原来的问题是**框套框**：
     卡片(粗黑描边+红硬阴影) → 内层白底圆角容器 → 图表自己的边框
   三层边界叠在一起，每个模块都像一张独立表格，信息被切碎。
   规则：卡片自身保留像素外框（那是风格），卡片**内部**的一切
   容器边框、圆角、投影一律抹掉，让内容直接贴在卡面上。 */

/* 内部容器：去边框、去圆角、去投影、底色透明 */
#result .card :is(.card,.pix,.pix-soft,[data-r="card"]),
#result .card :is(.card,.pix,.pix-soft,[data-r="card"]) > div{
  border:0!important;box-shadow:none!important;border-radius:0!important;
  background:transparent!important;
}
/* iframe 图表：外层卡片已经有框，iframe 自己不要再画一层 */
#result iframe{border:0!important;border-radius:0!important;background:transparent!important}

/* 卡片内的分区块用**一条像素分隔线**表达层级，而不是再开一个框 */
#result .card > div + div{border-top:0}
#result .card .divide-y > * + *{
  border-top:2px solid rgba(43,26,16,.16)!important;
}

/* 卡片标题（.k）统一成小节标题的样子：不再各自带底色块 */
#result .card > .k:first-child{
  background:transparent!important;border:0!important;box-shadow:none!important;
  padding:0 0 8px!important;color:var(--pk-ink)!important;
  font-weight:900!important;font-size:13.5px!important;
  border-bottom:2px solid rgba(43,26,16,.16)!important;margin-bottom:10px!important;
}

/* 结果区卡片之间留一致的呼吸，红硬阴影不互相压 */
#result .card{box-shadow:5px 5px 0 0 var(--pk-red)!important;margin-bottom:2px}

/* ── 15. 历史相似热点：分级徽标 + 累计阅读 PV 条 ─────────────────────
   用户要看"这种咖位的事件历史上是什么级别、相对热度多高"，
   所以分级做成色块徽标（S 红 / A 橙 / B 灰），累计阅读用对数长条，
   几条之间一眼能比出相对量级。无值一律如实标"未记录"，不猜数。 */
.hist-grade{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:18px;height:18px;padding:0 4px;flex:none;
  color:#fffdf7;font-size:11px;font-weight:900;line-height:1;
  border:2px solid var(--pk-ink);box-shadow:2px 2px 0 0 rgba(43,26,16,.25);
}
.hist-pv{display:flex;align-items:center;gap:7px;height:13px}
.hist-pv-bar{
  height:7px;flex:none;min-width:6px;
  background:linear-gradient(90deg,#e8a33d,#c2352c);
  border:1.5px solid var(--pk-ink);
}
.hist-pv-num{font-size:10.5px;font-weight:700;color:#6B5747;white-space:nowrap}
.hist-pv-na{font-size:10.5px;color:var(--pk-mute)}

/* ── 16. 生命周期图的时间起点说明 ───────────────────────────────────
   横轴从"热点上线"还是"首曝"算起，直接写在图上方 —— 不写清楚，
   用户就会把"现在=0h"读成"事件刚刚发生"。 */
.lc-anchor{
  display:flex;align-items:center;gap:6px;
  font-size:10.5px;font-weight:700;color:#6B5747;
  background:rgba(255,253,247,.72);
  border-left:3px solid var(--pk-red);
  padding:4px 8px;margin:0 0 6px;line-height:1.45;
}
.lc-anchor-dot{
  width:6px;height:6px;flex:none;background:var(--pk-red);
}

/* ── 17. 顶部待认领话题区：规整网格 + 收紧留白 ───────────────────────
   用户反馈：第二排按钮与第一排错落、右侧大片空白、整体还偏下。
   改成标题独立一行 + 等宽网格（auto-fill），行列对齐、横向铺满；
   同时压缩顶部与各段间距，让首屏信息上移。 */
.quick-wrap{margin-top:10px!important}
/* 这行标题压在像素天空上，深棕字在蓝底上对比不足 —— 加奶油衬底。 */
.quick-head{
  display:inline-block;
  font-size:10.5px;font-weight:700;color:#4A3428;
  margin-bottom:7px;letter-spacing:.3px;
  background:rgba(255,253,247,.92);
  border:2px solid var(--pk-ink);
  padding:3px 9px;line-height:1.4;
}
.quick-grid{
  display:grid;gap:7px;
  grid-template-columns:repeat(auto-fill,minmax(178px,1fr));
}
.quick-chip{
  display:flex!important;align-items:center;gap:6px;
  width:100%;min-width:0;text-align:left;
  padding:6px 9px!important;
}
.quick-chip .quick-pri{
  display:inline-flex;align-items:center;justify-content:center;
  width:16px;height:16px;flex:none;border-radius:0;
  color:#fffdf7;font-size:10px;font-weight:900;line-height:1;
  border:1.5px solid var(--pk-ink);
}
.quick-chip .quick-w{
  flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:11.5px;font-weight:700;
}
/* 顶部整体上移：压缩外层容器上边距 */
main{padding-top:14px!important}
main > .mx-auto:first-child,
main > div:first-child{margin-top:0!important}

/* ── 18. 话题按钮固定一排四条、不折行（2026-09-03 用户反馈）────────────
   用户：「这部分展示的线索必须是能计算出 opp score 评分的，
          且不要换行，只留四条吧」。
   后端已剔除站内零命中（算不出分）的词并把默认 limit 降到 4；
   这里把网格钉成 4 等列、禁止折行，长词用省略号收。 */
.quick-grid-4{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:8px!important;
}
.quick-grid-4 .quick-chip{
  width:100%;min-width:0;
  display:flex;align-items:center;gap:6px;
  white-space:nowrap!important;overflow:hidden!important;
}
.quick-grid-4 .quick-w{
  flex:1;min-width:0;
  white-space:nowrap!important;overflow:hidden!important;
  text-overflow:ellipsis!important;
}
.quick-grid-4 .quick-pri{flex:0 0 auto}
/* 窄屏（<900px）容不下 4 列时降到 2 列，仍然每格单行不折 */
@media (max-width:900px){
  .quick-grid-4{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

/* ── 19. 切角 brief 抽屉 + 结果恢复条（2026-09-03）────────────────────
   brief 抽屉：按当前话题+角度生成，样式跟随像素皮肤（奶油底+浅棕描边）。 */
.ab-box{
  width:min(760px,92vw);max-height:86vh;overflow:auto;
  background:var(--pk-cream,#FFFDF7);
  border:3px solid var(--pk-ink,#2B1A10);
  box-shadow:6px 6px 0 rgba(43,26,16,.28);
  border-radius:4px;padding:18px 20px 16px;
}
.ab-hd{display:flex;align-items:center;justify-content:space-between;gap:12px;
  font-size:17px;font-weight:900;color:var(--pk-ink,#2B1A10);margin-bottom:8px}
.ab-x{border:0;background:transparent;cursor:pointer;font-size:19px;
  line-height:1;color:#7C7673;padding:2px 6px}
.ab-x:hover{color:var(--pk-red,#CF0000)}
.ab-meta{font-size:12px;color:#7C7673;line-height:1.7;margin-bottom:10px}
.ab-warn{background:#FFF3D6;border:2px solid #E8C98A;border-radius:4px;
  padding:9px 11px;font-size:13px;line-height:1.7;color:#7A5A12;margin-bottom:10px}
.ab-lb{font-size:12px;color:#7C7673;margin-bottom:5px}
.ab-ta{width:100%;min-height:300px;resize:vertical;
  background:#FCFAF6;border:2px solid var(--pk-line,#E6CAB1);border-radius:4px;
  padding:11px 13px;font-size:13.5px;line-height:1.85;color:#1A1613;
  font-family:inherit;font-weight:400;white-space:pre-wrap}
.ab-note{font-size:11px;color:#9A938E;line-height:1.6;margin-top:7px}
.ab-ft{display:flex;justify-content:flex-end;gap:9px;margin-top:12px}
.ab-btn{height:34px;padding:0 17px;cursor:pointer;font:inherit;font-size:13px;font-weight:700;
  background:#fff;border:2px solid var(--pk-line,#E6CAB1);border-radius:4px;color:#2B2521}
.ab-btn:hover{border-color:var(--pk-ink,#2B1A10)}
.ab-btn--go{background:var(--pk-red,#CF0000);border-color:var(--pk-red,#CF0000);color:#fff}
.ab-btn--go:hover{filter:brightness(.92)}

/* 结果恢复提示条 */
.restore-bar{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin:0 0 12px;padding:9px 13px;
  background:#FFF6E2;border:2px solid #E8C98A;border-radius:4px;
  font-size:12.5px;color:#7A5A12;line-height:1.6;
}
.restore-bar button{
  height:27px;padding:0 11px;cursor:pointer;font:inherit;font-size:12px;font-weight:700;
  background:#fff;border:2px solid #E8C98A;border-radius:4px;color:#7A5A12;
}
.restore-bar button:hover{border-color:var(--pk-red,#CF0000);color:var(--pk-red,#CF0000)}
.restore-bar button:first-of-type{background:var(--pk-red,#CF0000);border-color:var(--pk-red,#CF0000);color:#fff}
.restore-bar button:first-of-type:hover{color:#fff;filter:brightness(.92)}

/* ── 20. 评分卡诊断折叠（2026-09-03「只留红框部分」）─────────────────
   降级/置信度/过窄切面/样本过薄这几条是诊断信息，不是每次都要看的正文。
   收成一行可点开的小条，默认只占一行高度。 */
.score-diag{
  display:block;width:100%;margin-top:7px;padding:5px 8px;
  background:#FFF6E2;border:2px solid #E8C98A;border-radius:4px;
  cursor:pointer;font:inherit;text-align:left;color:#7A5A12;
}
.score-diag__hd{font-size:11px;font-weight:700;line-height:1.5;display:block}
.score-diag__hd::after{content:" ▾";opacity:.7}
.score-diag.open .score-diag__hd::after{content:" ▴"}
.score-diag__bd{
  display:none;margin-top:5px;padding-top:5px;
  border-top:1px dashed rgba(122,90,18,.35);
  font-size:11px;line-height:1.75;font-weight:400;
}
.score-diag.open .score-diag__bd{display:block}
.score-diag:hover{border-color:var(--pk-red,#CF0000)}