/* ============================================================
   《XRT 程序设计》书籍样式 · book.css
   依赖站点主样式 style.css（导航/页脚/代码块/表格复用）
   ============================================================ */

/* ============ 书籍首页 Hero ============ */

.book-hero {
  padding: calc(var(--nav-h) + 64px) 24px 20px;
  text-align: center;
  background:
    radial-gradient(ellipse 55% 40% at 50% -4%, rgba(91, 157, 255, 0.16) 0%, transparent 70%),
    radial-gradient(ellipse 40% 30% at 80% 10%, var(--glow-violet) 0%, transparent 70%);
}

.book-kicker {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 16px;
}

.book-hero h1 {
  font-size: clamp(28px, 4.2vw, 44px);
  font-weight: 800;
  letter-spacing: -1px;
  line-height: 1.2;
  margin-bottom: 16px;
}

.book-hero .book-sub {
  color: var(--soft);
  font-size: 16.5px;
  line-height: 1.8;
  max-width: 720px;
  margin: 0 auto 22px;
}

.book-hero-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.book-pill {
  font-family: var(--font-mono);
  font-size: 12.5px;
  padding: 5px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(11, 18, 32, 0.7);
  color: var(--soft);
}

/* ============ 阅读路径卡 ============ */

.book-path {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 20px 0 12px;
}

.book-path-item {
  background: rgba(9, 14, 26, 0.72);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
  transition: border-color 0.2s;
}

.book-path-item:hover {
  border-color: rgba(91, 157, 255, 0.5);
}

.book-path-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--cyan);
  margin-bottom: 8px;
}

.book-path-item p {
  color: var(--soft);
  font-size: 13.5px;
  line-height: 1.7;
  margin: 0;
}

/* ============ 目录 ============ */

.book-legend {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 22px;
}

.badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: 999px;
  border: 1px solid;
  white-space: nowrap;
}

.badge-done { color: var(--green); border-color: rgba(61, 220, 151, 0.4); background: rgba(61, 220, 151, 0.07); }
.badge-wip { color: var(--amber); border-color: rgba(251, 194, 77, 0.4); background: rgba(251, 194, 77, 0.07); }
.badge-plan { color: var(--muted); border-color: var(--line); background: rgba(148, 163, 198, 0.05); }

.book-toc {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.book-vol {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: rgba(9, 14, 26, 0.6);
  overflow: hidden;
}

.book-vol-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 22px;
  border-bottom: 1px solid var(--line-soft);
  background: rgba(11, 18, 32, 0.45);
}

.book-vol-head h3 {
  font-size: 16.5px;
  font-weight: 700;
}

.book-vol-head h3 .vol-sub {
  margin-left: 10px;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--muted);
}

.book-vol-range {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--muted);
  white-space: nowrap;
}

.book-ch-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px 14px;
  padding: 10px 12px;
}

.book-ch a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-radius: 10px;
  transition: background 0.15s;
}

.book-ch a:hover {
  background: rgba(91, 157, 255, 0.07);
}

.book-ch.done a:hover {
  background: rgba(91, 157, 255, 0.1);
}

.book-ch.plain {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  opacity: 0.72;
}

.book-ch .ch-no {
  flex: none;
  width: 34px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  background: var(--bg0);
}

.book-ch.done .ch-no {
  color: var(--cyan);
  border-color: rgba(38, 211, 240, 0.35);
}

.book-ch .ch-title {
  flex: 1;
  font-size: 14px;
  color: var(--soft);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.book-ch.done .ch-title {
  color: var(--text);
}

/* ============ 章节页布局 ============ */

.ch-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 14px;
}

.ch-meta .ch-progress {
  color: var(--cyan);
}

.ch-meta .ch-vol {
  padding: 2px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
}

.page-header .ch-lead {
  color: var(--soft);
  font-size: 16px;
  max-width: 720px;
  margin-top: 10px;
}

.book-layout {
  max-width: 1180px;
  margin: 0 auto;
  padding: 36px 24px 72px;
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 44px;
  align-items: start;
}

.book-side {
  position: sticky;
  top: calc(var(--nav-h) + 24px);
  max-height: calc(100vh - var(--nav-h) - 48px);
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: rgba(9, 14, 26, 0.7);
  padding: 18px 8px;
}

