/* =============================================================================
   《点字成图》· 图像生成自媒体实战手册  —  电子书组件层
   依赖 brand-tokens.css（松墨纸 / Pinemark 设计令牌，单一事实源）
   本文件只新增"电子书阅读体验"所需的版式与组件，不改写任何品牌 HEX。
   ============================================================================= */

/* ---------- 阅读容器 ---------- */
.page-bg { background: var(--bg); }

.book-shell {
  max-width: 880px;
  margin-inline: auto;
  padding-inline: var(--sp-5);
}
.reading { max-width: 820px; margin-inline: auto; }
.reading > * { margin-top: 0; }

/* 段落与正文在阅读流中的节奏 */
.reading p { font-size: 1.04rem; line-height: 1.9; }
.reading p.lead { font-size: 1.2rem; color: var(--text); line-height: 1.8; }
.reading h2 { scroll-margin-top: 90px; }
.reading h3 { scroll-margin-top: 90px; }
.reading h2::after {
  content: ""; display: block; width: 54px; height: 2px;
  background: var(--accent); margin-top: var(--sp-3); border-radius: 2px;
}
.reading ul:not([class]) { padding-left: 1.1em; margin: var(--sp-4) 0; }
.reading ul:not([class]) li { margin-bottom: var(--sp-2); color: var(--text-soft); line-height: 1.8; }
.reading ol:not([class]) { padding-left: 1.3em; margin: var(--sp-4) 0; }
.reading ol:not([class]) li { margin-bottom: var(--sp-2); color: var(--text-soft); line-height: 1.8; }

/* =============================================================================
   顶部书脊导航条
   ============================================================================= */
.book-nav {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--line);
}
.book-nav__inner {
  max-width: 880px; margin-inline: auto;
  padding: 12px var(--sp-5);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
}
.bmark { display: flex; align-items: center; gap: 11px; text-decoration: none; }
.bmark__logo {
  width: 34px; height: 34px; border-radius: 9px; flex: none;
  background: linear-gradient(155deg, var(--c-pine-deep-a), var(--c-pine-deep-b));
  display: grid; place-items: center;
  font-family: var(--font-display); font-style: italic; font-weight: 900;
  color: var(--c-copper-lite); font-size: 1.05rem; line-height: 1;
  box-shadow: var(--shadow-sm);
}
.bmark__txt b { font-family: var(--font-serif); font-weight: 700; font-size: .95rem; color: var(--text); display: block; line-height: 1.15; }
.bmark__txt span { font-family: var(--font-mono); font-size: .56rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.book-nav__toc {
  font-family: var(--font-mono); font-size: .68rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--accent);
  text-decoration: none; display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--line); border-radius: var(--r-pill); padding: 8px 16px;
  background: var(--card); transition: background .15s ease, transform .12s ease;
}
.book-nav__toc:hover { background: var(--accent-soft); transform: translateY(-1px); text-decoration: none; }

/* 顶部细进度条 */
.book-progress { height: 3px; background: transparent; }
.book-progress > i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--gold)); }

/* =============================================================================
   章首 HERO
   ============================================================================= */
