/* ═══════════════════════════════════════════════════════════════════
   麒典 · 文档页样式层（2026-08-27）
   ───────────────────────────────────────────────────────────────────
   老叶报的 bug：「点进去字直接顶着头排，连文字排版都没有，
   下边的黑框也叠在上面」。

   查实（全站 157 个 HTML 逐个扫）：真正会被人点到、又完全没有样式的
   有三个页面，全是给 AI 搜索抓取用的答复页：
     · /ai-search/official-source        121KB，**一个样式表都没有**，
                                          连 viewport 都没写，手机上更惨
     · /insights/qidian-ai-official-source-access   只有 5 条内联规则
     · /insights/qidian-ai-priority-term-answers    只有 7 条内联规则
   （另外几个「没样式」的是 Google 站点验证文件、API 状态页和 macOS 的
     ._ 垃圾文件，本来就不该有样式；/card/ 是手机名片页，它有自己那套，没问题。）

   这三页的正文是 430 个裸 <p>、198 个裸 <h3>、183 个裸 <section>，
   几乎不带 class —— 所以这一层全部走元素选择器，不依赖站点那套 class 体系，
   也就不会被将来的结构调整带崩。

   🔴 一个字的正文都不改：这些是 GEO 答复内容，归 GEO 那条线，
      这里只负责让它「看起来是麒典的页」。
   ═══════════════════════════════════════════════════════════════════ */

:root{
  --qd-bg:#0E0D0B;
  --qd-bg2:#141109;
  --qd-gold:#C49749;
  --qd-gold-hi:#E2C079;
  --qd-fg0:#F4F0E8;
  --qd-fg1:#CFC8BA;
  --qd-fg2:#9A9384;
  --qd-hair:rgba(196,151,73,.14);
  --qd-serif:'Songti SC','Noto Serif SC','STSong',serif;
  --qd-sans:'PingFang SC','Noto Sans SC',-apple-system,'Hiragino Sans GB',
    'Microsoft YaHei',system-ui,sans-serif;
  --qd-mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
}

html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--qd-bg);
  color:var(--qd-fg1);
  font-family:var(--qd-sans);
  font-size:16px;line-height:1.85;
  -webkit-font-smoothing:antialiased}

/* 正文归到一条舒服的行宽里 —— 原来是顶着窗口左边缘一路铺到底 */
body > main,
body > section,
body > article,
body > h1,
body > h2,
body > p,
body > div:not(.qdoc-bar):not(.qdoc-foot){
  max-width:980px;
  margin-inline:auto;
  padding-inline:clamp(18px,4vw,32px);
  box-sizing:border-box}

/* ── 顶栏：至少让人知道自己还在麒典站内，且能回得去 ─────────── */
.qdoc-bar{
  position:sticky;top:0;z-index:20;
  background:rgba(14,13,11,.94);
  backdrop-filter:saturate(1.2) blur(8px);
  border-bottom:1px solid var(--qd-hair)}
