/* ============================================================
   文章页全局样式（风格与 index.htm 一致，所有可调参数集中在 :root）
   ============================================================ */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* =====================  全局变量（以后只改这里就行）  ===================== */
:root {
    /* 主色板 —— 天青系，与 index.htm 一致 */
    --primary: #7EC8E3;
    --primary-light: #EAF5FA;
    --primary-dark: #5AA6C4;
    --accent:        #C19A6B;        /* 强调色 · 缃色 */

    /* 灰阶（墨灰 + 暖白） */
    --gray-1: #26251E;          /* 标题/正文主色 */
    --gray-2: #3A3732;          /* 子标题/次强调 */
    --gray-3: #5C5750;          /* 辅助文字/注脚 */
    --gray-4: #8A8378;          /* 弱化文字 */
    --gray-5: #E5DFD6;          /* 细分隔线/边框 */
    --gray-6: #F5F3F0;          /* 浅底背景（代码块/表格/注脚卡片） */
    --gray-7: #FBF9F6;          /* 极浅底（卡片 hover） */
    --white:  #FFFDF9;

    /* 排版 */
    --body-font:       -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", sans-serif;
    --code-font:       "Consolas", "SF Mono", "JetBrains Mono", "Fira Code", "Courier New", monospace;
    --body-size:       15px;
    --body-line:       1.8;
    --h1-size:         1.1rem;   /* 文章页顶部大标题, 调到约列表标题大小, 防长标题折行 */
    --h2-size:         1.0rem;   /* 内容小节标题, 与文章列表标题相当, 防长标题折行 */
    --h3-size:         0.92rem;
    --code-inline-size: 0.92em;
    --code-block-size:  0.88rem;
    --quote-accent:    #8DD4E8;

    /* 圆角与阴影 */
    --r-sm: 4px;
    --r-md: 8px;
    --r-lg: 12px;
    --shadow-card:     0 2px 12px rgba(0, 0, 0, 0.06);
    --shadow-code:     inset 0 1px 2px rgba(0,0,0,.04);

    /* 尺寸 */
    --container-max:   820px;
    --icon-size:       28px;
    --icon-size-mb:    24px;

    /* 深色代码块（<pre><i>）—— 深墨灰，与天青主色形成对比 */
    --code-bg:         #2E2C28;
    --code-fg:         #E7E2D8;

    /* 断点（仅参考，@media 中需硬编码） */
    /* --bp-mobile:  640px;  */
    /* --bp-small:   400px;  */
}

html {
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    text-rendering: optimizeLegibility;
}

body {
    font-family: var(--body-font);
    background: #F5F3F0;
    color: var(--gray-1);
    padding: 20px 16px 48px;
    line-height: var(--body-line);
    font-size: var(--body-size);
    text-align: left;
    word-break: break-word;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.container {
    max-width: var(--container-max);
    margin: 0 auto;
    background: var(--white);
    padding: 28px 32px 32px;
    border-radius: var(--r-lg);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}

/* =====================  文章头部  ===================== */
.article-header {
    margin-bottom: 26px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--gray-5);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 10px 16px;
}

.article-title {
    font-size: var(--h1-size);
    font-weight: 700;
    letter-spacing: -0.3px;
    line-height: 1.35;
    color: var(--gray-1);
}

.article-title a {
    color: inherit;
    text-decoration: none;
    border-bottom: none;
}
.article-title a:hover {
    color: inherit;
    border-bottom: none;
}

.header-icons {
    display: inline-flex;
    align-items: center;
    gap: 6px 10px;
    margin-left: auto;
    font-size: 0.9rem;
    color: var(--gray-3);
}

.header-icons a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--primary);
    text-decoration: none;
    border-bottom: none;
    font-weight: 500;
    white-space: nowrap;
    padding: 4px 2px;
    border-radius: var(--r-sm);
}

.header-icons a:hover {
    background: var(--primary-light);
    text-decoration: none;
    border-bottom: none;
}

.header-icons .back-link {
    font-size: 0.92rem;
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--gray-6);
    color: var(--primary-dark);
    font-weight: 600;
    transition: all 0.15s;
}

.header-icons .back-link:hover {
    background: var(--primary);
    color: var(--white);
}