.chap-hero { padding: var(--sp-8) 0 var(--sp-6); border-bottom: 1px solid var(--line); margin-bottom: var(--sp-7); position: relative; overflow: hidden; }
.chap-hero__part {
  font-family: var(--font-mono); font-size: .72rem; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase; color: var(--muted);
  display: inline-flex; align-items: center; gap: 12px; margin-bottom: var(--sp-4);
}
.chap-hero__part::before { content: ""; width: 32px; height: 1.5px; background: var(--muted); }
.chap-hero__row { display: flex; align-items: flex-start; gap: var(--sp-5); }
.chap-hero__num {
  font-family: var(--font-display); font-style: italic; font-weight: 900;
  font-size: clamp(3.6rem, 11vw, 6.4rem); line-height: .8; color: var(--accent);
  flex: none; letter-spacing: -.02em;
}
.chap-hero__kicker {
  font-family: var(--font-mono); font-size: .74rem; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: var(--accent);
  display: inline-flex; align-items: center; gap: 12px; margin-bottom: var(--sp-3);
}
.chap-hero__kicker::before { content: ""; width: 36px; height: 1.5px; background: var(--accent); }
.chap-hero h1 { font-size: clamp(1.9rem, 5vw, 2.9rem); margin-bottom: var(--sp-4); }
.chap-hero h1 .pine { color: var(--brand); }
.chap-hero h1 em { font-family: var(--font-display); font-style: italic; font-weight: 900; color: var(--accent); }
.chap-hero__lead { font-size: 1.18rem; color: var(--text-soft); line-height: 1.78; max-width: 660px; }
.chap-hero__wm {
  position: absolute; right: -20px; top: -10px; z-index: -1;
  font-family: var(--font-display); font-style: italic; font-weight: 900;
  font-size: 240px; line-height: .8; color: var(--accent); opacity: .05;
  pointer-events: none; user-select: none;
}

/* 本章导读小卡 */
.chap-toc {
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: var(--sp-5) var(--sp-6); margin: var(--sp-6) 0;
}
.chap-toc__title { font-family: var(--font-mono); font-size: .68rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--brand); margin-bottom: var(--sp-3); }
.chap-toc ol { list-style: none; padding: 0; margin: 0; counter-reset: ctoc; }
.chap-toc li { counter-increment: ctoc; position: relative; padding-left: 30px; margin-bottom: var(--sp-2); }
.chap-toc li::before { content: counter(ctoc, decimal-leading-zero); position: absolute; left: 0; top: 0; font-family: var(--font-mono); font-size: .72rem; font-weight: 700; color: var(--accent); }
.chap-toc a { color: var(--text-soft); text-decoration: none; }
.chap-toc a:hover { color: var(--brand); text-decoration: underline; }

/* =============================================================================
   图 / 图注  ·  SVG 图示容器
   ============================================================================= */
.fig { margin: var(--sp-6) 0; }
.fig__frame {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--shadow); padding: var(--sp-6); overflow: hidden;
}
.fig__frame--soft { background: var(--bg-soft); }
.fig__frame--pine { background: var(--brand-soft); border-color: transparent; }
.fig__frame svg { width: 100%; height: auto; display: block; }
.fig__cap {
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); margin-top: var(--sp-3); display: flex; align-items: flex-start; gap: 10px;
}
.fig__cap::before { content: "图"; flex: none; color: var(--accent); font-weight: 700;
  background: var(--accent-soft); border-radius: 5px; padding: 1px 7px; font-family: var(--font-serif); letter-spacing: 0; }
.fig__cap b { color: var(--text-soft); font-weight: 500; }