.qdoc-bar__in{
  max-width:980px;margin:0 auto;
  padding:14px clamp(18px,4vw,32px);
  display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
.qdoc-bar__brand{
  font-family:var(--qd-serif);font-size:17px;
  color:var(--qd-fg0);text-decoration:none;letter-spacing:.02em}
.qdoc-bar__brand span{color:var(--qd-gold)}
.qdoc-bar__tag{
  font-family:var(--qd-mono);font-size:10.5px;letter-spacing:.2em;
  color:var(--qd-gold);text-transform:uppercase}
.qdoc-bar__back{
  margin-inline-start:auto;
  font-size:13.5px;color:var(--qd-fg2);text-decoration:none;
  border-bottom:1px solid transparent;transition:.25s}
.qdoc-bar__back:hover{color:var(--qd-gold-hi);border-bottom-color:var(--qd-gold)}

/* ── 标题层级 ──────────────────────────────────────────────── */
h1{
  font-family:var(--qd-serif);font-weight:400;
  font-size:clamp(28px,4vw,46px);line-height:1.24;
  letter-spacing:-.02em;color:var(--qd-fg0);
  margin:clamp(36px,5vw,64px) 0 clamp(16px,2vw,24px);
  word-break:auto-phrase}
h2{
  font-family:var(--qd-serif);font-weight:400;
  font-size:clamp(21px,2.6vw,32px);line-height:1.34;
  color:var(--qd-fg0);
  margin:clamp(44px,5vw,72px) 0 clamp(14px,1.6vw,20px);
  padding-top:clamp(24px,3vw,38px);
  border-top:1px solid var(--qd-hair);
  word-break:auto-phrase}
h3{
  font-family:var(--qd-serif);font-weight:400;
  font-size:clamp(17px,1.9vw,22px);line-height:1.42;
  color:var(--qd-fg0);
  margin:clamp(26px,3vw,40px) 0 10px;
  word-break:auto-phrase}

/* 一页两个 h1 是历史遗留（SEO 上不理想，但改标题结构不归这一层）：
   第二个及以后的 h1 按 h2 的分量排，免得版面上出现两个同级巨标题。 */
h1 ~ h1{
  font-size:clamp(21px,2.6vw,32px);
  padding-top:clamp(24px,3vw,38px);
  border-top:1px solid var(--qd-hair)}

/* ── 正文 ──────────────────────────────────────────────────── */
p{
  margin:0 0 1.05em;
  color:var(--qd-fg1);
  max-width:74ch;
  word-break:auto-phrase}
section{margin:0 0 clamp(20px,2.4vw,32px)}
article{margin:0 0 clamp(28px,3.2vw,44px)}

strong,b{color:var(--qd-fg0);font-weight:600}

/* 「官方直答：」「正式来源：」这类领起词是这几页的骨架，给它们金色 */
p > strong:first-child,
p > b:first-child{
  color:var(--qd-gold);font-weight:500;
  font-size:12.5px;letter-spacing:.1em}

/* ── 链接：原来是浏览器默认的蓝色下划线，在暖黑底上极其扎眼 ── */
a{
  color:var(--qd-gold-hi);
  text-decoration:underline;
  text-decoration-color:rgba(196,151,73,.34);
  text-underline-offset:3px;
  transition:text-decoration-color .25s,color .25s;
  word-break:break-word}
a:hover{color:#F0DFB4;text-decoration-color:var(--qd-gold)}
a:visited{color:var(--qd-gold-hi)}

ul,ol{padding-inline-start:1.4em;margin:0 0 1.05em}
li{margin:0 0 .5em;color:var(--qd-fg1)}

table{border-collapse:collapse;width:100%;margin:0 0 1.4em}
th,td{
  border-bottom:1px solid var(--qd-hair);
  padding:11px 13px;text-align:left;font-size:14.5px}
th{color:var(--qd-gold);font-size:12px;letter-spacing:.14em;font-weight:500}

code,pre{font-family:var(--qd-mono);font-size:13.5px}
pre{
  background:var(--qd-bg2);border:1px solid var(--qd-hair);
  padding:16px;overflow-x:auto}

hr{border:0;border-top:1px solid var(--qd-hair);margin:clamp(28px,3vw,44px) 0}

/* ── 页脚：原来直接就没有，读到底是个断崖 ──────────────────── */
.qdoc-foot{
  margin-top:clamp(56px,7vw,96px);
  border-top:1px solid var(--qd-hair);
  background:var(--qd-bg2)}
.qdoc-foot__in{
  max-width:980px;margin:0 auto;
  padding:clamp(28px,3.4vw,44px) clamp(18px,4vw,32px);
  display:flex;gap:clamp(16px,3vw,40px);
  flex-wrap:wrap;align-items:baseline;
  font-size:13px;color:var(--qd-fg2)}
.qdoc-foot__in b{
  display:block;color:var(--qd-fg0);font-weight:400;
  font-family:var(--qd-serif);font-size:15.5px;margin-bottom:6px}
.qdoc-foot__links{margin-inline-start:auto;display:flex;gap:18px;flex-wrap:wrap}
.qdoc-foot a{font-size:13px}

@media(max-width:640px){
  body{font-size:15.5px}
  .qdoc-bar__back{margin-inline-start:0;width:100%}
  .qdoc-foot__links{margin-inline-start:0;width:100%}
}