.book-side h4 {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted);
  padding: 10px 14px 6px;
}

.book-side ul {
  list-style: none;
}

.book-side li a {
  display: block;
  padding: 5px 14px;
  font-size: 13px;
  color: var(--soft);
  border-left: 2px solid transparent;
  border-radius: 0 8px 8px 0;
  transition: color 0.15s, border-color 0.15s;
}

.book-side li a:hover {
  color: var(--cyan);
}

.book-side li a.active {
  color: var(--cyan);
  border-left-color: var(--cyan);
  background: rgba(38, 211, 240, 0.06);
}

.book-main {
  min-width: 0;
}

/* ============ 章节小节 ============ */

.book-sec {
  margin-bottom: 44px;
  scroll-margin-top: calc(var(--nav-h) + 20px);
}

.book-sec > h3 {
  font-size: 21px;
  font-weight: 720;
  letter-spacing: -0.3px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line-soft);
}

.book-sec > h3 .sec-no {
  color: var(--cyan);
  font-family: var(--font-mono);
  margin-right: 10px;
  font-size: 0.85em;
}

.book-sec > h4 {
  font-size: 16px;
  font-weight: 650;
  margin: 22px 0 8px;
}

.book-sec p {
  color: var(--soft);
  font-size: 15px;
  margin: 0 0 12px;
}

.book-sec p code,
.book-sec li code,
.book-path-item code {
  background: var(--bg0);
  border: 1px solid var(--line-soft);
  padding: 1px 7px;
  border-radius: 6px;
  font-size: 0.88em;
  color: #9ecbff;
}

.book-sec ul,
.book-sec ol {
  color: var(--soft);
  font-size: 15px;
  padding-left: 26px;
  margin: 0 0 14px;
}

.book-sec li {
  margin-bottom: 6px;
}

.book-sec li::marker {
  color: var(--blue);
}

.book-sec strong {
  color: var(--text);
  font-weight: 650;
}

.book-sec .code-block {
  margin: 16px 0 20px;
}

/* ============ 提示框体系 ============ */

.book-note,
.book-goal,
.book-deep-box,
.book-pit,
.book-quiz,
.book-ex {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(11, 18, 32, 0.55);
  padding: 16px 18px;
  margin: 16px 0;
}

.box-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.book-goal { border-color: rgba(91, 157, 255, 0.35); background: rgba(91, 157, 255, 0.05); }
.book-goal .box-tag { color: var(--blue); }

.book-note { border-color: rgba(38, 211, 240, 0.3); background: rgba(38, 211, 240, 0.04); }
.book-note .box-tag { color: var(--cyan); }

.book-deep-box { border-color: rgba(147, 134, 248, 0.3); background: rgba(147, 134, 248, 0.045); }
.book-deep-box .box-tag { color: var(--violet); }

.book-pit { border-color: rgba(248, 113, 113, 0.32); background: rgba(248, 113, 113, 0.04); }
.book-pit .box-tag { color: var(--red); }

.book-quiz { border-color: rgba(251, 194, 77, 0.3); background: rgba(251, 194, 77, 0.04); }
.book-quiz .box-tag { color: var(--amber); }

.book-ex { border-color: rgba(61, 220, 151, 0.3); background: rgba(61, 220, 151, 0.04); }
.book-ex .box-tag { color: var(--green); }

.book-goal p,
.book-note p,
.book-deep-box p,
.book-pit p,
.book-quiz li,
.book-ex p {
  color: var(--soft);
  font-size: 14px;
  margin: 0 0 8px;
}

.book-goal p:last-child,
.book-note p:last-child,
.book-deep-box p:last-child,
.book-pit p:last-child,
.book-ex p:last-child {
  margin-bottom: 0;
}

.book-quiz ol {
  padding-left: 24px;
}

.book-quiz li {
  margin-bottom: 10px;
}

.book-pit .pit-cause {
  font-size: 13.5px;
}

/* ============ 终端输出块 ============ */

.term-block {
  background: #060a14;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  padding: 13px 16px;
  margin: 14px 0;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.8;
  color: var(--soft);
  overflow-x: auto;
  white-space: pre;
}