/* SVG 通用文本/线条配色助手（在 inline SVG 中用 class） */
.svg-ink { fill: #211E18; }
.svg-soft { fill: #4A463D; }
.svg-mut { fill: #8C8478; }
.svg-pine { fill: #1C5D53; }
.svg-copper { fill: #BD6B3A; }
.svg-cream { fill: #F3EEE2; }
.svg-line { stroke: #E4DCCC; }
.svg-stroke-pine { stroke: #1C5D53; }
.svg-stroke-copper { stroke: #BD6B3A; }
.svg-mono { font-family: "JetBrains Mono", monospace; }
.svg-serif { font-family: "Noto Serif SC", serif; }
.svg-sans { font-family: "Noto Sans SC", sans-serif; }

/* =============================================================================
   提示词卡  ·  PROMPT CARD（全书最高频组件）
   ============================================================================= */
.prompt {
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--card); box-shadow: var(--shadow-sm); margin: var(--sp-5) 0; overflow: hidden;
}
.prompt__bar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: 12px 18px; background: var(--bg-soft); border-bottom: 1px solid var(--line);
}
.prompt__label {
  font-family: var(--font-mono); font-size: .66rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--accent);
  display: inline-flex; align-items: center; gap: 9px;
}
.prompt__label::before { content: "❝"; color: var(--accent); font-size: 1rem; }
.prompt__meta { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.prompt__body {
  padding: 18px 20px; font-family: var(--font-sans); font-size: .95rem; line-height: 1.85; color: var(--text);
  white-space: pre-wrap;
}
.prompt__body .ph { color: var(--accent); font-weight: 700; font-style: normal; }    /* 占位/可替换 */
.prompt__body .k  { color: var(--brand); font-weight: 600; }                          /* 关键词强调 */
.prompt__body em  { font-family: var(--font-serif); font-style: italic; color: var(--accent); }
.prompt__foot { display: flex; flex-wrap: wrap; gap: 7px; padding: 0 20px 16px; }

/* 双语提示词：中文/英文并排 */
.prompt--en .prompt__body { font-family: var(--font-mono); font-size: .82rem; letter-spacing: .01em; line-height: 1.8; color: var(--text-soft); }

/* 配方卡：带字段标签的结构化 spec */
.recipe { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card); box-shadow: var(--shadow); margin: var(--sp-5) 0; }
.recipe__head { padding: 14px 20px; border-bottom: 1px solid var(--line); display: flex; align-items: baseline; gap: 12px; background: var(--brand-soft); border-radius: var(--r-md) var(--r-md) 0 0; }
.recipe__head .tag { font-family: var(--font-mono); font-size: .62rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--brand); }
.recipe__head h4 { font-family: var(--font-serif); font-weight: 700; font-size: 1.08rem; color: var(--text); margin: 0; }
.recipe__grid { padding: 8px 20px 16px; }
.recipe__row { display: grid; grid-template-columns: 132px 1fr; gap: 14px; padding: 9px 0; border-bottom: 1px dashed var(--line); }
.recipe__row:last-child { border-bottom: 0; }
.recipe__k { font-family: var(--font-mono); font-size: .68rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); padding-top: 2px; }
.recipe__v { font-size: .94rem; color: var(--text-soft); line-height: 1.7; }
.recipe__v b { color: var(--text); font-weight: 700; }

/* =============================================================================
   终端 / 命令块  ·  CMD（深底 · 奶白文字 · 铜金 prompt，遵守对比铁律）
   ============================================================================= */
.cmd {
  background: var(--c-dark); border-radius: var(--r-md); margin: var(--sp-5) 0;
  box-shadow: var(--shadow); overflow: hidden; border: 1px solid #2c281f;
}
.cmd__bar { display: flex; align-items: center; gap: 8px; padding: 11px 16px; border-bottom: 1px solid rgba(243,238,226,.08); }
.cmd__dot { width: 11px; height: 11px; border-radius: 50%; }
.cmd__dot:nth-child(1){ background:#BD6B3A; } .cmd__dot:nth-child(2){ background:#A8843C; } .cmd__dot:nth-child(3){ background:#1C5D53; }
.cmd__title { margin-left: 8px; font-family: var(--font-mono); font-size: .6rem; letter-spacing: .18em; text-transform: uppercase; color: #8c8478; }
.cmd__body { padding: 16px 18px; font-family: var(--font-mono); font-size: .82rem; line-height: 1.85; color: var(--c-cream); overflow-x: auto; }
.cmd__body .pr { color: var(--c-copper-lite); font-weight: 700; user-select: none; }  /* $ 提示符 */
.cmd__body .fl { color: var(--c-copper-lite); }                                        /* 参数 flag */
.cmd__body .cm { color: #8c8478; }                                                     /* 注释 */
.cmd__body .st { color: #b8d4cb; }                                                     /* 字符串/值 */
.cmd__body .ok { color: #9fd0a8; }                                                     /* 成功输出 */

/* =============================================================================
   步骤流  ·  STEPS（编号工作流）
   ============================================================================= */
.steps { list-style: none; padding: 0; margin: var(--sp-5) 0; counter-reset: step; }
.steps > li {
  counter-increment: step; position: relative; padding-left: 58px; padding-bottom: var(--sp-5);
  border-left: 2px solid var(--line); margin-left: 18px;
}
.steps > li:last-child { border-left-color: transparent; padding-bottom: 0; }
.steps > li::before {
  content: counter(step, decimal-leading-zero); position: absolute; left: -19px; top: -4px;
  width: 36px; height: 36px; border-radius: 10px; background: var(--card); border: 1px solid var(--line);
  display: grid; place-items: center; font-family: var(--font-display); font-style: italic; font-weight: 900;
  font-size: 1rem; color: var(--accent); box-shadow: var(--shadow-sm);
}
.steps > li h4 { margin: 0 0 6px; font-family: var(--font-serif); font-size: 1.1rem; }
.steps > li p { margin: 0; color: var(--text-soft); }
.steps > li .sub { font-size: .95rem; }

/* =============================================================================
   红线 / 警示块  ·  REDLINE（沿用铜软底，强调"不可越界"）
   ============================================================================= */
.redline {
  background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  border-left: 4px solid var(--accent); border-radius: var(--r-sm);
  padding: var(--sp-4) var(--sp-5); margin: var(--sp-5) 0;
}
.redline__title { font-family: var(--font-mono); font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; display: flex; align-items: center; gap: 8px; }
.redline__title::before { content: "⚠"; font-size: .95rem; }
.redline p { margin: 0; color: var(--text-soft); }
.redline p + p { margin-top: 8px; }

/* 关键判断（松绿软底） */
.keypoint { background: var(--brand-soft); border-left: 4px solid var(--brand); border-radius: var(--r-sm); padding: var(--sp-4) var(--sp-5); margin: var(--sp-5) 0; }
.keypoint__title { font-family: var(--font-mono); font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--brand); margin-bottom: 6px; display: flex; align-items: center; gap: 8px; }
.keypoint__title::before { content: "✦"; }
.keypoint p { margin: 0; color: var(--text-soft); }

/* 小贴士 */
.note { font-family: var(--font-sans); font-size: .9rem; color: var(--muted); border-left: 2px solid var(--line); padding-left: var(--sp-4); margin: var(--sp-4) 0; }
.note b { color: var(--text-soft); }

/* =============================================================================
   对照 / 二栏比较  ·  COMPARE
   ============================================================================= */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); margin: var(--sp-5) 0; }
.compare__col { border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-5); background: var(--card); }
.compare__col h4 { margin: 0 0 var(--sp-3); font-family: var(--font-mono); font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.compare__col--a { background: var(--brand-soft); border-color: transparent; }
.compare__col--a h4 { color: var(--brand); }
.compare__col--b { background: var(--accent-soft); border-color: transparent; }
.compare__col--b h4 { color: var(--accent); }
.compare__col p:last-child { margin-bottom: 0; }
@media (max-width: 640px) { .compare { grid-template-columns: 1fr; } }

/* =============================================================================
   规格 / 参数表  ·  SPEC TABLE
   ============================================================================= */
.spec { width: 100%; border-collapse: collapse; margin: var(--sp-5) 0; font-size: .92rem; }
.spec th, .spec td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.spec thead th { font-family: var(--font-mono); font-size: .64rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); background: var(--bg-soft); }
.spec tbody tr:hover { background: var(--bg-soft); }
.spec td b { color: var(--text); }
.spec code { font-size: .82em; }
.spec .num { font-family: var(--font-mono); color: var(--accent); white-space: nowrap; }

/* =============================================================================
   版式占位框  ·  MOCKUP（用于演示平台版式：手机 9:16 / 卡片 3:4 / 横幅）
   ============================================================================= */
.mocks { display: flex; flex-wrap: wrap; gap: var(--sp-5); justify-content: center; margin: var(--sp-6) 0; }
.mock { position: relative; background: var(--c-paper); background-image: var(--grain); background-size: var(--grain-size) var(--grain-size); border: 1px solid var(--line); box-shadow: var(--shadow); overflow: hidden; border-radius: 14px; }
.mock--phone { width: 220px; height: 391px; border-radius: 22px; border: 6px solid #2b2823; }
.mock--card34 { width: 252px; height: 336px; }
.mock--banner { width: 100%; max-width: 520px; aspect-ratio: 2.35 / 1; }
.mock__cap { position: absolute; left: 10px; top: 10px; font-family: var(--font-mono); font-size: .56rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); background: var(--accent-soft); border-radius: 20px; padding: 3px 9px; z-index: 2; }
.mock__safe { position: absolute; left: 0; right: 0; bottom: 0; background: repeating-linear-gradient(45deg, rgba(189,107,58,.10) 0 8px, transparent 8px 16px); border-top: 1px dashed var(--accent); }
.mock__safe span { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); font-family: var(--font-mono); font-size: .5rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); white-space: nowrap; }
.mock__pad { padding: 26px 20px; height: 100%; display: flex; flex-direction: column; }

/* =============================================================================
   术语 / 行内强调
   ============================================================================= */
.term { font-family: var(--font-mono); font-size: .86em; color: var(--brand); background: var(--brand-soft); padding: .08em .42em; border-radius: 5px; }
.path { font-family: var(--font-mono); font-size: .84em; color: var(--accent); background: var(--accent-soft); padding: .08em .42em; border-radius: 5px; word-break: break-all; }
mark { background: color-mix(in srgb, var(--gold) 26%, transparent); color: var(--text); padding: 0 .15em; border-radius: 3px; }

/* 数据点 / 大数字 */
.stat-row { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin: var(--sp-5) 0; }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-sm); padding: var(--sp-4) var(--sp-5); flex: 1 1 150px; }
.stat .n { font-family: var(--font-display); font-style: italic; font-weight: 900; font-size: 2rem; color: var(--accent); line-height: 1; }
.stat .l { font-family: var(--font-sans); font-size: .82rem; color: var(--muted); margin-top: 6px; }

/* =============================================================================
   章末导航  ·  PREV / NEXT
   ============================================================================= */
.chap-foot { margin: var(--sp-8) 0 var(--sp-7); padding-top: var(--sp-5); border-top: 1px solid var(--line); display: flex; gap: var(--sp-4); }
.chap-foot a { flex: 1; text-decoration: none; border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-4) var(--sp-5); background: var(--card); transition: transform .12s ease, box-shadow .15s ease, background .15s ease; }
.chap-foot a:hover { transform: translateY(-2px); box-shadow: var(--shadow); background: var(--bg-soft); }
.chap-foot .dir { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.chap-foot .t { display: block; margin-top: 5px; font-family: var(--font-serif); font-weight: 700; color: var(--text); }
.chap-foot .next { text-align: right; }
.chap-foot .disabled { opacity: .4; pointer-events: none; }

/* 页脚 */
.book-foot { background: var(--c-dark); color: var(--c-dark-text); padding: var(--sp-6) var(--sp-5); margin-top: var(--sp-8); }
.book-foot__inner { max-width: 880px; margin-inline: auto; display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center; justify-content: space-between; }
.book-foot__brand { display: flex; align-items: center; gap: 12px; }
.book-foot__brand .m { width: 32px; height: 32px; border-radius: 9px; background: linear-gradient(155deg, var(--c-pine-deep-a), var(--c-pine-deep-b)); display: grid; place-items: center; font-family: var(--font-display); font-style: italic; font-weight: 900; color: var(--c-copper-lite); font-size: 1rem; }
.book-foot__brand b { font-family: var(--font-serif); color: var(--c-cream); }
.book-foot__tag { font-family: var(--font-serif); font-style: italic; color: var(--c-dark-text); }
.book-foot__by { font-family: var(--font-mono); font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; color: var(--c-copper-lite); }

@media (max-width: 640px) {
  .chap-hero__row { flex-direction: column; gap: var(--sp-2); }
  .chap-hero__num { font-size: 3.4rem; }
  .recipe__row { grid-template-columns: 1fr; gap: 3px; }
  .chap-foot { flex-direction: column; }
}