/* =====================  图标类  ===================== */
img.icon {
    width: var(--icon-size);
    height: var(--icon-size);
    border-radius: var(--r-sm);
    border: 1px solid var(--gray-5);
    vertical-align: middle;
    background: var(--white);
    object-fit: contain;
}

/* =====================  正文（<pre> 包裹是原有结构）  ===================== */
pre,
.pre {
    white-space: pre-wrap;
    word-wrap: break-word;
    word-break: break-word;
    tab-size: 4;
    -moz-tab-size: 4;
    line-height: var(--body-line);
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    background: transparent;
    border: none;
    margin: 0;
    padding: 0;
    letter-spacing: 0.01em;
}

/* 作者/日期行的视觉提示：只给正文 pre 加左侧浅绿竖条（装饰用），不改字色不改字重，
   这样完全不会像 ::first-line 那样穿透误伤代码块首行。
   想去掉装饰，直接把下面 pre { border-left... } 整段删掉即可。*/
pre {
    border-left: 3px solid var(--primary-light);
    padding-left: 14px;
}

pre p,
.pre p {
    margin: 0.9em 0;
}

/* 代码块重置：代码块 pre 不需要左边条/左边距（内部已经有暗色代码块框了）*/
pre:has(> i),
pre:has(> code),
pre:has(> .code) {
    border-left: none;
    padding-left: 0;
}
/* 老浏览器 :has 不支持兜底：即使去不掉外边条也不影响代码块内部显示 */
pre > i,
pre > code,
pre > .code {
    margin-left: -14px; /* 如果上面 :has 不生效被加了 padding，代码块就负 margin 拉回去 */
    padding-left: 1em;
}

/* 标题层级（若文章用了 h1/h2/h3 标签）*/
pre h1, pre h2, pre h3, pre h4,
.pre h1, .pre h2, .pre h3, .pre h4 {
    margin: 1.6em 0 0.7em;
    line-height: 1.35;
    font-weight: 700;
    color: var(--gray-1);
    padding-left: 10px;
    border-left: 3px solid var(--primary);
}

pre h1, .pre h1 { font-size: var(--h1-size); }
pre h2, .pre h2 { font-size: var(--h2-size); border-left-width: 3px; }
pre h3, .pre h3 { font-size: var(--h3-size); color: var(--gray-2); border-left-width: 2px; }

pre hr, .pre hr {
    border: none;
    border-top: 1px dashed var(--gray-5);
    margin: 1.8em 0;
}

/* 强调文本：段评、加粗 */
pre strong, .pre strong,
b {
    font-weight: 700;
    color: var(--primary-dark);
}

/* 正文中的引用场景（若存在） */
blockquote {
    border-left: 4px solid var(--primary);
    padding: 0.4em 1em;
    margin: 1em 0;
    background: var(--primary-light);
    color: var(--gray-2);
    border-radius: 0 var(--r-md) var(--r-md) 0;
}

/* =====================  内联代码 & 代码块（<code> / .code）  ===================== */
code,
.code {
    font-family: var(--code-font);
    white-space: pre-wrap;
    word-break: break-word;
    background: var(--gray-6);
    color: var(--gray-1);
    font-size: var(--code-inline-size);
    border-radius: var(--r-sm);
    padding: 2px 6px;
    border: 1px solid transparent;
}

.code {
    display: block;
    border-color: var(--gray-5);
    padding: 14px 16px;
    border-radius: var(--r-md);
    line-height: 1.65;
    margin: 1.2em 0;
    overflow-x: auto;
    box-shadow: var(--shadow-code);
}

/* =====================  深色代码块（<pre><i> 老结构）  ===================== */
pre i,
.pre i {
    display: block;
    font-family: var(--code-font);
    font-style: normal;
    white-space: pre-wrap;
    word-break: break-word;
    font-size: var(--code-block-size);
    line-height: 1.65;
    background: var(--code-bg);
    color: var(--code-fg);
    padding: 16px 18px;
    border-radius: var(--r-md);
    margin: 1.2em 0;
    overflow-x: auto;
    box-shadow: var(--shadow-code);
}

pre i::selection,
.pre i::selection {
    background: #3A3732;
}