.term-block .t-prompt { color: var(--green); user-select: none; }
.term-block .t-cmd { color: var(--text); }
.term-block .t-out { color: var(--soft); }
.term-block .t-ok { color: var(--green); }
.term-block .t-err { color: var(--red); }
.term-block .t-cm { color: #5a6b8c; }

/* ============ 小结表 ============ */

table.book-sum {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}

table.book-sum th,
table.book-sum td {
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
}

table.book-sum th {
  color: var(--muted);
  font-weight: 600;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 1px;
  background: rgba(11, 18, 32, 0.5);
}

table.book-sum td:first-child {
  color: var(--text);
  font-weight: 600;
  white-space: nowrap;
}

table.book-sum td {
  color: var(--soft);
}

table.book-sum td code {
  background: var(--bg0);
  border: 1px solid var(--line-soft);
  padding: 1px 6px;
  border-radius: 5px;
  font-size: 12px;
  color: #9ecbff;
}

/* ============ API 签名块 ============ */

.api-sig {
  background: #060a14;
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--blue);
  border-radius: 8px;
  padding: 12px 16px;
  margin: 12px 0 16px;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.7;
  color: #c9d6ee;
  overflow-x: auto;
  white-space: pre;
}

.api-sig .sig-ret { color: #ffd479; }
.api-sig .sig-name { color: #6fe0f5; font-weight: 600; }

/* ============ 章末导航 ============ */

.ch-prevnext {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 52px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}

.ch-prevnext a {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(9, 14, 26, 0.7);
  transition: border-color 0.2s, transform 0.2s;
}

.ch-prevnext a:hover {
  border-color: rgba(91, 157, 255, 0.5);
  transform: translateY(-2px);
}

.ch-prevnext .pn-dir {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

.ch-prevnext .pn-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.ch-prevnext a.next {
  text-align: right;
  align-items: flex-end;
}

.ch-prevnext a.pn-none {
  pointer-events: none;
  opacity: 0.35;
}

/* ============ 响应式 ============ */

@media (max-width: 1024px) {
  .book-layout {
    grid-template-columns: 1fr;
    gap: 24px;
    padding-top: 24px;
  }

  .book-side {
    position: static;
    max-height: none;
  }

  .book-path {
    grid-template-columns: 1fr;
  }

  .book-ch-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .ch-prevnext {
    grid-template-columns: 1fr;
  }

  .ch-prevnext a.next {
    text-align: left;
    align-items: flex-start;
  }
}

/* ============================================================
   API 参考手册层样式（Appendix / API Reference Layer）
   ============================================================ */

/* ---------- API 参考页 Hero ---------- */

.api-ref-hero {
  padding: calc(var(--nav-h) + 48px) 24px 16px;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(ellipse 50% 30% at 50% 0%, var(--glow-violet) 0%, transparent 70%);
}

.api-ref-hero .api-source {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--cyan);
  margin-bottom: 8px;
}

.api-ref-hero .api-source::before {
  content: "◆";
  font-size: 8px;
}

.api-ref-hero h1 {
  font-size: clamp(24px, 3.5vw, 36px);
  font-weight: 780;
  letter-spacing: -0.5px;
  margin-bottom: 8px;
}

.api-ref-hero .api-count-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 14px;
  border-radius: 999px;
  border: 1px solid rgba(61, 220, 151, 0.35);
  background: rgba(61, 220, 151, 0.06);
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--green);
}

.api-ref-hero .api-desc {
  color: var(--soft);
  font-size: 15px;
  max-width: 680px;
  margin-top: 10px;
}

/* ---------- API 条目 ---------- */

.api-ref-item {
  margin-bottom: 40px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--line-soft);
  scroll-margin-top: calc(var(--nav-h) + 16px);
}

.api-ref-item:last-child {
  border-bottom: none;
}

.api-ref-item > h3 {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 700;
  color: var(--cyan);
  margin-bottom: 10px;
  letter-spacing: -0.3px;
}

