/* 知伴共享样式：主文档侧组件（toast / 导读 / 冰屋 / 侧栏内链式结构） */

#zb-toast-root {
  position: fixed; top: 64px; left: 50%; transform: translateX(-50%) translateY(-12px);
  z-index: 99999; max-width: 560px;
  background: #121212; color: #fff; font-size: 13px; line-height: 1.7;
  padding: 10px 18px; border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.25);
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
}
#zb-toast-root.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.zb-btn {
  background: #056de8; color: #fff; border: 0; border-radius: 8px;
  padding: 9px 18px; font-size: 14px; cursor: pointer;
}
.zb-btn:hover { background: #0461cf; }

/* 导读 */
.GuideItem { border: 1px solid #e7e7e7; border-radius: 8px; padding: 12px 14px; margin-bottom: 10px; }
.GuideItem .gi-head { font-size: 14px; line-height: 1.7; }
.GuideItem .gi-quote { font-size: 13px; color: #666; margin: 6px 0; padding-left: 10px; border-left: 3px solid #e7e7e7; }
.GuideItem .gi-link { font-size: 13px; color: #056de8; text-decoration: none; }
.GuideGap {
  background: #fff8ef; border: 1px solid #f5d9b8; border-radius: 8px;
  padding: 10px 14px; font-size: 13px; margin: 10px 0; color: #8a5a1d;
}
.guide-ta {
  width: 100%; font-size: 13px; line-height: 1.7; padding: 8px 10px;
  border: 1px solid #e0e5ee; border-radius: 8px; resize: vertical; font-family: inherit; margin-top: 6px;
}
.guide-name {
  font-size: 13px; padding: 8px 12px; border: 1px solid #e0e5ee; border-radius: 8px; min-width: 200px;
}

/* 冰屋 */
.IglooStats { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; margin-top: 8px; }
.IglooStat { background: #f7f9fc; border-radius: 8px; padding: 12px 14px; }
.IglooStat .v { font-size: 18px; font-weight: 700; color: #056de8; }
.IglooStat .l { font-size: 12px; color: #8590a6; margin-top: 2px; }

/* 去看山（侧栏内的营地链） */
.zb-camp { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 8px; font-size: 13px; background: #f7f9fc; }
.zb-camp:hover { background: #eef3fb; }
.zb-camp-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.zb-camp-state { margin-left: auto; font-size: 11px; color: #8590a6; }
.zb-arrow { text-align: center; color: #c2cad6; font-size: 11px; padding: 2px 0; }
.zb-arrow.solid { color: #056de8; }
.zb-mountain { margin-top: 12px; padding: 10px 12px; background: #f0f7ff; border-radius: 8px; font-size: 12px; line-height: 1.7; color: #2a5d9e; }

/* 看山提问 */
.zb-quiz { border: 1px solid #e7e7e7; border-radius: 10px; padding: 12px 14px; margin-bottom: 12px; }
.zb-quiz-concept { font-size: 12px; color: #8590a6; margin-bottom: 4px; }
.zb-quiz-q { font-size: 14px; font-weight: 600; line-height: 1.6; margin-bottom: 8px; }
.zb-quiz-a {
  width: 100%; min-height: 68px; font-size: 13px; line-height: 1.6; padding: 9px 11px;
  border: 1px solid #e0e5ee; border-radius: 8px; resize: none; font-family: inherit;
  box-sizing: border-box; outline: none; transition: border-color .15s, box-shadow .15s;
}
.zb-quiz-a:focus { border-color: #056de8; box-shadow: 0 0 0 3px rgba(5, 109, 232, .1); }
.zb-quiz-a::placeholder { color: #b3bac6; }
.zb-quiz-actions { display: flex; justify-content: flex-end; margin-top: 10px; }
.zb-quiz-submit {
  background: #056de8; color: #fff; border: 0; border-radius: 8px;
  padding: 7px 22px; font-size: 13px; line-height: 1.4; cursor: pointer;
}
.zb-quiz-submit:hover { background: #0358bd; }
.zb-quiz-verdict { font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.zb-quiz-verdict.v-correct { color: #3aa655; }
.zb-quiz-verdict.v-partial { color: #d67a27; }
.zb-quiz-verdict.v-wrong { color: #c33; }
.zb-quiz-feedback { font-size: 13px; line-height: 1.7; color: #444; }
.zb-quiz-again { margin-top: 8px; background: none; border: 1px solid #e0e5ee; border-radius: 6px; padding: 4px 12px; font-size: 12px; cursor: pointer; color: #666; }

/* ============ Learning Hub（§新功能） ============ */
.hub-layout { display: flex; flex-direction: column; gap: 12px; }
.hub-hero { background: #fff; border-radius: 6px; padding: 24px 28px; }
.hub-hero h1 { font-size: 22px; margin-bottom: 6px; }
.hub-hero .sub { color: var(--zb-gray); font-size: 13px; margin-bottom: 12px; }
.hub-legend { display: flex; gap: 18px; flex-wrap: wrap; font-size: 12px; color: #666; }
.hub-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 5px; vertical-align: -1px; }
.hub-section { background: #fff; border-radius: 6px; padding: 20px 24px; }
.hub-section h2 { font-size: 18px; margin-bottom: 4px; }
.hub-section .hint { color: var(--zb-gray); font-size: 12px; margin-bottom: 14px; }
.hub-empty { color: #8590a6; font-size: 14px; padding: 18px 0; line-height: 1.8; }
.hub-graph { width: 100%; height: 460px; }
/* 图谱弹卡 */
.hub-card {
  position: absolute; z-index: 20; background: #fff; border: 1px solid var(--zb-border);
  border-radius: 10px; box-shadow: 0 10px 32px rgba(18,18,18,.16); width: 260px; padding: 12px 14px;
  font-size: 13px; line-height: 1.6;
}
.hub-card h3 { font-size: 15px; margin-bottom: 6px; }
.hub-card .def { color: #333; max-height: 96px; overflow: auto; }
.hub-card .meta { color: #8590a6; font-size: 12px; margin-top: 6px; }
.hub-card .gap { background: #fff1f0; border: 1px solid #ffd8d6; color: #b42318; border-radius: 6px; padding: 5px 8px; font-size: 12px; margin-top: 8px; }
.hub-card .btn { display: inline-block; margin-top: 8px; background: #056de8; color: #fff; border: 0; border-radius: 6px; padding: 4px 12px; font-size: 12px; cursor: pointer; }
/* 诊断报告 */
.diag-summary {
  background: #f0f7ff; border-left: 3px solid #056de8; border-radius: 6px;
  padding: 12px 14px; font-size: 14px; line-height: 1.8; color: #1f2329; margin-bottom: 14px;
}
.diag-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.diag-col h3 { font-size: 14px; margin-bottom: 8px; color: #444; }
.diag-topic { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 13px; }
.diag-topic .bar { flex: 1; height: 6px; background: #eef1f6; border-radius: 3px; overflow: hidden; }
.diag-topic .bar i { display: block; height: 100%; background: #056de8; border-radius: 3px; }
.diag-topic.weak .bar i { background: #d67a27; }
.diag-topic .pct { width: 46px; text-align: right; color: #8590a6; font-size: 12px; }
.diag-chip { display: inline-block; background: #fff7e6; border: 1px solid #ffe1a8; color: #ad6800; border-radius: 20px; padding: 3px 10px; font-size: 12px; margin: 3px 4px 0 0; }
/* 时间轴 */
.tl-list { display: flex; flex-direction: column; gap: 8px; }
.tl-card { border: 1px solid var(--zb-border); border-radius: 8px; padding: 10px 12px; cursor: pointer; transition: border-color .15s; }
.tl-card:hover { border-color: #056de8; }
.tl-card .t { font-size: 14px; font-weight: 600; }
.tl-card .s { color: #8590a6; font-size: 12px; margin-top: 2px; }
.tl-card .s b { color: #056de8; font-weight: 600; }
.hub-refresh { float: right; border: 1px solid #e0e5ee; background: #fff; border-radius: 6px; padding: 3px 10px; font-size: 12px; color: #666; cursor: pointer; }
.hub-refresh:hover { border-color: #056de8; color: #056de8; }

/* ============ 个人中心 · 侧边栏与模块 ============ */
.pf-layout { display: flex; align-items: flex-start; gap: 16px; }
.pf-nav { flex: none; width: 148px; background: #fff; border-radius: 6px; padding: 8px; position: sticky; top: 16px; }
.pf-nav-item {
  display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 6px;
  font-size: 14px; color: #444; cursor: pointer; user-select: none;
}
.pf-nav-item:hover { background: #f4f6f9; }
.pf-nav-item.active { background: #eaf2fe; color: #056de8; font-weight: 600; }
.pf-nav-icon { font-size: 15px; }
.pf-main { flex: 1; min-width: 0; }
.pf-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.pf-card {
  background: #fff; border-radius: 6px; padding: 18px 20px; cursor: pointer;
  border: 1px solid transparent; transition: border-color .15s, box-shadow .15s;
}
.pf-card:hover { border-color: #056de8; box-shadow: 0 2px 10px rgba(5, 109, 232, .08); }
.pf-card-icon { font-size: 20px; }
.pf-card-title { font-size: 15px; font-weight: 600; margin-top: 6px; }
.pf-card-desc { font-size: 13px; color: #8590a6; margin-top: 4px; line-height: 1.6; }
.pf-card-more { font-size: 12px; color: #056de8; margin-top: 10px; }

/* ============ 个人中心 · 新模块（我的笔记 / 学习复盘 / 阅读足迹） ============ */
/* 数值卡片 */
.pf-stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin: 4px 0 12px; }
.pf-stat { background: #f7f9fc; border: 1px solid var(--zb-border); border-radius: 8px; padding: 12px 14px; }
.pf-stat-value { font-size: 20px; font-weight: 700; color: #056de8; line-height: 1.2; }
.pf-stat-label { font-size: 12px; color: #8590a6; margin-top: 4px; }

/* 笔记卡片 */
.pf-note { border: 1px solid var(--zb-border); border-radius: 8px; padding: 10px 12px; margin-top: 8px; transition: border-color .15s; }
.pf-note:hover { border-color: #056de8; }
.pf-note-head { display: flex; align-items: center; gap: 8px; }
.pf-note-kind { flex: none; font-size: 11px; border-radius: 10px; padding: 1px 8px; color: #056de8; background: #eaf2fe; border: 1px solid #cfe0fb; }
.pf-note-kind.guide { color: #ad6800; background: #fff7e6; border-color: #ffe1a8; }
.pf-note-title { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-note-time { flex: none; font-size: 12px; color: #8590a6; }
.pf-note-body { font-size: 13px; line-height: 1.7; color: #444; margin-top: 6px; }
.pf-note-actions { display: flex; gap: 8px; margin-top: 10px; }

/* 小按钮与小标签 */
.pf-btn { border: 1px solid #e0e5ee; background: #fff; border-radius: 6px; padding: 4px 12px; font-size: 12px; color: #444; cursor: pointer; }
.pf-btn:hover { border-color: #056de8; color: #056de8; }
.pf-btn.danger:hover { border-color: #d93025; color: #d93025; }
.pf-tag { flex: none; font-size: 11px; border-radius: 10px; padding: 1px 8px; border: 1px solid transparent; white-space: nowrap; }
.pf-tag.ok { color: #2f8f4b; background: #f0f9f2; border-color: #cfe9d6; }
.pf-tag.due { color: #d67a27; background: #fff7e6; border-color: #ffe1a8; }
.pf-link { flex: none; font-size: 12px; color: #056de8; cursor: pointer; }
.pf-link:hover { text-decoration: underline; }

/* ============ 个人中心 · §6 困惑双面镜（首屏叙事 / 我最常卡住 / 我的贡献） ============ */
/* 首屏叙事 */
.pf-hero .pf-lead { font-size: 15px; line-height: 1.8; color: #1a1a1a; margin-top: 6px; }
.pf-hero .pf-lead b { color: #056de8; font-size: 18px; }
.pf-hero .pf-source { font-size: 12px; color: #8590a6; margin-top: 6px; }
.pf-hero .pf-sub { font-size: 13px; color: #444; margin-top: 10px; padding-top: 10px; border-top: 1px dashed #e0e5ee; }
.pf-hero .pf-sub b { color: #056de8; }

/* 你最常卡住的 3 个概念 */
.pf-concepts { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-top: 8px; }
.pf-concept-card { background: #f2f7ff; border: 1px solid #d8e6ff; border-radius: 8px; padding: 14px 16px; }
.pf-concept-name { font-size: 16px; font-weight: 700; color: #056de8; }
.pf-concept-mine { font-size: 13px; color: #444; margin-top: 6px; }
.pf-concept-comm { font-size: 13px; color: #444; margin-top: 2px; }
.pf-concept-src { font-size: 11px; color: #8590a6; margin-top: 8px; }

/* 我的贡献 · 卡点地图 */
.pf-map-list { margin-top: 8px; }
.pf-map-item { border: 1px solid var(--zb-border); border-radius: 8px; padding: 10px 12px; margin-top: 8px; }
.pf-map-head { display: flex; align-items: center; gap: 8px; }
.pf-map-name { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; }
.pf-map-mine { flex: none; font-size: 12px; color: #d67a27; }
.pf-map-meta { font-size: 13px; color: #444; margin-top: 4px; }
.pf-map-src { font-size: 11px; color: #8590a6; margin-top: 4px; }

/* 我的贡献 · 时间线 */
.pf-timeline { margin-top: 10px; border-left: 2px solid #e0e5ee; padding-left: 14px; }
.pf-tl-item { position: relative; padding-bottom: 14px; }
.pf-tl-item::before { content: ''; position: absolute; left: -21px; top: 5px; width: 8px; height: 8px; border-radius: 50%; background: #056de8; }
.pf-tl-date { font-size: 12px; color: #8590a6; }
.pf-tl-line { font-size: 14px; color: #1a1a1a; margin-top: 2px; }
.pf-tl-line b { color: #056de8; }
.pf-tl-para { font-size: 12px; color: #8590a6; }
.pf-tl-sub { font-size: 12px; color: #8590a6; margin-top: 2px; }

/* ============ 个人中心 · 知乎区块（账号 / 收藏夹体检 / 分类导图） ============ */
/* 账号卡 */
.zb-zhihu-account { display: flex; align-items: center; gap: 14px; }
.zb-zhihu-avatar { width: 52px; height: 52px; border-radius: 50%; flex: none; background: #eef1f6; object-fit: cover; }
.zb-zhihu-me { flex: 1; min-width: 0; }
.zb-zhihu-name { font-size: 16px; font-weight: 600; }
.zb-zhihu-headline { font-size: 13px; line-height: 1.6; color: #8590a6; margin-top: 3px; }
.zb-zhihu-src {
  flex: none; font-size: 12px; color: #2f8f4b; background: #f0f9f2;
  border: 1px solid #cfe9d6; border-radius: 20px; padding: 3px 10px;
}

/* 收藏夹选择 */
.zb-chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.zb-chip {
  border: 1px solid #e0e5ee; background: #fff; color: #444; border-radius: 20px;
  padding: 4px 12px; font-size: 12px; cursor: pointer;
}
.zb-chip:hover { border-color: #056de8; color: #056de8; }
.zb-chip.active { background: #056de8; border-color: #056de8; color: #fff; }

/* 分类导图：纯 DOM 树，靠缩进 + 虚线连接（MV3 扩展页用不了图谱库） */
.zb-tree, .zb-tree-children { list-style: none; margin: 0; padding: 0; }
.zb-tree-children { margin-left: 16px; padding-left: 14px; border-left: 1px dashed #dbe1ea; }
.zb-tree-children > li { position: relative; padding: 4px 0; }
.zb-tree-children > li::before {
  content: ''; position: absolute; left: -14px; top: 15px; width: 10px; height: 1px; background: #dbe1ea;
}
.zb-tree-label { display: flex; align-items: center; gap: 8px; font-size: 13px; line-height: 1.7; }
.zb-tree-label.root { font-size: 15px; font-weight: 700; margin-bottom: 6px; }
.zb-tree-label.group { font-weight: 600; color: #1f2329; }
.zb-tree-count { font-size: 12px; font-weight: 400; color: #8590a6; }
.zb-tree-link { color: #1f2329; text-decoration: none; }
.zb-tree-link:hover { color: #056de8; }

/* 质量等级标签 */
.zb-lv {
  flex: none; font-size: 11px; border-radius: 10px; padding: 1px 8px;
  border: 1px solid transparent; white-space: nowrap;
}
.zb-lv.lv-high { color: #2f8f4b; background: #f0f9f2; border-color: #cfe9d6; }
.zb-lv.lv-mid { color: #ad6800; background: #fff7e6; border-color: #ffe1a8; }
.zb-lv.lv-low { color: #8590a6; background: #f4f6f9; border-color: #e3e7ee; }

/* 体检清单 */
.zb-check-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.zb-check-item { border: 1px solid var(--zb-border); border-radius: 8px; padding: 10px 12px; transition: border-color .15s; }
.zb-check-item:hover { border-color: #056de8; }
.zb-check-head { display: flex; align-items: center; gap: 8px; }
.zb-check-title {
  flex: 1; min-width: 0; font-size: 14px; font-weight: 600; color: #1f2329; text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.zb-check-title:hover { color: #056de8; }
.zb-check-note { font-size: 13px; line-height: 1.7; color: #444; margin-top: 6px; }
.zb-check-meta { font-size: 12px; color: #8590a6; margin-top: 4px; }