/* AI 文章里常见的 line-number 行号样式 */
pre i .code-line,
.pre i .code-line,
code .code-line {
    display: block;
    padding-left: 0;
}
pre i .line-number,
.pre i .line-number,
code .line-number,
code .line-numbers-rows {
    color: #A69F94;
    user-select: none;
    padding-right: 10px;
    margin-right: 6px;
    border-right: 1px solid #3A3732;
}

/* =====================  正文图片（默认自适应）  ===================== */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

img.full {
    width: 100%;
    border-radius: var(--r-md);
    margin: 18px auto;
    box-shadow: var(--shadow-card);
}

pre img,
.pre img {
    margin: 14px 0;
    border-radius: var(--r-md);
}

/* =====================  链接  ===================== */
a {
    color: var(--primary);
    text-decoration: none;
    border-bottom: 1px dashed var(--primary);
    transition: color 0.15s, border-color 0.15s;
    word-break: break-all;
}

a:hover {
    color: var(--accent);
    border-bottom-style: solid;
    border-bottom-color: var(--accent);
}

/* =====================  列表  ===================== */
pre ul, pre ol,
.pre ul, .pre ol {
    padding-left: 1.8em;
    margin: 0.9em 0;
}

pre li, .pre li {
    margin: 0.4em 0;
}

pre li::marker,
.pre li::marker {
    color: var(--primary);
}

/* =====================  表格（真实 <table>）  ===================== */
table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.3em 0;
    font-size: 0.95em;
    border-radius: var(--r-md);
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    background: var(--white);
    display: block;              /* 小屏幕允许表格横向滚动 */
    overflow-x: auto;
    white-space: nowrap;
}

td, th {
    vertical-align: top;
    padding: 10px 14px;
    border: 1px solid var(--gray-5);
    text-align: left;
    white-space: normal;        /* 单元格内可折行 */
}

th {
    background: var(--primary-light);
    color: var(--primary-dark);
    font-weight: 700;
    white-space: nowrap;
    position: sticky;
    top: 0;
}

td:last-child {
    color: inherit;
    background: transparent;
}

tr:nth-child(even) td {
    background: var(--gray-6);
}

tr:hover td {
    background: var(--gray-7);
}

/* =====================  dl / dt / dd 注脚区域  ===================== */
dl {
    margin-top: 28px;
    padding: 16px 20px;
    background: var(--gray-6);
    border-radius: var(--r-md);
    font-size: 0.93rem;
    color: var(--gray-3);
    line-height: 1.75;
    clear: both;
    border-left: 3px solid var(--primary);
}

dt {
    font-weight: 600;
    color: var(--gray-2);
    margin-top: 0.5em;
}

dt:first-child {
    margin-top: 0;
}

dd {
    margin-left: 1.2em;
    color: var(--gray-3);
}

dt b {
    color: var(--primary-dark);
    font-weight: 700;
}

/* =====================  页脚  ===================== */
.footer {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid var(--gray-5);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 12px 20px;
    font-size: 0.88rem;
    color: var(--gray-3);
}

.footer a {
    color: var(--primary);
    text-decoration: none;
    border-bottom: 1px dashed var(--primary);
    font-weight: 600;
}

.footer a:hover {
    color: var(--accent);
    border-bottom-style: solid;
    border-bottom-color: var(--accent);
}

.footer .qr-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    color: var(--gray-3);
    position: relative;
    padding: 4px 8px;
    border-radius: 999px;
    transition: background 0.15s;
}

.footer .qr-wrapper:hover {
    background: var(--primary-light);
}

.footer .qr-wrapper img {
    width: var(--icon-size);
    height: var(--icon-size);
    border-radius: var(--r-sm);
    border: 1px solid var(--gray-5);
    background: var(--white);
    transition: transform 0.2s;
}

.footer .qr-wrapper:hover img {
    transform: scale(1.05);
}

.footer .brand-imgs {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.footer .brand-imgs img {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    border: 1px solid var(--gray-5);
    background: var(--white);
    object-fit: contain;
}

/* =====================  二维码放大弹窗  ===================== */
.qr-modal {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 999;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    padding: 20px;
}

.qr-modal.show {
    display: flex;
}

.qr-modal img {
    max-width: min(90%, 380px);
    max-height: 90%;
    border-radius: var(--r-lg);
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.35);
    background: white;
    padding: 20px;
}