.api-ref-item > h3 .api-kind {
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  margin-left: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* 完整签名块 */

.api-ref-sig {
  background: #060a14;
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--blue);
  border-radius: 10px;
  padding: 14px 18px;
  margin: 12px 0 16px;
  font-family: var(--font-mono);
  font-size: 13.5px;
  line-height: 1.75;
  color: #c9d6ee;
  overflow-x: auto;
  white-space: pre;
}

.api-ref-sig .sig-type { color: #ffd479; }
.api-ref-sig .sig-fn { color: #6fe0f5; font-weight: 600; }
.api-ref-sig .sig-param { color: #9ecbff; }
.api-ref-sig .sig-comment { color: #5a6b8c; font-style: italic; }

/* 参数表 */

.api-ref-params {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  margin: 14px 0;
}

.api-ref-params th,
.api-ref-params td {
  padding: 8px 14px;
  text-align: left;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
}

.api-ref-params th {
  color: var(--muted);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  background: rgba(11, 18, 32, 0.4);
  width: 140px;
}

.api-ref-params td {
  color: var(--soft);
}

.api-ref-params td:first-child {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: #9ecbff;
  white-space: nowrap;
}

.api-ref-params td .param-required {
  color: var(--red);
  font-size: 10px;
  margin-left: 4px;
}

.api-ref-params td .param-optional {
  color: var(--muted);
  font-size: 10px;
  margin-left: 4px;
}

/* 返回值/错误 */

.api-ref-returns {
  border-left: 3px solid var(--green);
  background: rgba(61, 220, 151, 0.04);
  border-radius: 0 8px 8px 0;
  padding: 10px 16px;
  font-size: 13.5px;
  color: var(--soft);
  margin: 14px 0;
}

.api-ref-returns .ret-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--green);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-right: 8px;
}

.api-ref-errors {
  border-left: 3px solid var(--red);
  background: rgba(248, 113, 113, 0.04);
  border-radius: 0 8px 8px 0;
  padding: 10px 16px;
  font-size: 13.5px;
  color: var(--soft);
  margin: 14px 0;
}

.api-ref-errors .err-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--red);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-right: 8px;
}

/* 示例代码 */

.api-ref-example {
  margin: 16px 0;
}

.api-ref-example .code-block {
  margin: 0;
}

/* 交叉引用 */

.api-ref-seealso {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px dashed var(--line-soft);
}

.api-ref-seealso .see-label {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-right: 6px;
  align-self: center;
}

.api-ref-seealso a {
  display: inline-flex;
  padding: 3px 12px;
  border-radius: 999px;
  border: 1px solid rgba(91, 157, 255, 0.3);
  background: rgba(91, 157, 255, 0.05);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--blue);
  transition: border-color 0.2s, color 0.2s;
}

.api-ref-seealso a:hover {
  border-color: var(--cyan);
  color: var(--cyan);
}

/* ---------- API 索引（目录页 + 参考页顶部） ---------- */

.api-index-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
  margin: 20px 0;
}

.api-index-card {
  background: rgba(9, 14, 26, 0.72);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
  transition: border-color 0.2s, transform 0.2s;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.api-index-card:hover {
  border-color: rgba(91, 157, 255, 0.5);
  transform: translateY(-2px);
}

.api-index-card .api-index-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.api-index-card h4 {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}

.api-index-card .api-index-count {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--green);
  font-weight: 600;
}

.api-index-card .api-index-file {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
}

.api-index-card .api-index-desc {
  font-size: 13px;
  color: var(--soft);
  line-height: 1.6;
}

/* ---------- 目录页双层结构 ---------- */

.toc-mode-switch {
  display: flex;
  gap: 6px;
  margin: 20px 0 24px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 4px;
  background: rgba(9, 14, 26, 0.7);
  width: fit-content;
}

.toc-mode-btn {
  padding: 8px 22px;
  border-radius: 8px;
  border: none;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  background: transparent;
  color: var(--soft);
}

.toc-mode-btn.active {
  background: linear-gradient(120deg, #35c3e6, #5b9dff);
  color: #06121f;
}

.toc-mode-btn:hover:not(.active) {
  color: var(--text);
  background: rgba(148, 178, 255, 0.08);
}

.toc-section {
  display: none;
}

.toc-section.active {
  display: block;
}

/* ---------- API 参考页侧边栏 ---------- */

.book-side.api-side {
  max-height: calc(100vh - var(--nav-h) - 48px);
}

.api-side .api-side-search {
  margin: 8px 10px 12px;
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg0);
  color: var(--text);
  font-size: 13px;
  width: calc(100% - 20px);
  outline: none;
}

