@charset "utf-8";
/* ==========================================================================
   原创响应式主题 v3 · 基于线上 A 版（ryj_xhs v2.0.0）视觉基因
   保留：配色令牌 / 毛玻璃顶栏 / 斜体900渐变艺术字+闪烁光标 / 灰胶囊标签云 /
        加载更多 / 分页对爬虫可见
   原创：① 砌墙式卡片瀑布流，图片按原比例不裁、不限制尺寸
        ② 卡片缝隙压到 4px（手机）/ 8–10px（平板桌面），贴近小红书 App
        ③ 每张图输出真实 width/height（cover_dims.json）→ 零 CLS
        ④ 下拉加载 = 随机展示（每次顺序不同），越刷越像发现页
        ⑤ 文章页 PC 双栏（左目录常驻）+ 手机单栏；列表页（首页/分类/主题/标签/搜索）同一套砌墙版式
   ========================================================================== */
:root{
  /* 字体：本机实测装了 HarmonyOS Sans SC（400/500/700 三档真实字重）。
     微软雅黑只有 400/700 两档，写 600 会被浏览器“合成假粗”，中文必发虚 —— 这是质感出不来的根因。 */
  --font:"HarmonyOS Sans SC","HarmonyOS Sans","MiSans","PingFang SC","Source Han Sans SC",
         "Noto Sans CJK SC","Microsoft YaHei UI","Microsoft YaHei",system-ui,-apple-system,
         Roboto,"Helvetica Neue",Arial,sans-serif;
  /* 颜色分层：标题最深 → 正文 → 次级 → meta（不要一个黑贯穿到底） */
  --black:#0f1115; --txt:#2c333d; --txt-2:#5b6472; --txt-3:#98a0ac;
  /* 底色分层：页底压深一档，卡片纯白 —— 白卡浮在浅灰底上才有层次。
     原 --bg 是 #f5f6f7，和 #fff 只差约 10 个色阶；又叠加卡片底色 transparent，
     信息区等于直接透出页底 → 糊成一片、看不出层次（用户 2026-09-10 指出）。 */
  /* 2026-09-13 21:30 用户微调：整站底色 #eef0f3 → #fafafa（卡面仍 #fff）。
     注意：底/卡差值 5/255（原 19）。2026-09-10 曾因 #f5f6f7 与 #fff 差 10 而「糊成一片」，
     但本次用户 2026-09-13 21:36 看过实测对比图后**验收通过**（原话「质感很好」）。
     🔒 已锁死：不得再加描边 / 压深底色 / 改阴影 —— 低对比是用户要的质感，别再"优化"。 */
  --line:#e2e5ea; --line-2:rgba(0,0,0,.14); --bg:#fafafa; --card:#fff;
  --btn:#1a1615; --btn-text:#fff;
  --accent:#4d6bfe; --accent-2:#5b3dfe; --accent-soft:#eef0ff;
  --accent-grad:linear-gradient(135deg,#7b8bff,#4d6bfe);
  --radius:8px; --r-card:4px 4px 0 0; --pad:16px; --maxw:1280px;   /* 卡片：上圆角 4、下直角 */
  --card-shadow:0 1px 2px rgba(0,0,0,.03),0 1px 6px rgba(0,0,0,.04);
  --card-shadow-hover:0 2px 8px rgba(0,0,0,.06),0 12px 28px rgba(0,0,0,.09);
}
html[data-theme="dark"]{
  --black:#f5f5f7; --txt:#e6e7ea; --txt-2:#a1a6b0; --txt-3:#7b8291;
  /* 夜间卡片必须和页底拉开距离。原来 --card:#191a1e 与 --bg:#0b0c0e 只差 14/255，
     在黑屏上看就是「卡片消失了」（用户 2026-09-11：「纯白卡直接没了，太丑了」），
     当时提到 #202329（差约 24/255）才立住边界。
     2026-09-13 21:30 用户微调：--bg #0b0c0e → #141318、--card #202329 → #1a191e（差值 6/255）。
     用户 21:36 看过实测对比图后**验收通过**（原话「质感很好」）。
     🔒 已锁死：不得再加描边 / 压深底色 / 改阴影 —— 边界靠现有 1px rgba(255,255,255,.07)
     亮边 + 阴影即可，别再"优化"。 */
  --line:#2a2d33; --line-2:hsla(0,0%,100%,.18); --bg:#141318; --card:#1a191e;
  --btn:#f5f6f7; --btn-text:#0f1012;
  --accent:#6799fe; --accent-2:#7b8bff; --accent-soft:#1b2036;
  --accent-grad:linear-gradient(135deg,#9db4ff,#6799fe);
  --card-shadow:0 1px 2px rgba(0,0,0,.45),0 1px 6px rgba(0,0,0,.3);
  --card-shadow-hover:0 2px 10px rgba(0,0,0,.5),0 12px 30px rgba(0,0,0,.4);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;
  scrollbar-width:none;-ms-overflow-style:none}      /* 去掉滚动条 */
html::-webkit-scrollbar,body::-webkit-scrollbar{width:0;height:0;display:none}
body{margin:0;background:var(--bg);color:var(--txt);
  font-family:var(--font);font-size:15px;line-height:1.75;letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;font-feature-settings:"kern" 1}
img{max-width:100%;height:auto;display:block;border:0}   /* height:auto 必需：img 带 width/height 属性时否则会按属性高撑变形 */
a{color:inherit;text-decoration:none}
ul,li{list-style:none;margin:0;padding:0}
h1,h2,h3,p,figure{margin:0}   /* figure 必须一起 reset：浏览器默认给 figure 左右各 40px margin */
button{font:inherit;cursor:pointer}

/* ---------------- 顶栏 ---------------- */
.top{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid rgba(0,0,0,.06)}
html[data-theme="dark"] .top{background:rgba(15,16,18,.75);border-bottom-color:rgba(255,255,255,.08)}
.top-in{max-width:var(--maxw);margin:0 auto;padding:10px var(--pad);display:flex;align-items:center;gap:10px}
.brand{display:flex;align-items:center;gap:8px;min-width:0}
/* .brand img 规则随小熊 logo 一起下线，需要时再恢复 */
.ep{font-style:italic;font-weight:700;font-size:20px;letter-spacing:.3px;white-space:nowrap;
  background:var(--accent-grad);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;text-shadow:0 1px 2px rgba(255,255,255,.4)}
html[data-theme="dark"] .ep{text-shadow:none}
.ep::after{content:"_";margin-left:2px;background:none;-webkit-text-fill-color:var(--accent);
  animation:blink 1.1s steps(2,start) infinite}
@keyframes blink{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){.ep::after{animation:none;opacity:1}}
.top-r{margin-left:auto;display:flex;align-items:center;gap:8px}
/* 主题切换：图标按钮（原来那个写着「日间 / 夜间」的胶囊跟搜索框抢戏，收掉） */
.tbtn{width:36px;height:36px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--txt-2)}
.tbtn:hover{color:var(--txt);border-color:var(--line-2)}
.tbtn .sun{display:none} .tbtn .moon{display:block}
html[data-theme="dark"] .tbtn .sun{display:block}
html[data-theme="dark"] .tbtn .moon{display:none}

/* ============ 首页搜索（放在瀑布流上方，全站唯一主入口）============ */
.hsearch{max-width:var(--maxw);margin:0 auto;padding:24px var(--pad) 2px}
.hs-in{max-width:560px;margin:0 auto}
.hs-form{display:flex;align-items:center;height:48px;background:var(--card);
  border:1px solid var(--line);border-radius:12px;padding:0 6px 0 15px;
  box-shadow:0 1px 2px rgba(0,0,0,.03),0 6px 20px rgba(0,0,0,.045);
  transition:border-color .18s ease,box-shadow .18s ease}
.hs-form:hover{border-color:var(--line-2)}
.hs-form:focus-within{border-color:var(--accent);
  box-shadow:0 0 0 4px var(--accent-soft),0 6px 20px rgba(0,0,0,.045)}
.hs-form .ic{flex:0 0 auto;color:var(--txt-3);transition:color .18s ease;line-height:0}
.hs-form:focus-within .ic{color:var(--accent)}
.hs-form input{flex:1 1 auto;min-width:0;border:0;background:none;outline:0;
  font-family:inherit;font-size:15px;color:var(--txt);padding:0 12px}
.hs-form input::placeholder{color:var(--txt-3)}
.hs-form button{flex:0 0 auto;height:36px;padding:0 20px;border:0;border-radius:8px;
  background:var(--btn);color:var(--btn-text);font-family:inherit;font-size:14px;font-weight:500}
.hs-form button:active{transform:translateY(1px)}
.hs-hot{margin:12px 0 0;display:flex;gap:14px;justify-content:center;flex-wrap:wrap;
  font-size:12.5px;color:var(--txt-3)}
.hs-hot b{font-weight:400}
.hs-hot a{color:var(--txt-2);border-bottom:1px dashed var(--line-2);padding-bottom:1px}
.hs-hot a:hover{color:var(--accent);border-bottom-color:var(--accent)}

/* 顶栏只留：熊 logo + 艺术字 + 日夜按钮。☰ 与抽屉已按用户要求去掉（不再需要移动导航） */

/* ================= 砌墙瀑布流（图片按原比例，缝隙最小） ================= */
.list-h1{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.feed{max-width:var(--maxw);margin:0 auto;padding:18px 4px 0;column-count:2;column-gap:4px}
html.hasjs .feed{display:flex;align-items:flex-start;column-count:auto;gap:4px}
.feed .col{flex:1 1 0;min-width:0}
/* 卡片：整张白底（含信息区）——原来 background:transparent，信息区直接透出页底，没有层次 */
.card{break-inside:avoid;display:block;margin:0 0 4px;background:var(--card);
  border-radius:4px 4px 0 0;overflow:hidden;box-shadow:var(--card-shadow);
  transition:box-shadow .2s ease,transform .2s ease}
html.hasjs .card{break-inside:auto}
/* 夜间：仅靠底色差在大屏上仍嫌弱，再补一道极细亮边（0.07 白），卡片边界才立得住 */
html[data-theme="dark"] .card{border:1px solid rgba(255,255,255,.07)}
.card img{width:100%;height:auto;border-radius:4px 4px 0 0;   /* 只上面有 R 角，下面直角（与卡片一致） */
  outline:1px solid rgba(0,0,0,.05);outline-offset:-1px}   /* 极细内描边：浅色图贴白底不糊边 */
.card .ct{padding:9px 10px 11px}
/* 卡片结构：div.card > a.cv(封面) + div.ct(信息区)；标题链接在 h3 里 ——
   三个链接互不嵌套，浏览器不会拆 DOM。 */
.card .cv{display:block}
/* 整卡可点：把标题链接拉伸铺满整张卡（stretched link）。
   卡片从 <a> 改成 <div> 之后，只有图片和标题能点，卡片内边距/空白处点不动 ——
   用户反馈「分类/主题链接不到」就是点在了这些空隙上（2026-09-11）。
   分类链接必须提到覆盖层之上，否则会被吃掉点击。 */
.card{position:relative}
.card h3 a::after{content:"";position:absolute;inset:0}
.card .k{position:relative;z-index:1}
.card h3{font-size:14px;line-height:1.45;font-weight:600;letter-spacing:-.005em;color:var(--black);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card h3 a{color:inherit}
.card .k{display:inline-block;font-size:10.5px;font-weight:500;letter-spacing:.02em;
  color:var(--accent);background:var(--accent-soft);border-radius:3px;padding:1px 6px;margin-bottom:5px}
.card .mt{margin-top:6px;font-size:10px;letter-spacing:.01em;color:var(--txt-3);
  font-variant-numeric:tabular-nums}
@media (hover:hover){.card:hover{box-shadow:var(--card-shadow-hover);transform:translateY(-1px)}}

/* 更多 / 随机 */
.morewrap{max-width:var(--maxw);margin:18px auto 4px;padding:0 var(--pad);text-align:center}
.morewrap button{border:1px solid var(--line);background:var(--card);color:var(--txt-2);
  border-radius:999px;padding:11px 30px;font-size:13.5px;font-weight:500}
.morewrap button:hover{color:var(--accent);border-color:var(--accent)}
.moretip{margin-top:9px;font-size:11.5px;color:var(--txt-3)}

/* ---------------- 分类切换条 ----------------
   带篇数是**正常**的：分类是逐个点进去看的导航入口，不是「一次列全所有方向」的一览页。
   真正要避免的是主题总览那种「28 个受控主题 + 各自篇数」的全貌暴露。 */
.catbar{max-width:var(--maxw);margin:0 auto;padding:16px var(--pad) 0;display:flex;gap:8px;
  flex-wrap:wrap;justify-content:center}
.catbar a{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:999px;
  background:var(--card);border:1px solid var(--line);color:var(--txt-2);font-size:13px;
  transition:background .18s ease,color .18s ease,border-color .18s ease}
.catbar a b{font-weight:500;font-size:11.5px;color:var(--txt-3);font-variant-numeric:tabular-nums}
.catbar a:hover{border-color:var(--line-2);color:var(--txt)}
.catbar a.on{background:var(--accent-soft);border-color:transparent;color:var(--accent)}
.catbar a.on b{color:var(--accent)}
@media (max-width:599px){
  .catbar{gap:7px;padding:12px 12px 0}
  .catbar a{font-size:12.5px;padding:5px 11px}
}

/* ---------------- 分页（分类 / 标签 / 作者页用；首页仍是下拉随机） ----------------
   分页而不是无限加载，是为了让爬虫能顺着 a 标签逐页抓 —— 无限加载的内容只存在于
   JS 里，除了 sitemap 没有别的发现路径，权重也传不下去。 */
.pager{max-width:var(--maxw);margin:26px auto 0;padding:0 var(--pad);
  display:flex;justify-content:center;align-items:center;gap:6px;flex-wrap:wrap}
.pager a,.pager>span{display:inline-flex;align-items:center;justify-content:center;
  min-width:36px;height:36px;padding:0 11px;border-radius:8px;font-size:13.5px;
  background:var(--card);border:1px solid var(--line);color:var(--txt-2);
  font-variant-numeric:tabular-nums;transition:border-color .18s ease,color .18s ease}
.pager a:hover{border-color:var(--line-2);color:var(--txt)}
.pager>span.on{background:var(--btn);border-color:var(--btn);color:var(--btn-text);font-weight:500}
.pager>span.gap{background:none;border:0;color:var(--txt-3);min-width:18px;padding:0}
.pager>span.dis{color:var(--txt-3);opacity:.45}
.pager a.pv,.pager a.nx,.pager>span.pv,.pager>span.nx{padding:0 15px;font-size:13px}
.pginfo{margin:11px 0 0;text-align:center;font-size:12px;color:var(--txt-3);
  letter-spacing:.02em;font-variant-numeric:tabular-nums}
@media (max-width:599px){
  .pager{gap:5px;margin-top:22px}
  .pager a,.pager>span{min-width:33px;height:33px;padding:0 9px;font-size:13px}
  .pager a.pv,.pager a.nx,.pager>span.pv,.pager>span.nx{padding:0 12px}
  .pginfo{font-size:11.5px}
}

/* 【已删除】标签云样式（.tagcloud / .tc-* / #tg）+ 主题卡样式（.tcard）：
   HTML 里对应结构已全部移除，留着是死代码。 */

/* ---------------- 页脚 ---------------- */
/* 2026-09-11 按用户要求重排：三层、全居左、压高度（原来是四层居中堆叠，页脚太高）。
   2026-09-13 21:16 用户再定版：① 署名 + 导航（同一行）  ② © 版权 + 备案名 + 备案号
   ③ 隐私政策（最下）；**页脚内所有字号统一 12.5px**（含窄屏，原为 12/11/10.5 混排）。
   注：本案三层是「逻辑三层」，前两层同一 flex 行内呈现。 */
/* padding:0 是**防御性**声明：旧主题 style.css 曾给 .foot 塞 padding:28px 0 60px
   （白撑高 88px —— 用户连说两次「页脚太高」的真凶）。旧规则已删，这里再兜一层。 */
.foot{background:var(--card);border-top:1px solid var(--line);margin-top:20px;
  padding:0;text-align:left}
.foot-in{max-width:var(--maxw);margin:0 auto;padding:11px var(--pad) 13px;text-align:left}
/* 第 1 层：品牌 + 导航同行，全部左对齐（用户 2026-09-11：都居左） */
.foot-row{display:flex;flex-wrap:wrap;align-items:center;gap:4px 16px}
.foot-tag{font-size:12px;color:var(--txt-3);letter-spacing:.02em}
.foot-tag a:hover{color:var(--accent)}
.foot-links{display:flex;align-items:center;gap:8px;font-size:12.5px;
  color:var(--txt-2);flex-wrap:wrap}
.foot-links a:hover{color:var(--accent)}
.foot-links i{font-style:normal;color:var(--line-2)}
/* 第 3 层：隐私政策（Cookie）—— 现位于版权行**之后**（2026-09-13 调序）。
   与线上 A 版口径一致（只保留必要 Cookie，不做追踪/画像），
   换主题不能把这句丢掉。用户 2026-09-11：不人为断行、左对齐、不设 max-width ——
   PC 一行放得下就不折行；手机屏宽物理上放不下（整句约 690px > 视口），自然折行。 */
.foot-note{margin:5px 0 0;font-size:12.5px;line-height:1.62;
  color:var(--txt-3);text-align:left}
/* 第 2 层：© 版权 + 备案名 + 备案号（2026-09-13 提到隐私政策之前）。
   展示口径（用户令）：**容易专享 = 备案名，取 .Site.Params.filingName**；
   备案号 蜀ICP备16006979号-2 必须一直保留。 */
.foot-copy{margin-top:5px;font-size:12.5px;line-height:1.62;color:var(--txt-3);
  letter-spacing:.01em}
.foot-copy a{color:var(--txt-3);border-bottom:1px solid var(--line-2);padding-bottom:1px}
.foot-copy a:hover{color:var(--accent);border-bottom-color:var(--accent)}
@media (max-width:599px){
  .foot-in{padding:10px var(--pad) 12px}
  .foot-note{font-size:12.5px;line-height:1.58}
  .foot-copy{font-size:12.5px;margin-top:4px}
}

/* ---------------- 文章页：PC 双栏（左目录常驻 / 右正文）、手机单栏 ---------------- */
/* 面包屑：末项 = 当前页标题（可单行截断，不换行、不撑破） */
.crumb{display:flex;align-items:baseline;min-width:0;max-width:var(--maxw);margin:0 auto;
  padding:14px var(--pad) 0;font-size:12.5px;color:var(--txt-3)}
.crumb a,.crumb span,.crumb i{white-space:nowrap}
.crumb a{flex:0 0 auto;color:var(--txt-2)}
.crumb i{flex:0 0 auto;font-style:normal;margin:0 6px;color:var(--line-2)}
.crumb .now{overflow:hidden;text-overflow:ellipsis;min-width:0;color:var(--txt-2)}
.post-wrap{display:grid;grid-template-columns:minmax(0,1fr)}

/* 目录：手机端折叠成一条（checkbox 切换，零 JS）；≥1000px 变成左栏常驻 sticky */
.toc{padding:16px var(--pad) 0}
.toc>input{display:none}
.toc-h{display:flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--line);
  border-radius:8px;padding:11px 14px;font-size:13.5px;font-weight:500;color:var(--txt-2);
  cursor:pointer;box-shadow:var(--card-shadow)}
.toc-h .n{margin-left:auto;font-size:11.5px;font-weight:400;color:var(--txt-3)}
.toc-h .ar{line-height:0;color:var(--txt-3);transition:transform .22s ease}
.toc-l{max-height:0;overflow:hidden;background:var(--card);border-radius:0 0 8px 8px;
  box-shadow:var(--card-shadow);transition:max-height .26s ease}
.toc-l ol{padding:7px 0 11px}
.toc-l a{display:block;padding:7px 16px;font-size:13px;color:var(--txt-2)}
.toc>input:checked ~ .toc-l{max-height:62vh;overflow:auto}
.toc>input:checked ~ .toc-h .ar{transform:rotate(180deg)}

/* 正文白卡：和列表页白卡同一套语言 —— 页底浅灰、内容白底浮起。
   左右各留 10px 让它浮起来；≥1000px 双栏时由 .post-wrap>.post 接管（贴满右列）。 */
.post{min-width:0;max-width:820px;width:calc(100% - 20px);margin:12px auto 0;
  padding:18px 16px 32px;background:var(--card);border-radius:var(--radius);
  box-shadow:var(--card-shadow)}
.p-h1{font-size:21px;line-height:1.34;font-weight:700;letter-spacing:-.022em;color:var(--black)}
.p-mt{display:flex;gap:14px;flex-wrap:wrap;margin:11px 0 18px;color:var(--txt-3);
  font-size:12px;letter-spacing:.02em;font-variant-numeric:tabular-nums}
.p-hero{margin:0 0 20px;border-radius:var(--radius) var(--radius) 0 0;overflow:hidden}   /* 用户 2026-09-11：只改图片下方为直角，上方 R 角保留 */
.p-hero img{width:100%;height:auto;outline:1px solid rgba(0,0,0,.05);outline-offset:-1px}
/* 正文字号对齐「直接回答」胶囊（.cap p：桌面 15px / 手机 14px）——
   用户 2026-09-11：「正文页字号太大了，正文以『直接回答』的字号为准」。
   原来正文 15.5px，比答案胶囊还大一号。 */
.p-c{font-size:15px;line-height:1.8;color:var(--txt);letter-spacing:.012em}
.p-c p{margin:0 0 16px}
/* 正文分节标题。
   ⚠️ 关键坑：markdown 渲染出来的 h2/h3 **不带任何 class**（不是 <h2 class="p-h2">），
   原来只写了 .p-h2，对正文完全无效 —— 正文标题一直在吃浏览器默认值
   （h2≈22.5px / h3≈17.5px，都比正文 15px 大一大截，层级倒挂、看着"没精致感"）。
   现在按标签直接定样式；.p-h2 保留兼容模板里手写的 h2。
   scroll-margin-top 保证左侧目录锚点跳过去时不被 sticky 顶栏压住。 */
.p-c h2,.p-h2{margin:32px 0 12px;font-size:17px;line-height:1.5;font-weight:700;
  letter-spacing:-.014em;color:var(--black);scroll-margin-top:76px}
.p-c h2:first-child,.p-h2:first-child{margin-top:0}
/* FAQ 的 Q 就是正文 h3：与正文同档（15px），靠字重和颜色区分，不再比正文还大 */
.p-c h3{margin:22px 0 9px;font-size:15px;line-height:1.6;font-weight:500;
  letter-spacing:0;color:var(--black);scroll-margin-top:76px}
.p-c h3:first-child{margin-top:0}
.p-c h4{margin:18px 0 8px;font-size:14.5px;line-height:1.6;font-weight:500;color:var(--txt)}
.p-c strong,.p-c b{font-weight:500;color:var(--black)}
.p-c a{color:var(--accent);border-bottom:1px solid var(--accent-soft)}
.p-c blockquote{margin:0 0 16px;padding:2px 0 2px 14px;border-left:2px solid var(--line-2);
  color:var(--txt-2)}
.p-c blockquote p{margin:0}
.p-c hr{margin:26px 0;border:0;border-top:1px solid var(--line)}
.p-c img{margin:0 0 16px;border-radius:var(--radius)}
.p-tags{display:flex;gap:8px;flex-wrap:wrap;margin:24px 0 0}
.p-tags a{font-size:12.5px;font-weight:500;color:var(--accent);background:var(--accent-soft);
  border-radius:999px;padding:4px 12px}
/* 文末作者条：机构口吻的文字说明，不做头像卡（避免博客感）。
   署名 + 一句来源口径 + 导到「关于与联系」，是 E-E-A-T 里最省事的一环。
   公众号入口并进同一块：署名叫「谁写的」，公众号答「他还在哪写」—— 语义连续，
   而且读者读到这里说明内容已经被消费完，是转化意愿最高的位置。 */
.p-author{margin:28px 0 0;padding:14px 0 0;border-top:1px solid var(--line);
  font-size:13px;line-height:1.78;color:var(--txt-2)}
.p-author b{color:var(--txt);font-weight:500}
.p-author a{color:var(--accent);white-space:nowrap}   /* 别让「→」被拆到下一行 */
/* 署名里的作者名也链到作者页（用户 2026-09-11：「作者页呢？内链呢？」）。
   必须用 .p-au 覆盖上面的 .p-author a —— 否则作者名会跟着变成 accent 蓝、且 nowrap。 */
.p-author a.p-au{color:inherit;white-space:normal}
.p-author a.p-au:hover{color:var(--accent)}
.p-gzh{margin-top:9px;display:flex;align-items:center;gap:7px;font-size:13px;
  color:var(--txt-2);flex-wrap:wrap}
.p-gzh .ic{flex:0 0 auto;line-height:0;color:var(--accent)}
.p-gzh b{color:var(--txt);font-weight:500}
.p-gzh i{font-style:normal;color:var(--line-2)}

/* 公众号转化卡：**模板级**，每篇文章页文末自动输出（不是编辑手加）。
   位置沿用线上 A 版：正文 → 标签 → 署名 → 公众号卡 → 上下篇。
   视觉按新主题重做：去掉 800 假粗、标签胶囊从 accent 色改成浅灰小块（降色噪）、
   圆角/描边/投影跟站点白卡同一套令牌。 */
.gzh-cta{margin:26px auto 0;max-width:520px;background:var(--card);border:1px solid var(--line);
  border-radius:12px;padding:22px 20px 18px;text-align:center;box-shadow:var(--card-shadow)}
.gzh-tag{display:inline-block;font-size:11px;font-weight:500;letter-spacing:.06em;color:var(--accent);
  background:var(--accent-soft);border-radius:999px;padding:3px 11px}
.gzh-h{margin:11px 0 7px;font-size:17px;line-height:1.4;font-weight:700;
  letter-spacing:-.018em;color:var(--black)}
.gzh-d{margin:0 0 13px;font-size:13px;line-height:1.72;color:var(--txt-2)}
.gzh-ks{display:flex;justify-content:center;gap:6px;flex-wrap:wrap;margin-bottom:15px}
.gzh-ks span{font-size:11.5px;color:var(--txt-2);background:var(--bg);border-radius:6px;padding:3px 9px}
.gzh-qr{display:inline-block;background:var(--card);border:1px solid var(--line);
  border-radius:12px;padding:6px;line-height:0}
.gzh-qr img{display:block;border-radius:8px}
.gzh-tip{margin-top:11px;font-size:11.5px;color:var(--txt-3);letter-spacing:.02em}
@media (max-width:599px){
  .gzh-cta{margin-top:22px;padding:19px 16px 16px;border-radius:10px}
  .gzh-h{font-size:16px}
  .gzh-d{font-size:12.5px}
}
/* 广告位：**位置由模板固定，内容由 JS 从后台配置渲染**。
   后台没配这个槽 → JS 把整块移除，不留空位、不留占位框。
   （样张里带 data-debug="1"，未配置的槽会显示虚线占位以便看位置。） */
.ad-slot{margin:24px 0}
/* 广告卡嵌在正文白卡里，所以**不能用白底**（.post 也是 #fff，会隐形）。
   用页底那档浅灰做底，在白卡里才看得出是一块独立区域。 */
.ad-live{background:var(--bg);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.ad-in{display:flex;align-items:center;gap:14px;padding:15px 16px}
.ad-tx{min-width:0;flex:1 1 auto}
.ad-k{display:inline-block;font-size:10.5px;font-weight:500;letter-spacing:.04em;
  color:var(--txt-3);background:var(--bg);border-radius:3px;padding:1px 6px;margin-bottom:6px}
.ad-t{font-size:14.5px;font-weight:500;line-height:1.4;color:var(--black)}
.ad-d{margin-top:3px;font-size:12.5px;line-height:1.6;color:var(--txt-2)}
.ad-btn{flex:0 0 auto;background:var(--btn);color:var(--btn-text);border-radius:999px;
  padding:7px 15px;font-size:12.5px;font-weight:500;white-space:nowrap}
/* 样张专用：未配置时的位置示意（生产环境这块会被整块移除） */
.ad-ph{border:1px dashed var(--line-2);border-radius:10px;padding:18px 16px;
  background:var(--bg);text-align:center}
.ad-ph .ad-lb{display:inline-block;font-size:11px;font-weight:500;letter-spacing:.06em;
  color:var(--txt-3);background:var(--card);border:1px solid var(--line);
  border-radius:999px;padding:3px 10px}
.ad-ph .ad-n{margin-top:9px;font-size:12px;color:var(--txt-3)}
@media (max-width:599px){
  .ad-in{gap:10px;padding:14px 13px}
  .ad-t{font-size:13.5px}
  .ad-d{font-size:12px}
  .ad-btn{padding:6px 12px;font-size:12px}
}
.p-next{display:flex;flex-direction:column;margin-top:28px;border-top:1px solid var(--line)}
.p-next a{padding:14px 0;font-size:13.5px;color:var(--txt-2);border-bottom:1px solid var(--line)}
.p-next a b{color:var(--black);font-weight:500}

/* ---------------- 关于与联系（单一页面） ---------------- */
.ab-lead{font-size:16px;line-height:1.82;color:var(--txt);margin:0 0 6px}
.ab-h{margin:28px 0 12px;font-size:16px;font-weight:500;color:var(--black);letter-spacing:-.01em}
.p-c ul{margin:0 0 16px;padding:0;list-style:none}
.p-c ol{margin:0 0 16px;padding-left:20px}
.p-c li{position:relative;padding-left:17px;margin:0 0 8px;font-size:15px;line-height:1.8}
.p-c ul>li::before{content:"";position:absolute;left:2px;top:.72em;width:4px;height:4px;
  border-radius:50%;background:var(--accent)}
.p-c ol>li{padding-left:0}
.p-c li:last-child{margin-bottom:0}
.ab-box{margin:14px 0 0;border:1px solid var(--line);border-radius:var(--radius);
  padding:18px 20px;background:var(--card);box-shadow:0 1px 2px rgba(0,0,0,.02)}
.ab-box h3{margin:0 0 12px;font-size:15px;font-weight:500;color:var(--black)}
.ab-files div{margin:7px 0;font-size:13.5px;color:var(--txt-2);line-height:1.7}
.ab-files b{color:var(--black);font-weight:500}
.ab-todo{display:inline-block;font-size:11px;color:#a1641a;background:#fffaf0;
  border:1px solid #f0d9a8;border-radius:3px;padding:0 6px;margin-left:6px}
@media (max-width:599px){
  .ab-lead{font-size:15px;line-height:1.8}
  .ab-h{font-size:15px;margin:24px 0 10px}
  .p-c li{font-size:14px}
  .p-c{font-size:14px}   /* 手机端正文与「直接回答」同为 14px */
  .ab-box{padding:15px 16px}
}

/* ---------------- 作者页（简介卡 + 全量记录，砌墙 + 分页） ---------------- */
.au-hero{max-width:var(--maxw);margin:0 auto;padding:18px var(--pad) 0}
.au-in{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:24px 22px;box-shadow:var(--card-shadow)}
.au-top{display:flex;align-items:center;gap:14px;margin-bottom:15px}
.au-av{flex:0 0 auto;width:52px;height:52px;border-radius:14px;background:var(--accent-soft);
  color:var(--accent);display:flex;align-items:center;justify-content:center;
  font-size:22px;font-weight:700;line-height:1}
.au-h1{margin:0;font-size:22px;font-weight:700;letter-spacing:-.022em;color:var(--black);line-height:1.3}
.au-sub{margin-top:4px;font-size:12.5px;color:var(--txt-3);letter-spacing:.02em}
.au-d{margin:0 0 11px;font-size:14.5px;line-height:1.85;color:var(--txt)}
.au-meta{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:12.5px;
  color:var(--txt-3);border-top:1px solid var(--line);padding-top:13px;margin-top:15px}
.au-meta a{color:var(--accent)}
.au-meta i{font-style:normal;color:var(--line-2)}
.au-sec{display:flex;align-items:baseline;gap:10px;max-width:var(--maxw);
  margin:30px auto 0;padding:0 var(--pad);font-size:16px;font-weight:700;
  letter-spacing:-.015em;color:var(--black)}
.au-sec .n{font-size:12px;font-weight:400;color:var(--txt-3);letter-spacing:.02em}
@media (max-width:599px){
  .au-hero{padding:12px 10px 0}
  .au-in{padding:19px 16px;border-radius:10px}
  .au-av{width:46px;height:46px;font-size:19px;border-radius:12px}
  .au-h1{font-size:19px}
  .au-d{font-size:14px;line-height:1.82}
  .au-sec{font-size:15px;margin-top:24px;padding:0 12px}
}

/* ---------------- 断点 ---------------- */
@media (max-width:599px){
  .card h3{-webkit-line-clamp:3}
  .feed{padding-top:14px}
  .hsearch{padding:14px 12px 2px}
  .hs-form{height:44px;border-radius:10px;padding:0 5px 0 13px}
  .hs-form input{font-size:14px;padding:0 10px}
  .hs-form button{height:34px;padding:0 16px;font-size:13.5px}
  .hs-hot{font-size:12px;gap:10px;margin-top:10px}
  .p-h1{font-size:19px}
  .p-c h2,.p-h2{font-size:16px;margin:26px 0 11px}
  .p-c h3{font-size:14px;margin:18px 0 8px}
  .post{padding:16px 15px 26px;margin-top:10px}
}
@media (min-width:600px){
  /* 缝隙收到 6px、标题收到 14px/1.35（对齐小红书实测的 14px；行高略松一点保中文可读） */
  .feed{column-count:2;column-gap:6px;padding:10px 6px 0}
  html.hasjs .feed{gap:6px}
  .card{margin-bottom:6px;background:var(--card);border-radius:var(--r-card);box-shadow:var(--card-shadow)}
  .card .ct{padding:11px 12px 13px}
  .card h3{font-size:14px;line-height:1.45;font-weight:600}
  .card .k{font-size:11px;padding:1px 7px;margin-bottom:6px}
  .card .mt{margin-top:7px;font-size:10.5px}
}
@media (min-width:900px){
  .feed{column-count:3;column-gap:6px;padding:12px 6px 0}
  html.hasjs .feed{gap:6px}
  .card{margin-bottom:6px}
  .p-h1{font-size:26px;letter-spacing:-.026em}
  .p-next{flex-direction:row;gap:20px}
  .p-next a{flex:1 1 0;min-width:0;border-bottom:0}
  .p-next a.nx{text-align:right}
}
/* PC 双栏：左目录常驻 sticky（≥1000px），手机端目录折叠成一条 */
@media (min-width:1000px){
  .post-wrap{max-width:1120px;margin:0 auto;padding:26px var(--pad) 48px;
    grid-template-columns:206px minmax(0,1fr);gap:46px;align-items:start}
  .toc{padding:0;position:sticky;top:74px}
  .toc-h{border:0;background:none;box-shadow:none;padding:0 0 9px;cursor:default;
    font-size:11.5px;font-weight:500;letter-spacing:.06em;color:var(--txt-3)}
  .toc-h .n,.toc-h .ar{display:none}
  .toc-l,.toc>input:checked ~ .toc-l{max-height:none;overflow:visible;background:none;
    box-shadow:none;border-radius:0;transition:none}
  .toc-l ol{padding:0;border-left:1px solid var(--line)}
  .toc-l a{padding:6px 0 6px 13px;margin-left:-1px;font-size:12.5px;line-height:1.5;
    border-left:2px solid transparent}
  .toc-l a:hover{color:var(--txt)}
  .toc-l a.on{color:var(--accent);border-left-color:var(--accent);font-weight:500}
  /* 双栏里的正文：贴满右列，不需要再居中/留边 */
  .post-wrap>.post{max-width:none;width:auto;margin:0;padding:30px 34px 44px}
}
@media (min-width:1280px){ .feed{column-count:4;column-gap:6px;padding:12px 6px 0} html.hasjs .feed{gap:6px} }


/* ==========================================================================
   baseof 的 <main class="wrap"> 带旧 CSS 的 max-width:1080px / padding:0 24px，
   会把定稿的 1280 砌墙夹窄、还会叠加一层内距。
   定稿里每个区块自带内距（.feed / .post-wrap / .hsearch 各自有 padding），
   所以这里解除外壳约束。
   ========================================================================== */
.wrap{max-width:none;padding:0}


/* ==========================================================================
   正文里没有 h2 时（.post-wrap 不带目录列），不能让两列栅格把正文挤进
   206px 的第一列 —— 这时改成单列。
   ========================================================================== */
.post-wrap.no-toc{grid-template-columns:minmax(0,1fr)}
@media (min-width:1000px){ .post-wrap.no-toc{grid-template-columns:minmax(0,1fr)} }


/* ==========================================================================
   搜索结果（static/js/search.js 产出，class 固定不可改名）
   .search-results 预留高度 → 结果逐行插进来不会把页面顶下去（目标 CLS=0）
   ========================================================================== */
.search-results{max-width:var(--maxw);margin:0 auto;padding:6px var(--pad) 0;min-height:320px}
.s-meta{padding:8px 0 12px;font-size:12.5px;color:var(--txt-3)}
.s-item{display:block;background:var(--card);border-radius:var(--r-card);
  box-shadow:var(--card-shadow);padding:14px 16px;margin:0 0 8px;transition:box-shadow .2s ease}
.s-item:hover{box-shadow:0 2px 10px rgba(0,0,0,.07)}
.s-title{font-size:15px;line-height:1.5;font-weight:500;color:var(--black)}
.s-cat{display:inline-block;margin-top:5px;font-size:10.5px;color:var(--accent);
  background:var(--accent-soft);border-radius:3px;padding:0 5px}
.s-ex{margin-top:6px;font-size:12.5px;line-height:1.7;color:var(--txt-2);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.s-empty{padding:20px 0;font-size:13.5px;color:var(--txt-3)}