/* ============================================================
   个人信息中枢 · 收藏知识库 + 新项目灵感周报 · 样式
   本文件分两段，prototype-verify 按下方的 @pv-section 哨兵注释切分并校验：
     外壳段   —— 类选择器一律 wb-shell / pv- 前缀
     内容侧段 —— 不许出现顶层裸标签选择器（button {} 会漏出去污染外壳）
   断点用 @container，不用 @media —— 这样桌面框与 H5 框能跑同一份 DOM
   和同一份 CSS，「两套共用同一套信息层级」是可以并排直接验的。

   哨兵注释不要删、不要改写、不要在别处重复 —— 它是分段的唯一依据。
   （早期版本靠找 "[A]"/"[B]" 字样，结果命中了这段说明文字本身，
     整个文件被当成内容侧段，把 html/body 误报成违规。）
   ============================================================ */

/* @pv-section: shell */
/* ============ [A] 稿子外壳 ============ */


/* border-box 必须全局生效：H5 框写 width:390px 加 1px 边框，在 content-box 下
   实测量到 392px —— 等于整份 H5 设计稿都在错误宽度上验证，属于"看着对其实不对"。 */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--canvas, rgb(250,249,248)); color: var(--ink, rgb(34,31,28));
  font: var(--fw-body, 400) var(--fs-14, 14px)/1.6 var(--sans, system-ui, sans-serif);
  -webkit-font-smoothing: antialiased;
}

.wb-shell { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh; }