.api-side .api-side-search:focus {
  border-color: rgba(38, 211, 240, 0.5);
}

.api-side .api-side-search::placeholder {
  color: var(--muted);
}

.api-side .api-side-count {
  margin: -6px 10px 8px;
  font-size: 12px;
  color: var(--muted);
}

.api-side .api-fn-list {
  list-style: none;
  max-height: 400px;
  overflow-y: auto;
}

.api-side .api-fn-list li[hidden] {
  display: none;
}

/* ---------- API 参考富化层：返回值 / 示例 ---------- */

.api-ref-returns {
  margin: 12px 0 0;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--text);
}

.api-ref-returns b {
  color: var(--cyan);
  font-weight: 600;
  margin-right: 2px;
}

.api-ref-example {
  margin: 16px 0 0;
  padding: 14px 16px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg0);
}

.api-ref-example h4 {
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin: 0 0 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.api-ref-example .ok-tag {
  font-size: 11px;
  padding: 1px 8px;
  border-radius: 99px;
  color: #4ade80;
  background: rgba(74, 222, 128, 0.1);
  border: 1px solid rgba(74, 222, 128, 0.25);
}

.api-ref-example pre.code {
  margin: 0;
  padding: 12px 14px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.65;
  color: #d6e2f0;
  overflow-x: auto;
  white-space: pre;
}

.api-ref-output {
  margin-top: 10px;
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.api-ref-output span {
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--muted);
  flex-shrink: 0;
}

.api-ref-output code {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: #7ee0a3;
  white-space: pre-wrap;
  word-break: break-all;
}

.api-side .api-fn-list a {
  display: block;
  padding: 3px 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--soft);
  border-left: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.api-side .api-fn-list a:hover,
.api-side .api-fn-list a.active {
  color: var(--cyan);
  border-left-color: var(--cyan);
}

/* ---------- 模块覆盖进度条 ---------- */

.api-coverage-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 
 0;
  }

.api-coverage-bar .bar-track {
    flex: 1;
    height: 6px;
    border-radius: 3px;
    background: var(--line-soft);
    overflow: hidden;
  }

.api-coverage-bar .bar-fill {
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--cyan), var(--green));
    transition: width 0.6s ease;
  }

.api-coverage-bar .bar-label {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--green);
    white-space: nowrap;
  }

/* ---------- 响应式补充 ---------- */

@media (max-width: 768px) {
  .api-ref-sig {
    font-size: 12px;
    padding: 10px 12px;
  }

  .api-ref-params th {
    width: 100px;
  }

  .api-index-grid {
    grid-template-columns: 1fr;
  }

  .toc-mode-switch {
    width: 100%;
    justify-content: center;
  }
}

/* ---- gen_web_api 追加 ---- */

.api-ref-hero .api-count-badge { color: var(--green); }

.api-ref-item > h3 .api-kind { color: var(--muted); }
.api-ref-item.api-kind-type > h3 .api-kind { color: var(--violet, #a78bfa); }
.api-ref-item.api-kind-const > h3 .api-kind { color: var(--yellow, #ffd479); }

.api-ref-item .api-desc { color: var(--soft); font-size: 14px; margin: 0 0 4px; }

.api-ref-group {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--cyan);
  margin: 36px 0 -12px;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--line-soft);
}

.api-ref-item .api-sub h4,
.api-ref-contract .contract-cell h4 {
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 14px 0 4px;
}

.api-ref-returns table,
.api-ref-errors table { margin: 8px 0 0; }

.api-ref-errors ul { margin: 6px 0 0; padding-left: 18px; }
.api-ref-errors li { margin: 3px 0; }
.api-ref-errors li code,
.api-ref-returns td code { color: var(--red); font-size: 12px; }
.api-ref-returns td:first-child code { color: var(--green); font-size: 12px; }

.api-ref-example .example-src { color: var(--muted); font-size: 12.5px; margin: 2px 0 8px; }
.api-ref-example .example-src a { color: var(--blue); }
.api-ref-example pre.code {
  background: #060a14;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  padding: 12px 16px;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.7;
  color: #c9d6ee;
}

.api-ref-contract {
  background: rgba(9, 14, 26, 0.72);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin: 0 0 36px;
}
.api-ref-contract > h3 {
  font-size: 15px;
  margin-bottom: 8px;
}
.api-ref-contract .contract-doc {
  font-size: 12px;
  font-weight: 400;
  color: var(--muted);
  margin-left: 10px;
}
.api-ref-contract .contract-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 4px 24px;
}
.api-ref-contract .contract-cell p { color: var(--soft); font-size: 13px; margin: 4px 0; }
.api-ref-contract .contract-cell ul { margin: 4px 0; padding-left: 16px; color: var(--soft); font-size: 13px; }
.api-ref-contract .contract-trim {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--line-soft);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  font-size: 12.5px;
  color: var(--muted);
}
.api-ref-contract .contract-trim code { color: var(--cyan); font-size: 12px; }

