/* GEMCOOL HDR LIGHT 使用教程 · 统一样式
   配色沿用软件本体：底 #0a0a0b / 面板 #131316 / 主色 #7c3bed / 紫字 #b1b2f8
   （与 _design/spec/gemcool-tokens.css 的 SKIN 层同源） */
:root{
  --bg:#0a0a0b; --bg2:#131316; --bg3:#191920;
  --line:#26262c; --line2:#33333c;
  --tx:#ececee; --tx2:#b9b9c0; --tx3:#8b8b93;
  --ac:#7c3bed; --ac2:#b1b2f8; --ok:#3ecf8e; --warn:#f0b429;
  --mono:ui-monospace,"SF Mono",Consolas,"Liberation Mono",monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --side:274px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--tx);
  font-family:var(--sans); font-size:15.5px; line-height:1.78;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--ac2); text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%}

/* ── 侧栏 ── */
#side{
  position:fixed; inset:0 auto 0 0; width:var(--side);
  background:var(--bg2); border-right:1px solid var(--line);
  display:flex; flex-direction:column; z-index:30;
}
#side .brand{
  padding:16px 18px 14px; border-bottom:1px solid var(--line);
}
#side .brand b{display:block; font-size:14px; letter-spacing:.04em; color:#fff}
#side .brand span{display:block; font-size:11.5px; color:var(--tx3); margin-top:3px; letter-spacing:.06em}
#sideScroll{overflow:auto; padding:10px 0 40px; flex:1}
#sideScroll::-webkit-scrollbar{width:8px}
#sideScroll::-webkit-scrollbar-thumb{background:#2c2c34; border-radius:4px}
#side a.ch{
  display:flex; gap:9px; align-items:baseline;
  padding:8px 18px; font-size:13.5px; color:var(--tx2); border-left:2px solid transparent;
}
#side a.ch:hover{background:#17171c; color:#fff; text-decoration:none}
/* 子章：缩进 + 降一号字 + 降一级色。
   缩进量取 16px（= a.ch 的 padding 18px 再往里一点），让子章章号和父章章号
   在视觉上明显错开但不至于跑到屏幕中间；超长标题省略而不是换行 ——
   侧栏是导航不是正文，换行会把后面的章全推下去。 */
#side a.ch.sub{
  padding-left:34px; font-size:12.5px; color:var(--tx3);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
#side a.ch.sub i{font-size:10.5px; opacity:.75}
#side a.ch.sub.on{color:#fff}
#side a.ch.sub.on i{opacity:.95}
#side a.ch.on{color:#fff; background:#1b1726; border-left-color:var(--ac)}
#side a.ch i{
  font-style:normal; font-size:11px; color:var(--ac2); min-width:14px;
  font-family:var(--mono); opacity:.9;
}
#side .secs{padding:2px 0 8px 0}
#side .secs a{
  display:block; padding:3px 18px 3px 42px; font-size:12.5px; color:var(--tx3);
  border-left:2px solid transparent; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
#side .secs a:hover{color:#fff; background:#15151a; text-decoration:none}
#side .secs a.on{color:var(--ac2); border-left-color:#4b2e86}
#side .foot{
  border-top:1px solid var(--line); padding:10px 18px; font-size:11px; color:var(--tx3);
}