.wb-shell__rail {
  display: flex; flex-direction: column; gap: 4px;
  border-right: 1px solid var(--border, rgba(39,39,42,.14)); background: var(--surface, #fff);
  padding: 18px 14px; position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.wb-shell__brand { font: var(--fw-title, 650) var(--fs-15, 15px)/1.3 var(--sans, system-ui, sans-serif); margin-bottom: 12px; }

.wb-shell__tabs { display: flex; flex-direction: column; gap: 2px; }
.wb-shell__tabs button {
  text-align: left; border: 0; background: transparent; color: var(--ink-2, rgb(121,114,103));
  padding: 9px 12px; border-radius: var(--r-sm, 8px); cursor: pointer;
  font: var(--fw-label, 600) var(--fs-13, 13px)/1 var(--sans, system-ui, sans-serif);
}
.wb-shell__tabs button:hover { background: var(--hover, rgb(237,236,233)); color: var(--ink, rgb(34,31,28)); }
.wb-shell__tabs button[aria-selected="true"] { background: var(--brand, rgb(81,139,219)); color: #fff; }

.wb-shell__scenes { margin-top: 14px; display: flex; flex-direction: column; gap: 2px; }
.wb-shell__railfoot {
  margin-top: auto; padding-top: 14px; border-top: 1px solid var(--border, rgba(39,39,42,.14));
  color: var(--ink-2, rgb(121,114,103)); font-size: var(--fs-12, 12px);
  overflow-wrap: anywhere;   /* 字段契约路径是长串，不断行会撑宽侧栏 */
}

.wb-shell__main { display: flex; flex-direction: column; min-width: 0; }

.wb-shell__bar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 20px; border-bottom: 1px solid var(--border, rgba(39,39,42,.14));
  background: var(--surface, #fff); position: sticky; top: 0; z-index: 5;
}
.wb-shell__grp { display: inline-flex; background: var(--hover, rgb(237,236,233)); border-radius: var(--r-sm, 8px); padding: 3px; }
.wb-shell__grp button {
  border: 0; background: transparent; color: var(--ink-2, rgb(121,114,103)); cursor: pointer;
  padding: 7px 11px; border-radius: var(--r-sm, 8px); font: var(--fw-label, 600) var(--fs-12, 12px)/1 var(--sans, system-ui, sans-serif);
}
.wb-shell__grp button[aria-pressed="true"] { background: var(--surface, #fff); color: var(--ink, rgb(34,31,28)); box-shadow: var(--sh-2, 0 1px 2px rgba(0,0,0,.05), 0 8px 24px rgba(0,0,0,.06)); }
.wb-shell__grow { flex: 1; }
.wb-shell__now { color: var(--ink-2, rgb(121,114,103)); font-size: var(--fs-12, 12px); }

.wb-shell__pane { padding: 20px; min-width: 0; }
.wb-shell__pane[hidden] { display: none; }
.wb-shell__panehead { max-width: 760px; margin-bottom: 16px; }
.wb-shell__panehead h2 { margin: 0 0 6px; font: var(--fw-title, 650) var(--fs-18, 18px)/1.3 var(--sans, system-ui, sans-serif); }
.wb-shell__panehead p { margin: 0; color: var(--ink-2, rgb(121,114,103)); font-size: var(--fs-13, 13px); }

/* 宽内容必须在自己的容器里滚，不能撑破 document ——
   实测：窗口缩到 375（用户在手机上打开评审稿）时外壳横向溢出 613px。 */
.wb-shell__stage { display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap; overflow-x: auto; }
.wb-shell__device { margin: 0; }
.wb-shell__device figcaption { color: var(--ink-2, rgb(121,114,103)); font-size: var(--fs-12, 12px); margin-bottom: 8px; }
/* caption 写「桌面 1440」而屏上只有 720 —— 必须标出缩放，否则评审者会以为
   自己看到的就是 1440 下的真实尺寸感。 */
/* 缩放百分比由 app.js 写进 .pv-scalenote 的文本。
   不要用 CSS 的 attr(data-scale) —— attr() 只能取伪元素所属元素自己的属性，
   data-scale 在祖先 .wb-shell__device 上，结果渲染成「· % 缩放」，数字丢了却不报错。 */
.pv-scalenote { color: var(--ink-3, rgb(134,132,130)); }
:root[data-view="desktop"] .wb-shell__device[data-frame="h5"] { display: none; }
:root[data-view="h5"] .wb-shell__device[data-frame="desktop"] { display: none; }

/* 内容槽是容器查询的容器 —— 内容侧的断点全部相对它，不相对屏幕 */
.wb-shell__viewport {
  container-type: inline-size;
  background: var(--surface, #fff); border: 1px solid var(--border, rgba(39,39,42,.14));
  border-radius: var(--r, 14px); overflow: hidden; box-shadow: var(--sh-2, 0 1px 2px rgba(0,0,0,.05), 0 8px 24px rgba(0,0,0,.06));
}
.wb-shell__viewport--desktop { width: min(1440px, 100%); height: 900px; overflow-y: auto; }

/* 并排对照：桌面框保持 1440 逻辑宽度后整体缩放，绝不能被挤压。
   实测（2026-08-17 端到端截图）：不缩放时 1440 框在 1440 视口里被 H5 框和侧栏
   挤到只剩 30px 宽，标题文字竖排 —— 并排对照这个核心功能等于不可用。
   注意 scale 后 getBoundingClientRect 返回的是视觉坐标，与截图坐标系一致，
   所以批注定位不受影响。 */
/* 并排对照：两框保持各自的逻辑尺寸，然后**用同一个比例**一起缩放。
   比例由 app.js 的 scaleFrames() 按可用宽度算（Math.min(1, avail/total)，只缩不放）。

   为什么不是「桌面框 scale(.5) + H5 框 100%」——那是本 skill 犯过的错：
   同屏两种比例，稿子上量出来的尺寸一个要除以 2 一个不用，
   「栅格宽度、对齐边、间距体系严格一致」这类需求在这种稿上根本没法验，
   批注坐标也跟着分裂。参照物 wb-redesign 是两框同一比例（实测 0.6047）。 */
.wb-shell__device[data-frame] { flex: 0 0 auto; overflow: hidden; }
.wb-shell__viewport { transform-origin: top left; }
:root[data-view="side-by-side"] .wb-shell__viewport--desktop { width: 1440px; height: 900px; }
.wb-shell__viewport--h5 { width: 375px; height: 812px; overflow-y: auto; }
:root[data-h5size="390x844"] .wb-shell__viewport--h5 { width: 390px; height: 844px; }

.wb-shell__logic {
  margin-top: 20px; max-width: 900px; background: var(--surface, #fff);
  border: 1px solid var(--border, rgba(39,39,42,.14)); border-radius: var(--r, 14px); padding: 16px 18px;
}
.wb-shell__atlas { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.wb-shell__table { max-width: 1000px; display: flex; flex-direction: column; gap: 8px; }

/* 外壳内部件（pv- 前缀同属 [A] 段） */
.pv-slot { min-height: 100%; }
.pv-group { margin-bottom: 6px; }
.pv-group > summary {
  cursor: pointer; list-style: none; padding: 8px 12px; border-radius: var(--r-sm, 8px);
  color: var(--ink-2, rgb(121,114,103)); font: var(--fw-label, 600) var(--fs-12, 12px)/1 var(--sans, system-ui, sans-serif);
}
.pv-group > summary::-webkit-details-marker { display: none; }
.pv-group > summary:hover { background: var(--hover, rgb(237,236,233)); color: var(--ink, rgb(34,31,28)); }
.pv-scene {
  display: block; width: 100%; text-align: left; border: 0; background: transparent;
  color: var(--ink-2, rgb(121,114,103)); padding: 8px 12px 8px 22px; border-radius: var(--r-sm, 8px); cursor: pointer;
  font: var(--fw-ui, 550) var(--fs-13, 13px)/1.3 var(--sans, system-ui, sans-serif);
}
.pv-scene:hover { background: var(--hover, rgb(237,236,233)); color: var(--ink, rgb(34,31,28)); }
.pv-scene[aria-current="true"] { background: var(--hover, rgb(237,236,233)); color: var(--brand, rgb(81,139,219)); font-weight: var(--fw-title, 650); }

.pv-logicgrid { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 6px 14px; font-size: var(--fs-13, 13px); }
.pv-logickey { color: var(--ink-2, rgb(121,114,103)); }
.pv-todo { color: var(--warn, oklch(0.66 0.14 80)); font-weight: var(--fw-label, 600); }

.pv-card { background: var(--surface, #fff); border: 1px solid var(--border, rgba(39,39,42,.14)); border-radius: var(--r, 14px); overflow: hidden; }
.pv-cardhead { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-bottom: 1px solid var(--border, rgba(39,39,42,.14)); }
.pv-cardname { font: var(--fw-title, 650) var(--fs-13, 13px)/1.4 var(--sans, system-ui, sans-serif); }
.pv-cardwhy { margin-left: auto; max-width: 58%; color: var(--ink-2, rgb(121,114,103)); font-size: var(--fs-12, 12px); text-align: right; }
.pv-static { display: inline-block; margin-top: 4px; color: var(--warn, oklch(0.66 0.14 80)); font-size: 11px; font-weight: var(--fw-label, 600); }
.pv-cardbody { padding: 14px; background: var(--hover, rgb(237,236,233)); }

.pv-row { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 12px; align-items: start;
  background: var(--surface, #fff); border: 1px solid var(--border, rgba(39,39,42,.14)); border-radius: var(--r, 14px); padding: 10px 14px; font-size: var(--fs-13, 13px); }
.pv-pill { font: var(--fw-label, 600) 11px/1.6 var(--sans, system-ui, sans-serif); padding: 1px 8px; border-radius: var(--r-full, 9999px); text-align: center; }
.pv-pill--ok { background: var(--ok-soft, oklch(0.56 0.14 150 / 11%)); color: var(--ok, oklch(0.56 0.14 150)); }
.pv-pill--skip { background: var(--warn-soft, oklch(0.66 0.14 80 / 12%)); color: var(--warn, oklch(0.66 0.14 80)); }
.pv-pill--absent { background: var(--brand-soft, rgba(81, 139, 219, 0.12)); color: var(--brand, rgb(81,139,219)); }
.pv-empty { padding: 24px; color: var(--ink-2, rgb(121,114,103)); font-size: var(--fs-13, 13px); }

/* 外壳自身的窄屏适配（外壳响应真实窗口，用 @media；
   内容侧响应内容槽宽度，用 @container —— 两者不是一回事，别混）。
   用户会在手机上打开评审稿，那时侧栏必须让位、设备框必须纵向堆叠。 */
@media (max-width: 900px) {
  .wb-shell { grid-template-columns: minmax(0, 1fr); }
  .wb-shell__rail {
    position: static; height: auto; overflow-y: visible;
    border-right: 0; border-bottom: 1px solid var(--border, rgba(39,39,42,.14));
  }
  .wb-shell__tabs { flex-direction: row; flex-wrap: wrap; }
  .wb-shell__stage { flex-direction: column; }
  .wb-shell__pane { padding: 14px; }
  .wb-shell__viewport--desktop { width: 100%; }
  :root[data-view="side-by-side"] .wb-shell__device[data-frame="desktop"] { width: 100%; }
}

/* 键盘弹起：H5 上输入法占掉近半屏，composer 不上移用户看不见自己打的字。
   真实实现由 visualViewport 驱动 --kb-inset，仅在 ≤640px 或 pointer:coarse 挂监听；
   这里是稿子里的模拟开关。 */
:root[data-kb="on"] .wb-shell__viewport--h5 { --kb-inset: 336px; }

/* ---- 空层声明条（本 skill 最不可替代的机制，必须醒目）---- */
.wb-shell__layers { padding: 0; }
.wb-shell__layers:empty { display: none; }
.wb-shell__layers.is-gap {
  background: var(--brand-soft, rgba(81, 139, 219, 0.12)); border-bottom: 2px solid var(--brand, rgb(81,139,219));
  padding: 12px 20px;
}
.wb-shell__layers.is-warn {
  background: var(--warn-soft, oklch(0.66 0.14 80 / 12%)); border-bottom: 2px solid var(--warn, oklch(0.66 0.14 80));
  padding: 12px 20px;
}
.wb-shell__layers.is-ok {
  background: var(--ok-soft, oklch(0.56 0.14 150 / 11%)); border-bottom: 1px solid var(--border, rgba(39,39,42,.14));
  padding: 8px 20px;
}
.pv-layerhead {
  font: var(--fw-display, 700) var(--fs-12, 12px)/1.4 var(--sans, system-ui, sans-serif); letter-spacing: .02em;
  color: var(--brand, rgb(81,139,219)); margin-bottom: 4px;
}
.wb-shell__layers.is-warn .pv-layerhead { color: var(--warn, oklch(0.66 0.14 80)); }
.pv-layerline { font-size: var(--fs-13, 13px); line-height: 1.65; }
.pv-layerline--gap b { color: var(--brand, rgb(81,139,219)); }
.pv-layerline--warn b { color: var(--warn, oklch(0.66 0.14 80)); }

/* ---- 侧栏四层指示器：位置固定、走法自由 ---- */
.wb-shell__stack {
  display: flex; flex-direction: column; gap: 2px;
  margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--border, rgba(39,39,42,.14));
}
.pv-stackrow {
  display: grid; grid-template-columns: 16px 1fr auto; gap: 6px; align-items: center;
  padding: 4px 6px; border-radius: var(--r-sm, 8px); font-size: var(--fs-12, 12px);
}
.pv-stackno { color: var(--ink-2, rgb(121,114,103)); font-variant-numeric: tabular-nums; }
.pv-stackname { color: var(--ink, rgb(34,31,28)); font-weight: var(--fw-label, 600); }
.pv-stackstate { font-size: 11px; }
.pv-stackrow--ok { background: var(--ok-soft, oklch(0.56 0.14 150 / 11%)); }
.pv-stackrow--ok .pv-stackstate { color: var(--ok, oklch(0.56 0.14 150)); }
.pv-stackrow--warn { background: var(--warn-soft, oklch(0.66 0.14 80 / 12%)); }
.pv-stackrow--warn .pv-stackstate { color: var(--warn, oklch(0.66 0.14 80)); }
.pv-stackrow--gap { background: var(--brand-soft, rgba(81, 139, 219, 0.12)); }
.pv-stackrow--gap .pv-stackstate { color: var(--brand, rgb(81,139,219)); font-weight: var(--fw-display, 700); }

/* ---- 层间对照矩阵 ---- */
.wb-shell__matrix { max-width: 1100px; overflow-x: auto; }
.pv-msum { color: var(--ink-2, rgb(121,114,103)); font-size: var(--fs-12, 12px); margin-bottom: 8px; }
.pv-mrow {
  display: grid; grid-template-columns: 1.3fr 1.5fr 1fr .8fr 1fr;
  gap: 12px; padding: 10px 14px; font-size: var(--fs-13, 13px); align-items: start;
  background: var(--surface, #fff); border: 1px solid var(--border, rgba(39,39,42,.14));
  border-radius: var(--r, 14px); margin-bottom: 6px; min-width: 720px;
}
.pv-mrow--head {
  background: var(--hover, rgb(237,236,233)); font-weight: var(--fw-title, 650); font-size: var(--fs-12, 12px);
  color: var(--ink-2, rgb(121,114,103)); border: 0;
}
.pv-bad { color: var(--brand, rgb(81,139,219)); font-weight: var(--fw-label, 600); }
.pv-okmark { color: var(--ok, oklch(0.56 0.14 150)); font-size: 11px; font-weight: var(--fw-label, 600); }
.pv-note { color: var(--ink-2, rgb(121,114,103)); font-size: var(--fs-12, 12px); }
.pv-pill--full { background: var(--ok-soft, oklch(0.56 0.14 150 / 11%)); color: var(--ok, oklch(0.56 0.14 150)); }
.pv-pill--nofact { background: var(--brand-soft, rgba(81, 139, 219, 0.12)); color: var(--brand, rgb(81,139,219)); }
.pv-pill--nodesign { background: var(--brand-soft, rgba(81, 139, 219, 0.12)); color: var(--brand, rgb(81,139,219)); }
.pv-pill--reverse { background: var(--warn-soft, oklch(0.66 0.14 80 / 12%)); color: var(--warn, oklch(0.66 0.14 80)); }
.pv-pill--unknownfact { background: var(--warn-soft, oklch(0.66 0.14 80 / 12%)); color: var(--warn, oklch(0.66 0.14 80)); }
.pv-pill--skip { background: var(--hover, rgb(237,236,233)); color: var(--ink-2, rgb(121,114,103)); }

/* @pv-section: content */
/* ============ [B] 内容侧 ============ */
/* 规则：不许裸标签选择器；类名前缀 ih-（info-hub）；
   一律消费项目 token（tokens.micro.css），不自建平行变量、不硬编码 font-family；
   断点全部 @container，相对内容槽宽度。 */

.ih {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--canvas);
  font-size: var(--fs-14);
  line-height: var(--lh-body);
  min-height: 100%;
  padding: var(--sp-6);
}

/* ---- 标题与说明 ---- */
.ih-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-5); }
.ih-h1 { font-size: var(--fs-24); font-weight: var(--fw-title); line-height: 1.25; margin: 0; letter-spacing: -0.01em; }
.ih-h2 { font-size: var(--fs-15); font-weight: var(--fw-label); margin: var(--sp-6) 0 var(--sp-2); display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.ih-sub { font-size: var(--fs-13); color: var(--ink-2); margin-top: var(--sp-1); }
.ih-what { font-size: var(--fs-14); color: var(--ink); margin: 0 0 var(--sp-3); }
.ih-hint { font-size: var(--fs-12); color: var(--ink-3); margin: var(--sp-2) 0 var(--sp-4); }
.ih-dim { color: var(--ink-3); }
.ih-back { display: inline-block; font-size: var(--fs-13); color: var(--ink-2); text-decoration: none; margin-bottom: var(--sp-4); }
.ih-link { background: none; border: 0; padding: 0; font-family: var(--sans); font-size: var(--fs-13); color: var(--brand); cursor: pointer; }

/* ---- 扫描结果条 ---- */
.ih-scan {
  font-size: var(--fs-13); color: var(--ink-2);
  background: var(--surface); border: 1px solid var(--border-soft);
  border-radius: var(--r-sm); padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-5);
}
.ih-scan b { color: var(--ink); font-weight: var(--fw-label); }

/* ---- 推荐卡片 ---- */
.ih-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r); padding: var(--sp-5); margin-bottom: var(--sp-4);
}
.ih-card--done { opacity: 0.9; }
.ih-card__hd { display: flex; gap: var(--sp-3); align-items: flex-start; margin-bottom: var(--sp-3); }
.ih-card__id { min-width: 0; }
.ih-rank {
  flex: none; width: 24px; height: 24px; border-radius: var(--r-full);
  background: var(--hover); color: var(--ink-2);
  font-size: var(--fs-12); font-weight: var(--fw-label);
  display: flex; align-items: center; justify-content: center;
}
.ih-card__name { font-size: var(--fs-17); font-weight: var(--fw-title); margin: 0; word-break: break-word; }
.ih-meta { font-size: var(--fs-12); color: var(--ink-2); margin-top: var(--sp-1); display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.ih-meta--lg { font-size: var(--fs-13); margin-bottom: var(--sp-4); }
.ih-chip {
  background: var(--brand-soft); color: var(--brand-ink);
  font-size: var(--fs-10); font-weight: var(--fw-label);
  padding: 2px var(--sp-2); border-radius: var(--r-xs);
}

/* ---- 「为什么推给你」—— 整套系统的防废话机制，视觉上必须最重 ---- */
.ih-why {
  border-left: 2px solid var(--brand);
  background: var(--brand-soft);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-4);
}
.ih-why--full { margin-bottom: var(--sp-6); }
.ih-why__t { font-size: var(--fs-12); font-weight: var(--fw-label); color: var(--brand-ink); margin-bottom: var(--sp-2); }
.ih-why__b { margin: 0 0 var(--sp-2); font-size: var(--fs-14); }
.ih-cite { font-size: var(--fs-12); color: var(--brand-ink); text-decoration: none; border-bottom: 1px dashed var(--brand); padding-bottom: 1px; }

/* ---- 按钮 ---- */
.ih-acts { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-4); }
.ih-btn {
  font-family: var(--sans); font-size: var(--fs-13); font-weight: var(--fw-ui);
  color: var(--ink); background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: var(--sp-2) var(--sp-3); cursor: pointer; white-space: nowrap;
}
.ih-btn--ok { border-color: var(--brand); color: var(--brand-ink); }
.ih-btn--pri { background: var(--brand); border-color: var(--brand); color: var(--on-brand); margin-top: var(--sp-4); }
.ih-btn--ghost { background: transparent; }

/* ---- 宁缺毋滥 / 空态 ---- */
.ih-thin {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r); padding: var(--sp-6); margin-bottom: var(--sp-5);
}
.ih-thin__n { font-size: var(--fs-48); font-weight: var(--fw-display); line-height: var(--lh-display); color: var(--ink); }
.ih-thin__t { font-size: var(--fs-16); font-weight: var(--fw-label); margin: var(--sp-3) 0 var(--sp-2); }
.ih-thin__b { font-size: var(--fs-14); color: var(--ink-2); margin: 0 0 var(--sp-4); }
.ih-thin__b b { color: var(--ink); font-weight: var(--fw-label); }

/* ---- 引用的收藏 ---- */
.ih-quote {
  background: var(--surface); border: 1px solid var(--border-soft);
  border-radius: var(--r-sm); padding: var(--sp-4); margin-bottom: var(--sp-3);
}
.ih-quote--main { border-color: var(--border); padding: var(--sp-5); margin-bottom: var(--sp-5); }
.ih-quote--dead { opacity: 0.85; }
.ih-quote__m { font-size: var(--fs-12); color: var(--ink-2); margin-bottom: var(--sp-2); display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.ih-quote__s { font-size: var(--fs-12); color: var(--ink-3); margin-top: var(--sp-3); }
.ih-quote__tags { display: flex; gap: var(--sp-1); margin-top: var(--sp-3); flex-wrap: wrap; }
.ih-quote p { margin: 0; font-size: var(--fs-14); }

/* 「收藏时间未知」这类诚实标注：必须看得见，但不能盖过正文 */
.ih-warn {
  font-size: var(--fs-10); font-weight: var(--fw-label);
  color: var(--ink-2-deep); background: var(--hover);
  padding: 1px var(--sp-2); border-radius: var(--r-xs);
}
.ih-warn--dead { color: var(--danger); background: var(--danger-soft); }

/* ---- 标签 ---- */
.ih-tags { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-4); }
.ih-tag {
  font-family: var(--sans); font-size: var(--fs-12); font-weight: var(--fw-ui);
  color: var(--ink-2); background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-full);
  padding: var(--sp-1) var(--sp-3); cursor: pointer; white-space: nowrap;
}
.ih-tag--on { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.ih-tag--sm { font-size: var(--fs-10); padding: 1px var(--sp-2); }
.ih-tag--add { border-style: dashed; color: var(--ink-3); }

/* ---- 搜索 ---- */
.ih-search { margin-bottom: var(--sp-2); }
.ih-input {
  width: 100%; font-family: var(--sans); font-size: var(--fs-14); color: var(--ink);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: var(--sp-3) var(--sp-4);
}
.ih-hit { background: var(--brand-soft); color: var(--brand-ink); font-weight: var(--fw-label); }

/* ---- 列表 ---- */
.ih-list { list-style: none; margin: 0; padding: 0; }
.ih-row { border-bottom: 1px solid var(--border-soft); padding: var(--sp-4) 0; }
.ih-row__t { margin: 0 0 var(--sp-2); font-size: var(--fs-14); }
.ih-row__m { font-size: var(--fs-12); color: var(--ink-2); display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.ih-row__g { display: flex; gap: var(--sp-1); margin-top: var(--sp-2); flex-wrap: wrap; }
.ih-row--edit { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); }
.ih-row--off { opacity: 0.55; }

/* ---- 来源标注：AI 生成 / AI 推测 ---- */
.ih-src-tag {
  font-size: var(--fs-10); font-weight: var(--fw-ui);
  color: var(--ink-2); background: var(--hover);
  padding: 1px var(--sp-2); border-radius: var(--r-xs);
}
.ih-src-tag--guess { color: var(--danger); background: var(--danger-soft); }

/* ---- 提示块 ---- */
.ih-note {
  font-size: var(--fs-12); color: var(--ink-2); line-height: var(--lh-body);
  background: var(--hover); border-radius: var(--r-sm);
  padding: var(--sp-3) var(--sp-4); margin-top: var(--sp-4);
}
.ih-note b { color: var(--ink); font-weight: var(--fw-label); }
.ih-foot { font-size: var(--fs-12); color: var(--ink-2); margin-top: var(--sp-5); }

/* ---- 画像条形 ---- */
.ih-bars { display: grid; gap: var(--sp-4); }
.ih-bar__h { display: flex; justify-content: space-between; font-size: var(--fs-13); margin-bottom: var(--sp-2); }
.ih-bar__h b { font-weight: var(--fw-label); color: var(--ink-2); }
.ih-bar__t { height: 6px; background: var(--hover); border-radius: var(--r-full); overflow: hidden; }
.ih-bar__f { display: block; height: 100%; background: var(--brand); border-radius: var(--r-full); }

/* ---- 接入步骤 ---- */
.ih-steps { display: grid; gap: var(--sp-4); margin: var(--sp-5) 0; }
.ih-step { display: flex; gap: var(--sp-3); align-items: flex-start; }
.ih-step__n {
  flex: none; width: 22px; height: 22px; border-radius: var(--r-full);
  background: var(--ink); color: var(--surface);
  font-size: var(--fs-12); font-weight: var(--fw-label);
  display: flex; align-items: center; justify-content: center;
}
.ih-step__t { margin: 0 0 var(--sp-1); font-size: var(--fs-14); font-weight: var(--fw-ui); }
.ih-step__b { margin: 0; font-size: var(--fs-13); color: var(--ink-2); }
.ih-step__b b { color: var(--ink); font-weight: var(--fw-label); }

/* ---- 回填进度：只有真实数字，没有百分比 ---- */
.ih-prog { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: var(--sp-5); margin-bottom: var(--sp-4); }
.ih-prog__n { font-size: var(--fs-48); font-weight: var(--fw-display); line-height: var(--lh-display); }
.ih-prog__l { font-size: var(--fs-13); color: var(--ink-2); margin-top: var(--sp-1); }
/* 不定长动画条：表示「在跑」，不表示「跑了多少」 */
.ih-prog__bar { height: 4px; background: var(--hover); border-radius: var(--r-full); overflow: hidden; margin-top: var(--sp-4); }
.ih-prog__f { display: block; width: 35%; height: 100%; background: var(--brand); border-radius: var(--r-full); }

.ih-log { list-style: none; margin: 0; padding: 0; }
.ih-log__i { font-size: var(--fs-13); color: var(--ink-2); padding: var(--sp-2) 0; padding-left: var(--sp-5); position: relative; }
.ih-log__i--ok { color: var(--ink); }
.ih-log__i--run { color: var(--ink); font-weight: var(--fw-ui); }

/* ---- 失败态 ---- */
.ih-fail { background: var(--surface); border: 1px solid var(--danger); border-radius: var(--r); padding: var(--sp-5); }
.ih-fail__t { font-size: var(--fs-15); font-weight: var(--fw-label); color: var(--danger); margin-bottom: var(--sp-3); }
.ih-fail__b { font-size: var(--fs-14); margin: 0 0 var(--sp-2); }

/* ---- 反馈 ---- */
.ih-fb { background: var(--hover); border-radius: var(--r-sm); padding: var(--sp-4); }
.ih-fb__t { margin: 0 0 var(--sp-2); font-size: var(--fs-14); }
.ih-fb__t b { font-weight: var(--fw-label); }
.ih-fb__b { margin: 0 0 var(--sp-3); font-size: var(--fs-13); color: var(--ink-2); }

/* ============ 窄屏（H5 框 375/390）============
   断点相对内容槽，不相对屏幕。 */
@container (max-width: 640px) {
  .ih { padding: var(--sp-4); padding-bottom: calc(var(--sp-4) + var(--kb-inset, 0px)); }
  .ih-h1 { font-size: var(--fs-18); }
  .ih-top { flex-direction: column; gap: var(--sp-3); }
  .ih-card { padding: var(--sp-4); }
  .ih-thin { padding: var(--sp-5); }
  .ih-thin__n { font-size: var(--fs-30); }
  .ih-prog__n { font-size: var(--fs-30); }
  .ih-acts .ih-btn { flex: 1 1 auto; }
  .ih-row--edit { flex-direction: column; align-items: stretch; gap: var(--sp-2); }
}

/* ---- 闭环图 ----
   宽内容在自己的容器里滚，不撑破 document（H5 框下会横向滚动）。 */
.ih-flowwrap { overflow-x: auto; margin: var(--sp-5) 0; }
.ih-flow { display: block; width: 100%; min-width: 700px; height: auto; }
.ih-flow__box { fill: var(--surface); stroke: var(--border); stroke-width: 1.5; }
.ih-flow__box--key { fill: var(--brand-soft); stroke: var(--brand); }
.ih-flow__box--mute { fill: var(--canvas); stroke: var(--border-soft); stroke-dasharray: 4 3; }
.ih-flow__t { fill: var(--ink); font-family: var(--sans); font-size: var(--fs-13); font-weight: var(--fw-ui); text-anchor: middle; }
.ih-flow__t--mute { fill: var(--ink-3); }
.ih-flow__s { fill: var(--ink-2); font-family: var(--sans); font-size: var(--fs-10); text-anchor: middle; }
.ih-flow__ln { fill: none; stroke: var(--ink-3); stroke-width: 1.5; }
.ih-flow__ln--mute { stroke: var(--border); stroke-dasharray: 4 3; }
.ih-flow__ln--back { stroke: var(--brand); stroke-width: 2; }
/* 箭头跟随所在线的颜色；不支持 context-stroke 的引擎回落到灰 */
.ih-flow__ah { fill: var(--ink-3); fill: context-stroke; }
.ih-flow__lb { fill: var(--ink-2); font-family: var(--sans); font-size: var(--fs-10); text-anchor: middle; }
.ih-flow__lb--start { text-anchor: start; }
.ih-flow__lb--mute { fill: var(--ink-3); }
.ih-flow__lb--back { fill: var(--brand-ink); font-weight: var(--fw-ui); text-anchor: end; }

/* ============ 应用外壳 ============
   参考 karakeep-app/karakeep 的形态：左栏导航 + 主内容区，
   窄屏转底部 tab（它的移动端就是这么做的）。
   之前每个场景都是孤立一屏，看不出这是一个应用。 */
.ih-app { display: flex; min-height: 100%; background: var(--canvas); }
.ih-nav {
  flex: none; width: 208px; padding: var(--sp-5) var(--sp-3);
  background: var(--surface); border-right: 1px solid var(--border-soft);
  display: flex; flex-direction: column; gap: var(--sp-1);
}
.ih-brand { font-size: var(--fs-15); font-weight: var(--fw-title); padding: 0 var(--sp-3) var(--sp-4); }
.ih-navitem {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm);
  font-size: var(--fs-13); font-weight: var(--fw-ui); color: var(--ink-2);
  text-decoration: none; cursor: pointer;
}
.ih-navitem.is-on { background: var(--hover); color: var(--ink); }
.ih-navcount { font-size: var(--fs-10); color: var(--ink-3); }
.ih-navfoot { margin-top: auto; padding: var(--sp-3); font-size: var(--fs-10); color: var(--ink-3); line-height: 1.5; }
.ih-main { flex: 1 1 auto; min-width: 0; padding: var(--sp-6); }

.ih-page { margin-bottom: var(--sp-5); }
.ih-page__sub { font-size: var(--fs-13); color: var(--ink-2); margin-top: var(--sp-1); }

/* ---- 统计块 ----
   参考 sansan0/TrendRadar 报告页顶部：把「扫了多少 / 几条够格 / 丢了多少」
   做成并排数字块。丢弃数必须露出来——它是判断标准松紧的唯一依据。 */
.ih-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-3); margin-bottom: var(--sp-5); }
.ih-stat {
  background: var(--surface); border: 1px solid var(--border-soft);
  border-radius: var(--r); padding: var(--sp-3) var(--sp-4);
}
.ih-stat b { display: block; font-size: var(--fs-24); font-weight: var(--fw-title); line-height: 1.2; }
.ih-stat span { display: block; font-size: var(--fs-10); color: var(--ink-2); margin-top: 2px; }
.ih-stat--key { border-color: var(--brand); background: var(--brand-soft); }
.ih-stat--key b { color: var(--brand-ink); }
.ih-stat--mute b { color: var(--ink-3); }

/* ---- 收藏库卡片网格（karakeep 是瀑布流缩略图卡；我们的内容基本是纯文字推文，
   所以走等高文字卡 + 标签 chips，不硬套需要配图的瀑布流）---- */
.ih-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
.ih-gcard {
  background: var(--surface); border: 1px solid var(--border-soft);
  border-radius: var(--r); padding: var(--sp-4);
  display: flex; flex-direction: column; gap: var(--sp-2);
}
.ih-gcard__t { margin: 0; font-size: var(--fs-14); line-height: var(--lh-body); }
.ih-gcard__m { font-size: var(--fs-12); color: var(--ink-2); display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; margin-top: auto; }
.ih-gcard__g { display: flex; gap: var(--sp-1); flex-wrap: wrap; }

@container (max-width: 640px) {
  /* 窄屏：左栏转底部 tab —— karakeep 移动端同款 */
  .ih-app { flex-direction: column; }
  .ih-nav {
    order: 2; width: auto; flex-direction: row; gap: 0;
    border-right: 0; border-top: 1px solid var(--border-soft);
    padding: var(--sp-2) var(--sp-2) calc(var(--sp-2) + var(--kb-inset, 0px));
    position: sticky; bottom: 0;
  }
  .ih-brand, .ih-navfoot, .ih-navcount { display: none; }
  .ih-navitem { flex: 1 1 0; justify-content: center; font-size: var(--fs-12); padding: var(--sp-2) var(--sp-1); }
  .ih-main { order: 1; padding: var(--sp-4); padding-bottom: calc(var(--sp-4) + var(--kb-inset, 0px)); }
  .ih-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ih-grid { grid-template-columns: minmax(0, 1fr); }
}

/* 套了应用外壳的场景不要外层 padding。
   但 --kb-inset 仍要有落点：键盘弹起时内容必须被抬起，
   否则 H5 上输入法会盖住用户正在打的字。 */
.ih--shell { padding: 0; padding-bottom: var(--kb-inset, 0px); }

/* ---- 左栏升级：搜索 + 导航 + 标签（带计数）----
   linkwarden 与 karakeep 的共性：左栏顶部是搜索，下面把标签/集合连同计数一起列出来，
   让「我存了些什么」在不进任何页面时就能看见。 */
.ih-navsearch { padding: 0 var(--sp-3) var(--sp-3); }
.ih-navsearch input {
  width: 100%; font-family: var(--sans); font-size: var(--fs-12); color: var(--ink);
  background: var(--canvas); border: 1px solid var(--border-soft);
  border-radius: var(--r-sm); padding: var(--sp-2) var(--sp-3);
}
.ih-navsec {
  padding: var(--sp-4) var(--sp-3) var(--sp-2);
  font-size: var(--fs-10); font-weight: var(--fw-label);
  color: var(--ink-3); letter-spacing: .06em;
}
.ih-navtag {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-3); border-radius: var(--r-sm);
  font-size: var(--fs-12); color: var(--ink-2); text-decoration: none; cursor: pointer;
}
.ih-navtag.is-on { background: var(--hover); color: var(--ink); }

/* ---- 列表 + 详情面板（短内容的主流交互：点一条不跳走）---- */
.ih-main--flush { padding: 0; display: flex; flex-direction: column; min-height: 0; }
.ih-split { display: grid; grid-template-columns: 340px minmax(0, 1fr); flex: 1 1 auto; min-height: 0; }
.ih-listpane { border-right: 1px solid var(--border-soft); display: flex; flex-direction: column; min-width: 0; overflow-y: auto; }
.ih-listhd {
  padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border-soft);
  font-size: var(--fs-12); color: var(--ink-2); display: flex; justify-content: space-between; gap: var(--sp-2);
}
.ih-slist { list-style: none; margin: 0; padding: 0; }
.ih-sitem {
  padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border-soft);
  cursor: pointer; display: flex; flex-direction: column; gap: var(--sp-2);
}
.ih-sitem.is-on { background: var(--brand-soft); box-shadow: inset 2px 0 0 var(--brand); }
.ih-sitem__t {
  margin: 0; font-size: var(--fs-13); line-height: 1.5; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ih-sitem__m { font-size: var(--fs-10); color: var(--ink-2); display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.ih-detail { padding: var(--sp-6); overflow-y: auto; min-width: 0; }

@container (max-width: 640px) {
  /* 窄屏：详情面板收起，列表占满 —— 点进去才看详情（主流移动端做法） */
  .ih-split { grid-template-columns: minmax(0, 1fr); }
  .ih-detail { display: none; }
  .ih-navsearch, .ih-navsec, .ih-navtag { display: none; }
}