.api-side .api-fn-list .api-side-group {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted);
  margin: 12px 0 2px;
  padding: 0;
  list-style: none;
}

.api-ref-constindex td:first-child { white-space: nowrap; }

/* ---- gen_web_book 追加 ---- */

.book-sec .diagram {
  background: rgba(9, 14, 26, 0.72);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 18px;
  margin: 14px 0;
  overflow-x: auto;
}
.diagram.dg-state .dg-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 0;
  white-space: nowrap;
}
.diagram .dg-node {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: #6fe0f5;
  border: 1px solid rgba(111, 224, 245, 0.35);
  background: rgba(111, 224, 245, 0.06);
  border-radius: 999px;
  padding: 2px 12px;
}
.diagram .dg-arrow {
  font-size: 12px;
  color: var(--muted);
}
.diagram.dg-flow .dg-step {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 5px 0;
}
.diagram .dg-no {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--blue);
  border: 1px solid rgba(91, 157, 255, 0.4);
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.diagram .dg-name {
  font-weight: 600;
  font-size: 13.5px;
  color: var(--text);
  white-space: nowrap;
}
.diagram .dg-desc {
  color: var(--soft);
  font-size: 13px;
}

.book-pit .pit-body { margin-top: 6px; }
.book-pit .pit-body p { color: var(--soft); font-size: 14px; margin: 8px 0; }

.code-pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 12px;
  margin: 12px 0;
}
.code-pair .cp-bad, .code-pair .cp-good {
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--line-soft);
}
.code-pair .cp-tag {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 4px 12px;
}
.code-pair .cp-bad .cp-tag { background: rgba(248, 113, 113, 0.12); color: var(--red); }
.code-pair .cp-good .cp-tag { background: rgba(61, 220, 151, 0.12); color: var(--green); }
.code-pair pre {
  margin: 0;
  padding: 12px 14px;
  background: #060a14;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.7;
  color: #c9d6ee;
  overflow-x: auto;
}

.term-block .t-cmd {
  display: block;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: #6fe0f5;
}

.code-block .code-src {
  margin-left: auto;
  margin-right: 8px;
  font-size: 12px;
  color: var(--blue);
  text-decoration: none;
}
.code-block .code-src:hover { color: var(--cyan); }

.book-sec h4 {
  font-size: 15px;
  color: var(--text);
  margin: 18px 0 8px;
}

/* ---- gen_web_api 散文档 ---- */

.api-ref-doc { margin: 0 0 30px; }
.api-ref-doc > h3 {
  font-size: 17px;
  color: var(--text);
  margin: 26px 0 4px;
}
.api-ref-doc > h3::after {
  content: "";
  display: block;
  width: 34px;
  height: 2px;
  background: var(--green);
  margin-top: 8px;
}
.api-ref-doc p { color: var(--soft); font-size: 14px; line-height: 1.75; margin: 10px 0; }
.api-ref-doc ul { color: var(--soft); font-size: 14px; line-height: 1.75; margin: 8px 0; padding-left: 18px; }
.api-ref-doc li { margin: 4px 0; }
.api-ref-doc table { margin: 12px 0; }