/* 见月2 · 主题样式
─────────────────────────────────────────────────────────────
这份文件是**主题层的样式**，核心 `/css/main.css` 由布局单独 link 一条，
两条同时加载、核心在前（层叠顺序：核心 → 主题）。
⚠️ 不要在这里写 `@import url("/css/main.css")`。
2026-11-12 之前就是这么做的，它的代价是**串行往返**：浏览器必须先拿到这一份、
解析出 @import，才知道还要下 155 KB 的核心表。实测首屏 FCP 880ms 里，
有 130ms 纯粹是这一个多余往返（两个 RTT 叠成两个）。
拆成两条 后两者并行开始，省掉整次往返。
保留 @import 的那种写法时，继承关系看着更「自洽」，但那是给人看的，
浏览器不认：CSS 的 @import 永远是阻塞链，不是并行预加载。
策略仍然是三步（只是第 1 步搬到了布局里）：
继承核心（内容级组件） → 重定义 token → 覆盖外壳与首页版式
设计依据：Ardot「首页 · 见月博客」（1440 宽画板）。所有像素值都取自设计稿，
不是估的：容器 1200 + 两侧 120、页头 68、Hero 面板 r28/pad 40×64、
主推封面 470、网格三列 384 + gap 24、页脚 navy #1C2740。
2026-11-12 两处偏离画板，都在第 12 节：
· Hero 右侧那组星点 + 四角星 + 字标是纯装饰，去掉后面板只剩文案；
· 首页改成「主列 872 + 侧栏 300」，主推封面收 340、网格收两列。
与见月的差别只有三处，别的一律不动：
1. 页面底从 #F7F8FC 变纯白（设计稿没有光斑，`body::after` 关掉）
2. 强调色从 #5B6BF5 换 #3B49C6，且一律实心（取消渐变）
3. 首页换成 Hero 版式，页脚从一行版权换成深底三栏
========================================================================== */
/* 1. 设计令牌 ------------------------------------------------------------- */
:root{
/* 容器：max-width 含左右 padding，所以 1240 - 40 = 1200 正文宽。
视口 1440 时两侧各留 (1440-1240)/2 + 20 = 120，与设计稿的 120 完全对齐。 */
--maxw:1240px;
--brand:#3B49C6; /* 设计稿强调色，比见月的 #5B6BF5 更深一档 */
/* 下面四个是主色的派生色，原先散落成 #3240B4 / #EEF0FB / #E2E6F9 / #9AA6FF
字面量。主题选项改主色时由 theme_option_css() 一并注入新值 ——
不收进变量的话，改了主色按钮 hover 还是旧蓝，等于「假配置」。 */
--brand-hover:#3240B4;
--brand-soft:#EEF0FB;
--brand-soft-2:#E2E6F9;
--brand-ink:#9AA6FF;
--ink:#1F2430;
--text:#5F6675; /* 4.9:1 on #fff，正文次要信息刚好过 AA */
--muted:#9096A6;
--line:#E8E9EE;
--bg:#fff;
--surface:#fff;
/* 设计稿所有按钮/胶囊/当前页码都是实心色块，没有渐变，这里直接把渐变压平 */
--brand-grad:#3B49C6;
/* 深底区（Hero 面板 / 页脚）专用色，别处不要用 */
--navy:#1C2740;
--navy-line:#2C3A58;
--navy-text:#9AA4BF;
/* 卡片阴影只有主推那一张有：offset 6 / blur 24 / spread -4，色相取 ink 的蓝 */
--shadow:0 6px 24px -4px rgba(30,38,64,.06);
--radius:12px; /* 网格卡 */
--radius-lg:16px; /* 主推卡 */
}
/* 2. 外壳 ---------------------------------------------------------------- */
body{background:#fff}
/* 设计稿是纯白平底，没有见月那两团品牌色光斑 */
body::after{display:none}
.wrap{padding:0 20px}
/* ---- 2.1 页头 ---- */
.site-head{background:rgba(255,255,255,.9);border-bottom:1px solid var(--line);
backdrop-filter:saturate(140%) blur(12px)}
/*
* 三个子元素是 space-between 分布，不是「导航 flex:1 靠右」。
* 量过设计稿：品牌右缘 192 → 导航左缘 540（空 348），导航右缘 755 → 搜索左缘 1100（空 345）。
* 两段空白相等，说明中间那个导航是被两端空白推着居中的，不是贴着右边。
*/
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;
gap:24px;min-height:68px;padding:0 20px;flex-wrap:wrap}
.site-head .brand{gap:10px;color:var(--ink)}
.site-head .brand-name{font-size:20px;font-weight:700;letter-spacing:.01em;
color:var(--ink);white-space:nowrap}
/* 月亮字形：26 的方框里放 20 的图形，和设计稿「26 框 / 19.46 矢量」对齐 */
.j2-moon{display:inline-flex;align-items:center;justify-content:center;
width:26px;height:26px;flex:none;color:var(--brand)}
.j2-moon svg{width:20px;height:20px;display:block}
/* 导航整排：不被拉伸，靠父级 space-between 定位 */
.site-head .nav{display:flex;align-items:center;gap:32px;
flex:0 1 auto;min-width:0;margin-left:0}
.site-head .nav a{padding:0;border-radius:0;font-size:15px;font-weight:400;
color:var(--text);line-height:1.6;white-space:nowrap}
.site-head .nav a:hover{color:var(--brand);background:none}
/* 当前页：设计稿里「首页」是品牌色 + Medium，其余是灰 */
.site-head .nav a.is-current{color:var(--brand);font-weight:500}
.site-head .nav-drop-toggle{padding:0;font-size:15px;color:var(--text)}
.site-head .nav-drop>a{padding:0}
.site-head .nav-drop>a:hover,.site-head .nav-drop-toggle:hover,
.site-head .nav-drop:focus-within>a,
.site-head .nav-drop:focus-within>.nav-drop-toggle{background:none;color:var(--brand)}
/* 登录态那几个附加项：同一条 15px 基线，不加药丸底 */
.site-head .nav-user,.site-head .nav-account{font-size:15px;color:var(--text);
padding:0;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.site-head .nav-user:hover,.site-head .nav-account:hover{color:var(--brand);background:none}
.site-head .nav-logout button{font-size:15px;color:var(--text);padding:0}
.site-head .nav-logout button:hover{color:var(--brand);background:none}
/* ---- 2.2 页头搜索：220×36 圆角药丸，放大镜用 data-uri 画 ---- */
.head-search{margin:0}
.head-search .search-box{position:relative;display:flex;align-items:center;
width:220px;height:36px;margin:0;padding:0 14px 0 38px;
background:#F3F4F6;border:0;border-radius:18px;gap:8px}
.head-search .search-box:focus-within{background:#EFF1F4;
box-shadow:0 0 0 3px rgba(59,73,198,.12)}
.head-search .search-box::before{content:"";position:absolute;left:14px;top:50%;
width:15px;height:15px;transform:translateY(-50%);pointer-events:none;
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%239096A6' stroke-width='1.4'%3E%3Ccircle cx='7' cy='7' r='4.6'/%3E%3Cpath d='M10.5 10.5 14 14' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/15px 15px}
.head-search .search-box input{width:100%;height:100%;padding:0;border:0;
background:none;font-size:13px;color:var(--ink);box-shadow:none}
.head-search .search-box input::placeholder{color:var(--muted)}
.head-search .search-box input:focus{box-shadow:none}
/* 设计稿没有「搜索」按钮：单个输入框的表单按回车即可提交，按钮只为无 JS 兜底而留 */
.head-search .search-box button{display:none}
.head-search-link{padding:0;font-size:15px;color:var(--text);border-radius:0}
.head-search-link:hover{color:var(--brand);background:none}
/* 3. 首页 · Hero ---------------------------------------------------------- */
/*
* 设计稿的纵向关系：页头底边 69 → Hero 面板顶边 109，中间只有 Hero 自己的 40 内边距。
* 但 main.wrap 自带 padding-top:30（核心给文章页/列表页留的呼吸），首页要把它清掉，
* 否则整页比设计稿低 30px。只对「第一个孩子是 Hero」的页面清，
* 文章页与分类页仍走核心那套间距；:has 不被支持时只是多 30px，不会错版。
*/
main.wrap:has(> .j2-hero){padding-top:0}
.j2-hero{padding:40px 0}
/* 面板 = 左侧文案 + 右侧品牌标（300×180 的定位区，字标在正中） */
.j2-hero-panel{display:flex;align-items:center;gap:56px;
padding:40px 64px;background:var(--navy);border-radius:28px;overflow:hidden}
.j2-hero-copy{display:flex;flex-direction:column;gap:20px;flex:1;min-width:0}
/* 眉题：10% 白的半透明底，不是实心白 —— 实心会在深底上切出一块硬边 */
.j2-eyebrow{align-self:flex-start;margin:0;padding:8px 16px;border-radius:999px;
background:rgba(255,255,255,.1);color:var(--brand-ink);font-size:13px;font-weight:500;
line-height:1.4;letter-spacing:.02em}
.j2-hero-title{margin:0;font-size:40px;font-weight:700;line-height:56px;
letter-spacing:-.01em;color:#fff}
.j2-hero-title .is-accent{color:var(--brand-ink)}
/*
* 右侧品牌标。
* 2026-11-12：用户要求「去掉装饰」指的是那组星点，字标（logo）要留着 ——
* 所以 .j2-mark 这个 300×180 的定位区还在，只是里面不再画圆点和四角星，
* 只剩字标。字标 190×66 压在 left:55/top:57，正好是这个区域的视觉正中。
*/
.j2-mark{position:relative;flex:0 0 300px;width:300px;height:180px}
.j2-wordmark{position:absolute;left:55px;top:57px;width:190px;height:66px;
object-fit:contain}
/* 4. 首页 · 分类胶囊 ------------------------------------------------------ */
.j2-pills{display:flex;align-items:center;gap:10px;padding:4px 0 20px;
overflow-x:auto;scrollbar-width:none}
.j2-pills::-webkit-scrollbar{display:none}
.j2-pill{flex:none;padding:7px 18px;border-radius:999px;border:1px solid #E4E7ED;
background:#fff;color:var(--text);font-size:13px;line-height:1.5;white-space:nowrap;
transition:.18s var(--ease,#ease)}
.j2-pill:hover{border-color:#C9CEE0;color:var(--ink)}
.j2-pill.is-on{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:500}
/* 5. 首页 · 区块标题行 ---------------------------------------------------- */
.j2-sec{display:flex;align-items:baseline;justify-content:space-between;
gap:16px;padding:28px 0 8px}
.j2-sec h2{margin:0;font-size:22px;font-weight:700;color:var(--ink);line-height:1.4}
.j2-sec-more{font-size:14px;color:var(--brand);white-space:nowrap}
.j2-sec-more:hover{text-decoration:underline}
/* 6. 首页 · 主推卡 -------------------------------------------------------- */
.j2-lead{display:flex;margin:0 0 24px;overflow:hidden;
background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
box-shadow:var(--shadow)}
/*
* 封面必须是绝对定位的图。
* ![]()
不脱离文档流时会按固有比例把整行撑高（470 宽的图 16:9 → 264，看起来还行，
* 但竖图能撑到 700+），主推就变成一张图 + 一行字。这里给容器定基宽、给图定 inset:0。
*
* 基宽 470 = 设计稿原值。首页是通栏 1200（没有侧栏），470 + 730 的右文刚好放下 25px 三行标题。
*/
.j2-lead-media{position:relative;flex:0 0 470px;min-height:300px;
background:var(--brand-soft);overflow:hidden}
.j2-lead-media img{position:absolute;inset:0;width:100%;height:100%;
object-fit:cover;transition:transform .5s var(--ease,#ease)}
.j2-lead:hover .j2-lead-media img{transform:scale(1.03)}
.j2-lead-body{display:flex;flex-direction:column;gap:14px;
padding:36px 40px;min-width:0}
.j2-chip{align-self:flex-start;padding:4px 12px;border-radius:6px;
background:var(--brand-soft);color:var(--brand);font-size:12px;font-weight:500;
line-height:1.5}
.j2-chip:hover{background:var(--brand-soft-2)}
.j2-lead-title{margin:0;font-size:25px;font-weight:700;line-height:36px;color:var(--ink)}
.j2-lead-title a{color:inherit}
.j2-lead-title a:hover{color:var(--brand)}
.j2-lead-ex{margin:0;font-size:15px;line-height:26px;color:var(--text);
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.j2-lead-meta{margin:0;font-size:13px;color:var(--muted);line-height:1.6}
/* 按钮吸在底部：摘要被 clamp 成两行后剩余空间不固定，靠 margin-top:auto 压到底 */
.j2-lead-btn{margin-top:auto;align-self:flex-start;padding:10px 22px;border-radius:8px;
background:var(--brand);color:#fff;font-size:14px;font-weight:500;line-height:1.4;
transition:.18s var(--ease,#ease)}
.j2-lead-btn:hover{background:var(--brand-hover);transform:translateY(-1px)}
/* 7. 首页 · 文章网格 ------------------------------------------------------ */
.j2-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.j2-card{display:flex;flex-direction:column;min-width:0;overflow:hidden;
background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
transition:.2s var(--ease,#ease)}
.j2-card:hover{border-color:#CFD5E6;transform:translateY(-2px);
box-shadow:0 10px 28px -10px rgba(30,38,64,.12)}
.j2-card-media{position:relative;display:block;height:186px;background:var(--brand-soft);overflow:hidden}
.j2-card-media img{position:absolute;inset:0;width:100%;height:100%;
object-fit:cover;transition:transform .5s var(--ease,#ease)}
.j2-card:hover .j2-card-media img{transform:scale(1.04)}
.j2-card-body{display:flex;flex-direction:column;gap:8px;flex:1;
padding:16px 18px 18px}
.j2-card-cat{align-self:flex-start;font-size:12px;font-weight:500;color:var(--brand);
line-height:1.5}
.j2-card-title{margin:0;font-size:17px;font-weight:700;line-height:26px;color:var(--ink);
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.j2-card-title a{color:inherit}
.j2-card-title a:hover{color:var(--brand)}
/* 元信息吸底：标题一行或两行时卡片高度会差 26px，不吸底同排的日期就参差不齐 */
.j2-card-meta{margin:auto 0 0;font-size:12px;color:var(--muted);line-height:1.6}
/*
* 空状态：卡片网格里只有一个 ，不写 grid-column 就只占 1/3 列宽 ——
* 线上「IT小技巧」这类 0 文章分类正是这个形态，一句提示被挤成两行窄条。
*/
.j2-empty{grid-column:1/-1;margin:0;padding:36px 0;color:var(--text);font-size:15px}
/* 8. 首页 · 分页 ---------------------------------------------------------- */
.j2-pager{display:flex;align-items:center;justify-content:center;gap:8px;
margin:32px 0 8px}
.j2-pager a,.j2-pager span{display:inline-flex;align-items:center;justify-content:center;
min-width:34px;height:34px;padding:0 10px;border-radius:8px;border:1px solid #E4E7ED;
background:#fff;color:var(--text);font-size:14px;font-weight:500;line-height:1}
.j2-pager a:hover{border-color:#C9CEE0;color:var(--ink)}
.j2-pager .is-cur{background:var(--brand);border-color:var(--brand);color:#fff}
/* 9. 页脚 ---------------------------------------------------------------- */
/* 设计稿在页脚上方留了 48px 空白，这里用 margin 实现，避免深底贴住分页 */
.site-foot{margin-top:48px;border-top:0;background:var(--navy);
padding:48px 0 32px;color:var(--navy-text)}
.site-foot .wrap{display:flex;flex-direction:column;gap:28px;
padding-top:0;padding-bottom:0}
.j2-foot-top{display:flex;align-items:flex-start;justify-content:space-between;gap:48px}
.j2-foot-brand{flex:0 1 400px;min-width:0}
.j2-foot-mark{display:flex;align-items:center;gap:8px;color:var(--navy-text)}
.j2-foot-mark svg{width:15px;height:15px;display:block;color:var(--brand-ink)}
.j2-foot-mark b{font-size:17px;font-weight:700;color:#fff}
.j2-foot-desc{margin:10px 0 0;font-size:13px;line-height:22px;color:var(--navy-text)}
.j2-foot-cols{display:flex;gap:64px;flex:none}
.j2-foot-col{display:flex;flex-direction:column;gap:12px}
.j2-foot-h{margin:0;font-size:13px;font-weight:500;color:#fff;line-height:1.5}
.j2-foot-col a{font-size:13px;color:var(--navy-text);line-height:1.5}
.j2-foot-col a:hover{color:#fff}
.j2-foot-line{height:1px;background:var(--navy-line)}
.j2-foot-bottom{display:flex;align-items:center;justify-content:space-between;
gap:16px;flex-wrap:wrap;font-size:12px;color:#7683A3}
.j2-foot-bottom p{margin:0}
/* 10. 响应式 -------------------------------------------------------------- */
/* Hero 右侧品牌标在窄屏变成纯负担：先缩间距，再整块收掉 */
@media(max-width:1120px){
.j2-hero-panel{gap:32px;padding:36px 40px}
.j2-lead-media{flex-basis:400px}
}
@media(max-width:1000px){
.j2-mark{display:none}
.j2-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.j2-foot-top{gap:32px}
.j2-foot-cols{gap:40px}
}
@media(max-width:860px){
.j2-hero-title{font-size:32px;line-height:44px}
/* 主推改上下结构：470 封面的横排在这个宽度会把正文挤到 3 字一行 */
.j2-lead{flex-direction:column}
.j2-lead-media{flex:none;width:100%;min-height:0;aspect-ratio:16/9}
.j2-lead-body{padding:24px}
.j2-lead-title{font-size:21px;line-height:30px}
}
@media(max-width:680px){
.j2-hero{padding:24px 0}
.j2-hero-panel{padding:28px 24px;border-radius:20px;gap:0}
.j2-hero-title{font-size:26px;line-height:38px}
.j2-eyebrow{font-size:12px;padding:6px 12px}
.j2-sec{padding:22px 0 6px}
.j2-sec h2{font-size:19px}
.j2-grid{grid-template-columns:minmax(0,1fr);gap:18px}
.j2-card-media{height:200px}
.j2-foot-top{flex-direction:column;gap:28px}
.j2-foot-brand{flex:1 1 auto}
.j2-foot-bottom{flex-direction:column;align-items:flex-start;gap:6px}
}
/*
* 页头在窄屏沿用核心的「导航横向滚动 + 收起输入框」策略。
* 注意这里必须把 display / flex-wrap 都显式写回来：核心那几条规则写在 @media 里，
* 媒体查询不提高权重，而本文件在核心之后加载 —— 上一行 `.head-search .search-box{display:flex}`
* 会以「同为 0,2,0 但更靠后」赢过核心的 `display:none`，表现为手机上搜索框照旧占位、页头挤成两行。
*/
@media(max-width:900px){
.site-head .wrap{min-height:58px;gap:10px;flex-wrap:nowrap}
.site-head .brand{flex:none}
.site-head .nav{gap:20px;flex:1;min-width:0;overflow-x:auto;flex-wrap:nowrap;margin-left:0}
.site-head .nav::-webkit-scrollbar{display:none}
.site-head .nav a{font-size:14px}
.site-head .brand-name{font-size:18px}
.head-search .search-box{display:none}
.head-search-link{display:inline-flex;align-items:center;flex:none;
padding:7px 10px;font-size:14px;color:var(--text)}
}
/*
* 更窄的屏：26px 时第一句 15 个字放不下，会留一个「处。」孤字在第二行。
* 420 以下降到 20px 并把面板左右内边距收到 20 —— 390 宽的机器上正文区 310，
* 15 × 20 = 300 刚好一句一行，与设计稿的两行结构一致。
*
* 页头也在这档收紧：首页比其它页多一个「搜索」链接，390 下导航只剩 210 宽，
* 而五项内容需要 217 —— 差 7px 正好把「注册」切掉半个字。gap 20→14、wrap gap 10→8，
* 内容降到 193，375/390/414 都不再裁字；360 及以下留 5px 溢出交给横向滚动。
*/
@media(max-width:420px){
.j2-hero-panel{padding:24px 20px}
.j2-hero-title{font-size:20px;line-height:30px}
.site-head .wrap{gap:8px;padding-left:18px;padding-right:18px}
.site-head .nav{gap:14px}
}
/* 10. 文章页 -------------------------------------------------------------- */
/*
* 核心 .article 是一张 34/38 内边距的白卡；画板上的文章页是「无卡、760 宽」的
* 编辑式版式 —— 正文越窄越好读，卡片边框只会把阅读区压掉 76px。
* 所以这里不是「微调」，是把卡取消掉，宽度收到 760（1440 视口下两侧各 340，与画板一致）。
*/
main.wrap:has(> .j2-post-wrap){padding-top:0}
.j2-post-wrap{margin:0 auto;padding:48px 0 24px}
.j2-post-wrap .crumbs{margin:0 0 14px}
.article.j2-post{display:flex;flex-direction:column;gap:28px;
margin:0;padding:0;max-width:none;background:none;
border:0;border-radius:0;box-shadow:none}
/*
* 纵向节奏交给 gap：子元素自带的 margin 会和 gap 叠加成双倍间距（28 + 34 = 62px 的空洞）。
* 选择器必须写成 .article.j2-post（两个类）才能压过核心的 `.article .dl-tk{margin:28px 0}`
* —— 同一权重时本文件在后加载，才轮得到这条生效。
*/
.article.j2-post > *{margin-top:0;margin-bottom:0}
/* ---- 10.1 文章头 ---- */
.j2-phead{display:flex;flex-direction:column;gap:14px;padding:0;border:0}
.j2-phead > *{margin:0}
.j2-phead h1{margin:0;font-size:36px;font-weight:700;line-height:50px;
letter-spacing:-.01em;color:var(--ink)}
/* 画板的分类 chip 是 6px 小圆角实底，不是核心那个 999 药丸 */
.j2-phead .hero-cat{padding:4px 12px;border-radius:6px;border:0;
font-size:12px;font-weight:500;background:var(--brand-soft);color:var(--brand)}
.j2-phead .hero-cat:hover{background:var(--brand);color:#fff}
/* 元信息压成一行：日期 · 作者 · 时长 · 阅读 · 评论 */
.j2-pmeta{display:flex;flex-wrap:wrap;align-items:center;
font-size:13px;line-height:22px;color:var(--muted)}
.j2-pmeta > *+*::before{content:"·";margin:0 8px;color:#C6CBD8}
.j2-pmeta a{color:var(--muted)}
.j2-pmeta a:hover{color:var(--brand);text-decoration:underline}
/* 面包屑分隔符：画板写的是「首页 / 模型 / 模型类型」，核心用的是 › */
.j2-post-wrap .crumbs li+li::before,
.j2-arch .crumbs li+li::before{content:"/";font-size:12px;color:#C6CBD8}
/* 头图：画板是 fill_container + 400 高 + 12 圆角，不是「按原图比例、最高 420」 */
.j2-post .article-cover{width:100%;height:400px;max-height:none;
margin:0;border-radius:12px;object-fit:cover;background:var(--brand-soft)}
/* ---- 10.2 正文：16/30，首段 17/30 当导语 ---- */
.j2-post .article-body{font-size:16px;line-height:30px;color:#3A4150}
.j2-post .article-body > p{margin:0 0 20px}
.j2-post .article-body > p:first-child{font-size:17px;line-height:30px}
.j2-post .article-body h2{font-size:24px;font-weight:700;line-height:34px;
letter-spacing:0;color:var(--ink);margin:32px 0 14px}
.j2-post .article-body h3{font-size:19px;line-height:29px;color:var(--ink);margin:26px 0 12px}
.j2-post .article-body h4{font-size:17px;line-height:27px;color:var(--ink);margin:22px 0 10px}
.j2-post .article-body > ul,
.j2-post .article-body > ol{margin:0 0 20px 22px}
.j2-post .article-body li{margin-bottom:8px}
.j2-post .article-body strong{color:var(--ink)}
.j2-post .article-body blockquote{margin:0 0 20px;padding:18px 22px;
border-left:3px solid var(--brand);border-radius:0 10px 10px 0;
background:#F5F6FD;color:var(--text)}
.j2-post .article-body > pre,
.j2-post .article-body > .code-wrap,
.j2-post .article-body > table,
.j2-post .article-body > img{margin:0 0 20px}
/*
* 提示框：画板是「浅底 + 13px 品牌色小标签 + 15/26 正文」。
* 只改圆角、内边距与标签色，**不动 background / border-left** ——
* .wf-tone-warn / -ok / -info 靠的就是这两个属性区分语气，一改全糊成一种蓝。
*/
.j2-post .article-body .wf-note,
.j2-post .article-body .wf-callout{padding:18px 22px;border-radius:10px;
font-size:15px;line-height:26px;margin:0 0 20px}
.j2-post .article-body .wf-note > strong:first-child,
.j2-post .article-body .wf-callout > strong:first-child{font-size:13px;font-weight:500;
letter-spacing:.02em;color:var(--brand);margin-bottom:6px}
/* 老正文里的 .tip 是橙色告警条，与这一版冷静的语气不搭，统一成品牌浅底 */
.j2-post .article-body .tip{margin:0 0 20px;padding:18px 22px;border-radius:10px;
background:#F5F6FD;color:var(--text);font-size:15px;line-height:26px}
.j2-post .article-body .tip b,
.j2-post .article-body .tip strong{color:var(--brand)}
/* ---- 10.3 文末问答卡 ---- */
.j2-post .post-faq{margin:0;padding:28px 32px;background:#FAFAFC;
border:1px solid var(--line);border-radius:14px}
.j2-post .post-faq > h2{margin:0 0 20px;font-size:20px;font-weight:700;
letter-spacing:0;color:var(--ink)}
/* 卡片本身就是容器，再加一根竖线是两层框 */
.j2-post .post-faq > h2::before{display:none}
.j2-post .faq-item{padding:20px 0 0;border-top:1px solid var(--line)}
.j2-post .faq-item:first-child{padding-top:0;border-top:0}
.j2-post .faq-q{font-size:16px;font-weight:600;line-height:26px;margin:0 0 6px;color:var(--ink)}
.j2-post .faq-a{font-size:15px;line-height:27px;margin:0;color:var(--text)}
/* ---- 10.4 上下篇 / 作者卡 / 下载 / 版权 ---- */
.j2-post .post-nav{gap:20px}
.j2-post .post-nav a{padding:18px 22px;border-radius:12px;border-color:var(--line)}
.j2-post .post-nav .pn-label{margin-bottom:6px;font-size:12px;line-height:18px;color:var(--muted)}
.j2-post .post-nav .pn-title{font-size:15px;font-weight:500;line-height:24px}
.j2-post .author-box{padding:20px 22px;border-radius:12px;background:#FAFAFC}
.j2-post .updated-note{border-radius:10px;padding:12px 16px;font-size:13px;line-height:22px}
.j2-post .dl-tk{margin:0;padding:20px;border-radius:14px}
.j2-post .copyright{border-radius:12px}
/* 评论与相关文章同宽，且都不在 article 里（它们是文章的兄弟节点） */
.j2-post-wrap .comments,.j2-post-wrap .related{max-width:none}
/* ---- 10.5 列表页抬头（分类页 / 搜索页 / 首页第 2 页起共用） ---- */
main.wrap:has(> .j2-arch){padding-top:0}
.j2-arch{padding:36px 0 8px}
.j2-arch .crumbs{margin:0 0 18px}
.j2-arch-head{display:flex;align-items:flex-end;justify-content:space-between;
gap:24px;flex-wrap:wrap;margin:0 0 22px}
.j2-arch-tag{margin:0 0 4px;font-size:13px;font-weight:500;line-height:20px;
letter-spacing:.02em;color:var(--brand)}
.j2-arch-title{margin:0;font-size:32px;font-weight:700;line-height:46px;
letter-spacing:-.01em;color:var(--ink)}
.j2-arch-note{display:flex;flex-wrap:wrap;align-items:center;margin:8px 0 0;
font-size:13px;line-height:22px;color:var(--muted)}
.j2-arch-note > span+span::before{content:"·";margin:0 8px;color:#C6CBD8}
/* 核心 .page-title 用在搜索页（回落模板），与分类页保持同一档字号 */
.page-title{font-size:32px;font-weight:700;line-height:46px;letter-spacing:-.01em;
margin:6px 0 20px}
/*
* 分类页抬头右侧的搜索：和页头那颗同一种药丸，但保留实心按钮 ——
* 这一页的页头没有搜索框，它是唯一入口，不能只靠「按回车」。
*/
.j2-arch .search-box{position:relative;display:flex;align-items:center;flex:none;
width:260px;height:40px;margin:0;padding:0 4px 0 38px;
background:#F3F4F6;border-radius:20px}
.j2-arch .search-box::before{content:"";position:absolute;left:14px;top:50%;
width:15px;height:15px;transform:translateY(-50%);pointer-events:none;
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%239096A6' stroke-width='1.4'%3E%3Ccircle cx='7' cy='7' r='4.6'/%3E%3Cpath d='M10.5 10.5 14 14' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/15px 15px}
.j2-arch .search-box input{flex:1;min-width:0;height:100%;padding:0;border:0;
background:none;font-size:13px;color:var(--ink);box-shadow:none}
.j2-arch .search-box input:focus{box-shadow:none;border:0}
.j2-arch .search-box button{flex:none;height:32px;padding:0 14px;border:0;border-radius:16px;
background:var(--brand);color:#fff;font-size:13px;font-weight:500;cursor:pointer;
box-shadow:none;transition:.18s var(--ease,#ease)}
.j2-arch .search-box button:hover{filter:brightness(1.06);transform:none}
/* 分页两端的翻页箭头：只在有上一页/下一页时出现 */
.j2-pager .j2-pager-step{font-size:16px;font-weight:400;color:var(--muted)}
/* 11. 文章页 / 列表页的窄屏 ------------------------------------------------- */
@media(max-width:820px){
.j2-post-wrap{padding:28px 0 16px}
.j2-phead{gap:12px}
.j2-phead h1{font-size:27px;line-height:39px}
.j2-post .article-cover{height:260px}
.j2-post .article-body{font-size:15.5px;line-height:28px}
.j2-post .article-body > p:first-child{font-size:16px;line-height:28px}
.j2-post .article-body h2{font-size:21px;line-height:31px;margin:26px 0 12px}
.j2-post .post-faq{padding:20px 18px}
.j2-post .post-faq > h2{font-size:18px;margin-bottom:16px}
.j2-arch{padding:24px 0 8px}
.j2-arch-head{gap:16px;margin-bottom:18px}
.j2-arch-title{font-size:26px;line-height:38px}
.j2-arch .search-box{width:100%}
.page-title{font-size:26px;line-height:38px}
}
/* 12. 文章页两栏：正文列 + 五块侧栏 ------------------------------------------ */
/*
* 1088 = 正文 760 + gap 28 + 侧栏 300。
* 正文列固定 760 不随宽度伸缩 —— 画板的编辑式版式就是靠这个宽度撑住
* 「一行约 38 个汉字」的阅读节奏，拉宽到 1fr 会变成一眼扫不到行尾的长行。
* 1088 在 1440 视口下居中，两侧各留 176。
*/
.j2-post-wrap{max-width:1088px;
display:grid;grid-template-columns:minmax(0,760px) 300px;
gap:28px;align-items:start}
.j2-post-main{min-width:0}
/*
* 侧栏不跟手（position 保持 static）。
*
* 量过：五块合计 994px（文章 3 个小标题）到约 1285px（9 个）。
* 想 sticky 就得 cap 到视口高度让它内部滚动，而 cap 之后必被切：
* · 900 高的笔记本可视 788 → 整整一块「文章分类」在视口外；
* · 1080 高可视 968 → 也差一截；
* · 只有 1400 以上的视口才放得下最长的那一版。
* 「有内容被切」不是「读者滚一下就能看到」，是「没人知道下面还有东西」——
* 五个块做了等于白做。所以宁可放弃跟手：跟手的收益是「正文滚到中段还能跳章节」，
* 代价是两块永远看不见，这笔账不划算。
*
* 顺带：侧栏下方会留一段空白（正文长、侧栏短）。那是博客侧栏的常态，
* 比藏内容好；真要填满，得给侧栏加「热门文章」之类的动态块，另说。
*
* `> *{flex:0 0 auto}` 是给将来留的：万一有人加了 max-height，
* 列方向 flex 的子项默认会先被压扁（卡片内容被 overflow:hidden 切掉）而不是溢出。
*/
.j2-side{min-width:0;display:flex;flex-direction:column;gap:16px}
.j2-side> *{flex:0 0 auto}
/* ---- 12.1 侧栏块 ---- */
.j2-w{background:var(--surface);border:1px solid var(--line);
border-radius:var(--radius);overflow:hidden}
/*
* 块标题是
不是
：五个控件标题都进大纲的话，文档结构会变成
* 「h1 文章标题 → h2 一言 → h2 搜索 → h2 标签云…」，正文那些真正的 h2 反而被淹掉。
* 语义靠 补，读屏仍然念得出「这是哪一块」。
*
* 颜色用 --text(#5F6675) 而不是 --muted(#9096A6)：13px 的字在 #9096A6 上只有 2.9:1，
* 不到 WCAG AA。这个项目为此踩过一次，别把 muted 当「次要文字」用。
*/
.j2-w-h{margin:0;padding:13px 18px;font-size:13px;font-weight:600;line-height:20px;
letter-spacing:.04em;color:var(--text);border-bottom:1px solid var(--line)}
/* ---- 12.2 一言 ---- */
/* 左边那道 3px 竖线与正文引用的同一套语言，但颜色更浅：侧栏是配角，不该抢正文的份量 */
.j2-say{margin:15px 18px 16px;padding-left:11px;border-left:3px solid #C9CFF4}
.j2-say-text{margin:0;font-size:14px;line-height:23px;color:#3A4150;
/* 接口偶尔返回长句。四行封顶，超了省略号收尾，侧栏高度不能被一条一言撑爆 */
display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.j2-say-from{display:block;margin-top:6px;font-size:12px;line-height:18px;
color:var(--text);font-style:normal;text-align:right}
/* ---- 12.3 搜索 ---- */
.j2-find{display:flex;gap:8px;padding:12px 18px 14px}
.j2-find input{flex:1 1 auto;min-width:0;height:36px;padding:0 12px;
border:1px solid var(--line);border-radius:8px;background:#F8F9FB;
font-family:inherit;font-size:14px;line-height:34px;color:var(--ink);
appearance:none;-webkit-appearance:none}
/* 去掉 type=search 自带的那个叉：它和右侧的搜索按钮挤在一起像两个控件 */
.j2-find input::-webkit-search-cancel-button{display:none}
.j2-find input:focus{outline:0;border-color:var(--brand);background:#fff;
box-shadow:0 0 0 3px rgba(59,73,198,.08)}
.j2-find button{flex:0 0 auto;height:36px;padding:0 14px;border:0;border-radius:8px;
background:var(--brand);color:#fff;font-family:inherit;font-size:14px;cursor:pointer}
.j2-find button:hover{background:#3541B0}
/* ---- 12.4 章节导航 ---- */
.j2-toc{margin:0;padding:8px 0 10px;list-style:none}
/*
* 单行截断。线上实测：8 个小标题里有 6 个超过 22 个字，折成两行之后
* 目录块从 256 涨到 383，行首还对不齐（第二行只挂俩字）。一屏放不下八项的目录
* 等于没有目录。整条标题在正文里就在那儿，这里只要「可扫」。
*/
.j2-toc a{display:block;padding:6px 18px;font-size:13px;line-height:20px;
color:var(--text);border-left:2px solid transparent;transition:color .18s,background .18s;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.j2-toc a:hover{color:var(--brand);background:#F7F8FC}
/* 当前段落：左侧竖线 + 浅底，靠 main.css 之外的 side.js 打 is-current */
.j2-toc a.is-current{color:var(--brand);border-left-color:var(--brand);
background:#F5F6FD;font-weight:500}
.j2-toc-l3 a{padding-left:34px;font-size:12px}
/* ---- 12.5 标签云 ---- */
.j2-tags{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:14px 18px 16px;list-style:none}
.j2-tags a{display:inline-block;padding:3px 9px;border:1px solid var(--line);
border-radius:999px;font-size:12px;line-height:18px;color:var(--text);transition:.18s}
.j2-tags a:hover{border-color:var(--brand);color:var(--brand);background:#F5F6FD}
/* 三档只差 1–2px，是「有点轻重」不是「大小乱跳」。档位由模板按最大篇数算 */
.j2-tags a.j2-tag-lg{font-size:13px;padding:4px 12px;color:var(--ink);border-color:#D9DCE8}
.j2-tags a.j2-tag-sm{font-size:11px;padding:2px 9px}
/* ---- 12.6 文章分类 ---- */
.j2-side-cats{margin:0;padding:6px 0;list-style:none}
.j2-side-cats a{display:flex;align-items:center;justify-content:space-between;
gap:12px;padding:7px 18px;font-size:14px;line-height:22px;color:var(--ink);
transition:.18s var(--ease,#ease)}
.j2-side-cats a:hover{background:#F5F6FA;color:var(--brand)}
.j2-side-num{flex:none;font-size:12px;color:var(--text);font-variant-numeric:tabular-nums}
.j2-side-cats a:hover .j2-side-num{color:var(--brand)}
.j2-side-foot{margin:0;padding:10px 18px 12px;border-top:1px solid var(--line);
font-size:12px;line-height:20px;color:var(--text)}
.j2-side-empty{margin:0;padding:8px 18px 14px;font-size:13px;color:var(--text)}
/*
* 锚点跳转要让出 sticky 页头（68px），否则点「章节导航」之后标题正好压在页头下面，
* 读者会以为跳错了位置。scroll-margin-top 是纯 CSS 的解法，不需要 JS 算偏移。
*/
.article-body h2,.article-body h3{scroll-margin-top:88px}
/*
* 1120 收侧栏：容器可用宽降到 1080，1088 的栅格会横向溢出 8px。
* 收掉后正文列回到 760 居中，与画板完全一致；侧栏落到正文下方，
* 从「旁边的一列」变成「看完这篇，接着逛逛」的收尾区 ——
* 这时把 760 的宽度用起来，改成两列平铺，五块的高度从 994 掉到 548。
*/
@media(max-width:1120px){
.j2-post-wrap{display:block;max-width:760px}
.j2-side{margin-top:36px;
display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
}
@media(max-width:680px){
.j2-side{grid-template-columns:minmax(0,1fr)}
}
/* 附：主题选项带来的两种形态 ----------------------------------------------
① 品牌标记可在「月亮字形 / 站点 Logo / 纯文字」之间切换；
② 侧栏五块全关时