/* ── 主体 ── */
main{margin-left:var(--side); padding:0 0 90px}
.wrap{max-width:900px; margin:0 auto; padding:0 34px}
.crumb{
  font-size:12px; color:var(--tx3); letter-spacing:.05em;
  padding:26px 0 0;
}
h1{
  font-size:31px; line-height:1.35; margin:8px 0 10px; letter-spacing:-.01em; color:#fff;
}
.lede{font-size:16px; color:var(--tx2); margin:0 0 26px; max-width:46em}
h2{
  font-size:21px; margin:52px 0 14px; padding-top:16px; border-top:1px solid var(--line);
  color:#fff; scroll-margin-top:20px;
}
h2:first-of-type{border-top:0; padding-top:0; margin-top:34px}
h3{
  font-size:16.5px; margin:34px 0 8px; color:#fff; scroll-margin-top:20px;
  display:flex; flex-wrap:wrap; gap:8px; align-items:baseline;
}
h3 .num{
  font-family:var(--mono); font-size:12.5px; color:var(--ac2);
  background:#1e1730; border:1px solid #3a2a5e; padding:1px 7px; border-radius:5px;
  letter-spacing:.02em; transform:translateY(-1px);
}
h3 .ref{font-size:11px; color:#5c5c66; font-family:var(--mono)}
h4{font-size:14.5px; margin:22px 0 6px; color:var(--tx)}
p{margin:9px 0}
/* ★ 兜底：Enter 在 contenteditable 里默认产 <div>，而段距规则全挂在 p 上 ⇒
   无属性的 div 会紧贴上一段。后台保存时已把它归一成 p，这里是历史的存量兜底。
   限定 main 内 + 无 class 无 id，不会碰到页面骨架用的 div。 */
main div:not([class]):not([id]){margin:9px 0}
ul,ol{margin:9px 0; padding-left:22px}
li{margin:5px 0}
ol.steps{padding-left:22px}
ol.steps li::marker{color:var(--ac2); font-weight:700}
strong{color:#fff}
em{font-style:normal; color:var(--ac2)}

kbd{
  font-family:var(--mono); font-size:.74em; background:#232329; border:1px solid #3a3a44;
  border-bottom-width:2px; border-radius:4px; padding:1px 5px; color:#e6e6ea; white-space:nowrap;
}
code{font-family:var(--mono); font-size:.8em; background:#1c1c22; padding:1px 5px; border-radius:4px; color:#d7d7de}

/* 卡片式提示 */
.note,.warn,.tip{
  border-radius:9px; padding:11px 14px; margin:14px 0; font-size:14px; line-height:1.7;
  border:1px solid var(--line2); background:var(--bg3); color:var(--tx2);
}
.note{border-left:3px solid var(--ac)}
.note b{color:var(--ac2)}
.warn{border-left:3px solid var(--warn); background:#1d1a14}
.warn b{color:var(--warn)}
.tip{border-left:3px solid var(--ok); background:#121c17}
.tip b{color:var(--ok)}

/* 图 */
figure{margin:16px 0 20px}
/* width 让 HTML 的 width 属性生效（= 截图尺寸的一半，2 倍采样仍清晰）；
   以前写 width:auto 会让属性失效、图片按原始像素铺成两倍大，长条图能撑到 2700px 高 */
figure img{
  display:block; max-width:100%; height:auto; border:1px solid var(--line2);
  border-radius:9px; background:#0d0d10; cursor:zoom-in; margin:0 auto;
}
figure img.small{max-width:100%}
figcaption{
  font-size:12px; color:var(--tx3); margin-top:7px; line-height:1.6;
}
figcaption b{color:var(--tx2); font-weight:600}
.gal{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:16px 0}
.gal figure{margin:0}
.gal figcaption{font-size:11.5px}
.gal3{grid-template-columns:repeat(3,minmax(0,1fr))}

/* 长条整栏图（预设库/参数栏那种 1:5 的竖条）+ 编号解读并排：
   图占 340，说明占剩下的宽度。纵向长度从「图+说明」变成「图」，还顺带把图放大到可读尺寸 */
.side{display:grid; grid-template-columns:340px minmax(0,1fr); gap:26px; align-items:start; margin:16px 0 24px}
.side figure{margin:0}
.side figure img{width:340px; max-width:100%}
.side .legend{margin:0; padding:0; border:0; background:none}
.side .legend ol{columns:1}
@media (max-width:900px){
  .side{grid-template-columns:1fr; gap:10px}
  .side figure img{width:260px; margin:0 auto}
}

/* 标注解读：图上只有数字，中文在这里 */
.legend{
  border:1px solid var(--line); border-radius:9px; background:#111116;
  padding:10px 14px 12px; margin:-4px 0 20px; font-size:13.5px;
}
.legend ol{margin:4px 0 0; padding-left:2px; list-style:none; columns:2; column-gap:26px}   /* 编号已经在 <b>①</b> 里，别再让 ol 生一遍 1. 2. */
.legend li{margin:4px 0; break-inside:avoid; color:var(--tx2)}
.legend li b{color:#ffd166; font-weight:600}
.legend .h{font-size:12px; color:var(--tx3); letter-spacing:.04em}
@media (max-width:900px){ .legend ol{columns:1} }

/* 流程图 */
figure.flow{margin:18px 0 22px}
figure.flow svg{
  display:block; width:100%; height:auto; border:1px solid var(--line2);
  border-radius:10px; background:#0d0d11; padding:6px 2px;
}

/* 表格 */
table{width:100%; border-collapse:collapse; margin:14px 0; font-size:13.5px}
th,td{text-align:left; padding:7px 10px; border-bottom:1px solid var(--line); vertical-align:top}
th{color:var(--tx2); font-weight:600; background:#15151a; font-size:12.5px}
td code{font-size:.77em}
tbody tr:hover{background:#131318}

/* 翻页 */
.pager{display:flex; gap:12px; margin:56px 0 0; border-top:1px solid var(--line); padding-top:20px}
.pager a{
  flex:1; border:1px solid var(--line2); border-radius:10px; padding:11px 14px;
  background:var(--bg2); color:var(--tx2); font-size:13.5px;
}
.pager a:hover{border-color:#4b3a72; color:#fff; text-decoration:none}
.pager a b{display:block; color:#fff; font-size:14.5px; margin-top:2px}
.pager a.next{text-align:right}

/* 放大层 */
#zoom{
  position:fixed; inset:0; background:rgba(4,4,6,.94); display:none;
  z-index:100; padding:22px; cursor:zoom-out; overflow:auto;
}
#zoom.on{display:flex; align-items:center; justify-content:center}
#zoom img{max-width:100%; max-height:100%; border-radius:6px; box-shadow:0 20px 60px #000}
#zoom .hint{position:fixed; left:0; right:0; bottom:14px; text-align:center; font-size:12px; color:#8b8b93}

/* 封面 */
.hero{padding:44px 0 8px}
.hero .kicker{font-size:12px; letter-spacing:.18em; color:var(--ac2); text-transform:uppercase}
.hero h1{font-size:40px; margin:10px 0 14px}
.hero .sub{font-size:17px; color:var(--tx2); max-width:40em}
.badges{display:flex; flex-wrap:wrap; gap:8px; margin:20px 0 6px}
.badges span{
  font-size:12px; color:var(--tx2); border:1px solid var(--line2);
  background:var(--bg2); padding:4px 10px; border-radius:999px;
}
.toc{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:22px 0}
.toc a{
  display:block; border:1px solid var(--line); border-radius:11px; padding:14px 16px;
  background:var(--bg2); color:var(--tx2);
}
.toc a:hover{border-color:#4b3a72; background:#161322; text-decoration:none}
.toc a b{display:block; color:#fff; font-size:15px; margin-bottom:3px}
.toc a i{font-style:normal; font-family:var(--mono); font-size:11.5px; color:var(--ac2)}
.toc a span{display:block; font-size:12.5px; color:var(--tx3); margin-top:5px; line-height:1.55}

/* 移动端 */
#burger{display:none}
@media (max-width:900px){
  :root{--side:0px}
  #side{
    transform:translateX(-100%); transition:transform .22s ease; width:280px;
  }
  #side.on{transform:none}
  main{margin-left:0}
  .wrap{padding:0 18px}
  h1{font-size:25px}
  .hero h1{font-size:29px}
  .toc,.gal,.gal3{grid-template-columns:1fr}
  #burger{
    display:flex; position:fixed; left:12px; top:12px; z-index:40;
    width:40px; height:40px; align-items:center; justify-content:center;
    background:var(--bg2); border:1px solid var(--line2); border-radius:9px;
    color:#fff; font-size:16px; cursor:pointer;
  }
  .crumb{padding-top:64px}
}

/* ── 引用块 ──
   中性竖线、无彩条、无底色：专给「引用厂商原话 / 贴报错原文」用。
   必须和 .note/.warn/.tip 区分开 —— 那三个是带彩条 + 底色的提示卡。 */
blockquote{
  margin:14px 0; padding:2px 0 2px 14px;
  border-left:3px solid var(--line2); color:var(--tx2);
}
blockquote p{margin:6px 0}
/* 有 border-left 的容器，子元素 margin 不会穿透 ⇒ 不清零的话竖线会比文字
   上下各高出 9px，2px 的 padding 等于白给。 */
blockquote>:first-child{margin-top:0}
blockquote>:last-child{margin-bottom:0}

/* ── 富文本可选格式：与后台 .rt 里那套 class 一一对应，色值各用各的 ──
   ★★ 绝不把 inline hex 写进正文：同一段文字要同时满足深色前台(#0a0a0b)和
   浅色后台(#fff)的 4.5:1，inline style 只能存一个值 ⇒ 不是前台看不清就是后台看不清。
   落 class 才能「一处标记、两套色值」。改这里必须同步 platform/admin.css 的同名块。
   字号只给两档：中文字形没有斜体可以区分，字号再多一档就变成「伪标题」，
   层级应该由 h3/h4 承担。行距三档对应「紧凑/默认/疏朗」。 */
.fs-sm{font-size:13.5px}
/* .fs-lg（17px）v1 不提供，勿启用：正文不得 ≥ h3 的 16.5，否则紧跟 h3 的正文
   看起来就是第二个小标题。放大诉求走 strong / .tc-* / .hl-* / .tip 四个既有出口。 */
.lh-tight{line-height:1.6}
.lh-loose{line-height:2}
.tc-ok{color:var(--ok)}
.tc-danger{color:#ff9aa6}
.tc-muted{color:var(--tx3)}
/* 「紫字」自带一个类，不走 em：em 是语义标签，用它兼颜色会让「斜体」和「紫」互相绑死。 */
.tc-accent{color:var(--ac2)}
/* 高亮必须是「暗底 + 亮字 + 1px 描边」，不能做成荧光笔式亮底：
   ① 亮底对页面底 #0a0a0b 的分离度会到 11–16，比 h1 还亮，读者扫读的视线锚点会从标题被拽走；
   ② 更要命的是嵌套 —— 亮底上任何语义色都只剩 1.1–1.6:1，而「高亮一段、其中某个词用 em 强调」
      是最常见的组合，会直接糊掉。暗底方案下 em 紫落在暗黄底上是 7.08:1，嵌套仍然成立。
   1px 描边不是装饰：暗底对页面底只有 1.19–1.41，不描边在深色页面上几乎看不见边界。 */
/* ★ 兜底：带 class 的 mark 在 .hl-* 没生效时不要掉回浏览器的黄色底。
   （类名拼错 / 白名单剪掉 / 新预览面忘了引 CSS —— 症状都是「莫名变黄」，
     而黄底深字看起来完全正常，没人会去查。:where() 把特异性压到 0，.hl-* 永远赢。） */
:where(mark[class]){background:none;color:inherit;box-shadow:none}
.hl-accent{background:#251d3a; color:#d9d4fb; box-shadow:0 0 0 1px #4a4450}
.hl-ok{background:#1f2b22; color:#9be5c0; box-shadow:0 0 0 1px #3d5a49}
.hl-warn{background:#332b14; color:#f5d98a; box-shadow:0 0 0 1px #5c4d2a}
.hl-danger{background:#2e1720; color:#ff9aa6; box-shadow:0 0 0 1px #5a2f3c}
@media (max-width:900px){
  .fs-sm{font-size:13px}
}

/* 图下补充说明：比 figcaption 更小、更淡，且要贴住上面的图（-8px 上边距）。
   这是唯一还带内联样式的存量段落（1 处），转成 class 之后 style 属性就可以彻底禁掉。
   ★ 不要叫 .small —— 两侧已被 figure img.small 占用，同名两义。 */
.cap{font-size:13px; color:var(--tx3); margin:-8px 0 0}