/* =====================  正文内容包裹层（BFC 清浮动，防止 float 元素撑不开父容器导致 footer 上浮）  ===================== */
.content-wrap {
    display: flow-root;          /* 现代浏览器最干净的 BFC 方式 */
    width: 100%;
    box-sizing: border-box;
}
@supports not (display: flow-root) {
    .content-wrap { overflow: hidden; }  /* 旧浏览器兜底 */
}
.content-wrap::after {                  /* 再叠一层 clearfix 双保险 */
    content: "";
    display: table;
    clear: both;
}

/* =====================  对话气泡（AI 问答类文章：p.q / p.a）  ===================== */
p.q, p.a {
    display: inline-block;
    padding: 9px 16px;
    border-radius: 12px;
    font-size: 0.95em;
    margin: 7px 0;
    max-width: 85%;
    line-height: 1.65;
    word-break: break-word;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

p.q {
    float: right;
    clear: both;
    background: var(--primary);
    color: var(--white);
    border-bottom-right-radius: 3px;
}

p.a {
    float: left;
    clear: both;
    background: var(--white);
    color: var(--gray-1);
    border: 1px solid var(--gray-5);
    border-bottom-left-radius: 3px;
}

/* 清除气泡浮动影响 */
p.q:last-child::after,
p.a:last-child::after {
    content: "";
    display: table;
    clear: both;
}

/* =====================  AI 文章专用块（Markdown / 长图容器）  ===================== */
/*
  背景：AI 系列文章不用 <pre> 包正文，而是用 <div class="md"> / <div class="md q"> + <textarea> 存内容，
  以及 <div class="img"> 包长图。之前缺少这几个 class 的样式 + textarea 是默认 rows=2 高度，
  导致"内容没撑高页面，反而盖住 footer"。下面补全套样式。
*/

/* 整体容器防浮动塌陷：兜底 clearfix */
.container::after {
    content: "";
    display: table;
    clear: both;
}

/* AI 回答块容器（无边框，与正文融为一体，内容更宽裕） */
.md {
    display: block;
    margin: 16px 0;
    padding: 14px 18px;
    background: transparent;
    color: var(--gray-1);
    border: none;
    border-radius: 0;
    line-height: var(--body-line);
    font-size: var(--body-size);
    word-break: break-word;
}
/* md 内的元素们（由 md 渲染 JS 生成）*/
.md p         { margin: 0.6em 0; }
.md h3,
.md .md-h3    { font-size: 0.95em; font-weight: 700; color: var(--primary-dark);
                margin: 1.1em 0 0.4em; padding-left: 10px; border-left: 3px solid var(--primary);
                line-height: 1.5; }
.md h1        { font-size: 1.3em; font-weight: 800; color: var(--gray-1);
                margin: 1.4em 0 0.6em; padding-bottom: 8px; border-bottom: 2px solid var(--primary); }
.md h2        { font-size: 1.0em; font-weight: 700; color: var(--primary-dark);
                margin: 1.3em 0 0.5em; padding-left: 12px; border-left: 4px solid var(--primary);
                padding-bottom: 4px; }
.md h4,
.md .md-h4    { font-size: 1em; font-weight: 600; color: var(--gray-1);
                margin: 0.9em 0 0.2em; }
.md h5        { font-size: 0.94em; font-weight: 600; color: var(--gray-2);
                margin: 0.8em 0 0.2em; }
.md h6        { font-size: 0.88em; font-weight: 600; color: var(--gray-3);
                margin: 0.7em 0 0.2em; }
.md hr        { border: none; border-top: 1px solid var(--gray-5);
                margin: 1.2em 0; }
.md a         { color: var(--primary); text-decoration: none;
                border-bottom: 1px dashed var(--primary); transition: border-color 0.15s, color 0.15s; }
.md a:hover   { border-bottom-style: solid; border-bottom-color: var(--accent); color: var(--accent); }
.md strong,
.md b         { font-weight: 700; color: var(--gray-1); }
.md em,
.md i         { font-style: italic; color: var(--gray-2); }
.md blockquote{ margin: 0.7em 0; padding: 8px 14px; background: var(--gray-6); color: var(--gray-3);
                border-left: 3px solid var(--gray-4); border-radius: 0 var(--r-sm) var(--r-sm) 0;
                font-size: 0.92em; }
.md pre,
.md pre i,
.md pre code  { margin: 0.8em 0; } /* 继承正文代码块样式 */
.md table     { border-collapse: collapse; margin: 0.8em 0; width: 100%;
                font-size: 0.94em; overflow-x: auto; display: block; }
.md th,
.md td        { border: 1px solid var(--gray-5); padding: 7px 12px; vertical-align: top; text-align: left; }
.md th        { background: var(--gray-6); font-weight: 600; color: var(--gray-1); }
.md ul, .md ol{ padding-left: 1.6em; margin: 0.5em 0; }
.md ul        { list-style-type: disc; }
.md ul ul     { list-style-type: circle; }
.md ol        { list-style-type: decimal; }
.md ol ol     { list-style-type: lower-alpha; }
.md li        { margin: 0.25em 0; }
.md code      { background: var(--gray-6); color: var(--primary-dark); padding: 1px 5px;
                border-radius: var(--r-sm); font-family: var(--code-font); font-size: 0.92em; }
/* 经 marked 渲染的整段代码块（<pre><code>）：code 默认是 inline，其左 padding 只作用于首行，
   导致"首行比后续行多缩进"（看起来像 ::first-line 效果）。改成块级深色代码块样式，使每行左对齐。 */
.md pre > code {
    display: block;
    font-family: var(--code-font);
    font-style: normal;
    white-space: pre-wrap;
    word-break: break-word;
    font-size: var(--code-block-size);
    line-height: 1.65;
    background: var(--code-bg);
    color: var(--code-fg);
    padding: 16px 18px;
    border-radius: var(--r-md);
    margin: 0;
    overflow-x: auto;
    box-shadow: var(--shadow-code);
}
/* 小节名 + 描述的组合块（"  小标题名  " + 下一行 4 空格缩进描述）*/
.md .md-sub   { margin: 0.4em 0 0.6em; padding-left: 8px; }
.md .md-sub-name  { font-weight: 600; color: var(--gray-1); display: inline-block; margin-right: 6px; }
.md .md-sub-name::after { content: "："; color: var(--gray-3); font-weight: 500; }
.md .md-sub-desc  { display: inline; color: var(--gray-2); }

/* 用户提问块（对应上面的 p.q，整块浅绿背景 + 左边条） */
.md.q {
    background: var(--primary-light);
    color: var(--primary-dark);
    border: 1px solid transparent;
    border-left: 4px solid var(--primary);
    border-radius: var(--r-md);
    font-weight: 500;
}

/* textarea 在 .md 里只是内容源，渲染 JS 跑完后会把它隐藏；
   如果渲染 JS 还没跑，展示成灰色小字占位，避免页面错位。*/
.md textarea,
.md > textarea {
    display: block;
    width: 100%;
    min-height: 3em;                /* 渲染前占位 */
    color: var(--gray-4);
    font-size: 0.85em;
    padding: 6px;
    border: 1px dashed var(--gray-5);
    background: var(--gray-6);
    box-sizing: border-box;
    resize: vertical;
}
/* 渲染完成标志：当 md 上有 data-rendered=1，textarea 直接隐藏，展示渲染出的 HTML */
.md[data-rendered="1"] textarea,
.md[data-rendered="1"] > textarea { display: none !important; }

/* 长图容器 */
.img {
    text-align: center;
    margin: 18px 0;
    padding: 0;
}
.img img {
    max-width: 100%;
    height: auto;
    display: block;              /* 去掉 inline-block 的 baseline 间隙 */
    margin: 0 auto;
    border-radius: var(--r-md);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

/* 嵌入 iframe 容器（fun-study.htm 封面等） */
.iframe-wrap {
    width: 100%;
    height: 80vh;
    min-height: 420px;
    overflow: hidden;
    margin: 18px 0;
    border: 1px solid var(--gray-5);
    border-radius: var(--r-md);
    background: var(--white);
}
.iframe-wrap iframe {
    width: 100%;
    height: 100%;
    border: 0;
    margin: 0;
    padding: 0;
    overflow: auto;
    outline: none;
    box-sizing: border-box;
    display: block;
}

/* 代码高亮（ai-deepseek.htm 的 code-highlight / code-line / token 系列）兜底样式
   不做真正语法色，只保证不溢出、不乱布局 */
pre code.code-highlight,
.code-highlight {
    display: block;
    padding: 1em;
    background: var(--code-bg);
    color: var(--code-fg);
    border-radius: var(--r-md);
    overflow-x: auto;
    white-space: pre;
    font-family: var(--code-font);
    font-size: var(--code-block-size);
    line-height: 1.7;
    margin: 12px 0;
}
.code-highlight .code-line {
    display: block;
    min-height: 1.2em;
}
.code-highlight .line-number {
    padding-left: 3em;
    position: relative;
}
.code-highlight .line-number::before {
    content: attr(line);
    position: absolute;
    left: 0;
    top: 0;
    width: 2.2em;
    text-align: right;
    color: var(--gray-4);
    user-select: none;
    font-size: 0.9em;
}

/* =====================  响应式：平板 / 手机 (<=640px)  ===================== */
@media (max-width: 640px) {
    body {
        padding: 0 0 32px;
        background: var(--white);
        font-size: 14px;
        line-height: 1.75;
    }

    .container {
        max-width: 100%;
        padding: 16px 14px 24px;
        border-radius: 0;
        box-shadow: none;
    }

    /* 手机上让 md 内容块去掉外框, 内容更宽便于阅读 */
    .md {
        border: none;
        border-radius: 0;
        background: transparent;
        padding: 6px 0;
    }

    .article-header {
        margin-bottom: 20px;
        padding-bottom: 14px;
        gap: 8px 12px;
    }

    .article-title {
        font-size: 1.0rem;
        line-height: 1.4;
    }

    .header-icons {
        font-size: 0.82rem;
    }

    .header-icons .back-link {
        font-size: 0.85rem;
        padding: 4px 10px;
    }

    img.icon {
        width: var(--icon-size-mb);
        height: var(--icon-size-mb);
    }

    pre h1, .pre h1 { font-size: 1.22rem; margin-top: 1.4em; }
    pre h2, .pre h2 { font-size: 1.08rem; }
    pre h3, .pre h3 { font-size: 1rem; }

    pre i, .pre i {
        font-size: 0.80rem;
        padding: 10px 12px;
        border-radius: 6px;
    }

    .code {
        font-size: 0.9em;
        padding: 10px 12px;
    }

    table {
        font-size: 0.9em;
    }

    td, th {
        padding: 7px 9px;
    }

    dl {
        font-size: 0.86rem;
        padding: 12px 14px;
        margin-top: 22px;
    }

    .footer {
        margin-top: 30px;
        padding-top: 16px;
        flex-direction: column;
        text-align: center;
        font-size: 0.82rem;
        gap: 8px;
    }

    p.q, p.a {
        max-width: 92%;
        font-size: 0.92em;
        padding: 7px 13px;
    }

    img.full {
        margin: 14px auto;
        border-radius: 6px;
    }
}

/* =====================  响应式：小屏手机 (<=400px)  ===================== */
@media (max-width: 400px) {
    .container {
        padding: 12px 11px 22px;
        font-size: 14px;   /* 正文底字至少 14px，避免小屏手机上正文/注脚过小 */
    }

    .article-title {
        font-size: 0.96rem;
    }

    .article-header {
        margin-bottom: 16px;
        padding-bottom: 12px;
    }

    pre i, .pre i {
        font-size: 0.78rem;
        padding: 9px 10px;
    }

    code, .code {
        font-size: 0.9em;
    }
}

/* =====================  打印  ===================== */
@media print {
    body {
        background: white;
        padding: 0;
        color: black;
    }
    .container {
        max-width: 100%;
        padding: 0;
        border-radius: 0;
        box-shadow: none;
    }
    .footer, .qr-modal, .header-icons,
    .article-header { display: none !important; }
    pre i, .pre i {
        background: #f5f5f5 !important;
        color: #333 !important;
        border: 1px solid #ddd !important;
        box-shadow: none !important;
    }
    table {
        box-shadow: none !important;
    }
}