自己带
.wrap 的 padding:0 var(--gut)，页脚被这 17px 顶偏了，右边只剩 18px。
→ .home-shell 拆掉 .wrap 的宽度/内距语义，宽度交给内部 .rs-wrap。
③ 右栏日期 (06-23) 列宽 15px，折成「06- / 23」两行。
→ 改成 min-width + nowrap。
④ 侧栏广告三帧 opacity 全为 1、其中两帧 absolute 叠在上面 ——
app.js 的 slider 与本层 CSS 抢同一个容器，结果是三张叠成一块黑。
→ 放弃 app.js 接管，改纯 CSS 轮播（负 delay 方案见下）。
⑤ 主推卡「广告」角标写在 right:10px，违反「角标恒在左上」铁律。
========================================================================== */
/* ① 顶栏真通栏 */
.pg-shell .nav{
height:var(--nav-h) !important;
padding:0 !important;
border-radius:0 !important;
margin:0 !important;
}
.pg-shell .nav-in{
height:var(--nav-h) !important;
border-radius:0 !important;
background:none !important;
box-shadow:none !important;
margin:0 auto !important;
}
/* ② 外层容器不再二次缩进（页脚通栏的前提） */
.pg-shell .wrap.home-shell{
padding-left:0 !important;
padding-right:0 !important;
max-width:none !important;
}
/* ③ 右栏日期不折行 */
.rs-slist i{
flex:0 0 auto;width:auto;min-width:34px;
white-space:nowrap;letter-spacing:.01em;
}
.rs-nlist i{min-width:34px;white-space:nowrap}
/* ④ 侧栏广告：纯 CSS 三帧轮播
--------------------------------------------------------------------------
为什么必须绕开 app.js：它的 slider 约定是 root[data-slider] > .psl-track >
.psl-slide[]，靠内联 style 切 opacity。本层给 .psl-slide 写了 absolute 定位，
两套机制同时作用，三帧同时可见 —— 实测截出来是一整块黑色。
这里保留 data-slider 属性（广告位标识、后台可追溯），但把动画交给 CSS：
· 基础 opacity:0，动画期间由 keyframes 接管
· 三帧统一 18s 周期、正延 0/6/12s，第一轮就错开，之后永远同步
· keyframes 里 30% 之后直接转 0，不留尾巴（否则第 100% 会闪回第一帧） */
.rs-sidead{min-height:172px}
.rs-sidead .psl-track{position:relative;min-height:172px}
.rs-sidead .psl-slide{
position:absolute;inset:0;
display:flex;flex-direction:column;justify-content:flex-end;
padding:34px 17px 18px;
opacity:0;animation:rsFade3 18s infinite;
}
.rs-sidead .psl-slide:nth-child(2){animation-delay:6s}
.rs-sidead .psl-slide:nth-child(3){animation-delay:12s}
@keyframes rsFade3{
0%,30%{opacity:1}
33.4%,100%{opacity:0}
}
@media (prefers-reduced-motion:reduce){
.rs-sidead .psl-slide{animation:none}
.rs-sidead .psl-slide:first-child{opacity:1}
}
/* ⑤ 主推卡角标回左上（铁律） */
.rs-pick .ad-tag{
left:10px !important;
right:auto !important;
}
/* 同一套轮播时序，主推卡与侧栏广告对齐 ——
原来 100% 回到 opacity:1，会在末帧闪一下第一张。 */
.rs-pick-s + .rs-pick-s{animation:rsFade3 18s infinite}
.rs-pick-s:first-child{animation:rsFade3 18s infinite;animation-delay:0s}
.rs-pick-s:first-child{opacity:0}
.rs-pick:not(:has(.rs-pick-s + .rs-pick-s)) .rs-pick-s:first-child{opacity:1;animation:none}
/* ===== 41.4.END ===== */
/* 41.5 页脚收口：圆角与双重上内距
实测 .foot rad 22px、margin 51.84/0/24、padding-top 40 —— 三段叠加的结果是
「深色板浮在页面里、下面还露一条白边」，与「从左到右占满」正好相反。
页脚必须是页面最底一块地基，不是一张卡片。 */
.pg-shell .foot{
border-radius:0 !important;
margin:var(--sp-3) 0 0 !important;
padding:0 !important;
}
.pg-shell .foot > .wrap{padding-top:clamp(32px,3.4vw,46px) !important}
/* ===== 41.5.END ===== */
/* ==========================================================================
41.6 顶栏底色 + 主推卡轮播时序（第 41 轮 · 二轮修正）
--------------------------------------------------------------------------
① 顶栏白字浮在浅底上：41.4 给 .nav-in 清了 background，而深色板原本画在
.nav-in 上（35 轮），清掉就露回 .nav 的浅灰底。这里把深色板挪到 .nav
本体，并对内部做令牌重映射 —— 与页脚同一手法：
logo 是白色图、导航字默认取 --txt-2（亮色主题下是深灰），
换底色却不换字色，就必然出现「白字浅底」。
② 主推卡三帧叠显：41.4 用简写 `.rs-pick-s + .rs-pick-s{animation:rsFade3 18s infinite}`
覆盖，而 CSS 的 animation 简写会把未写出的 animation-delay **重置为 0**，
于是 41.1 里的 nth-child(2){delay:6s} 全被抹掉，三帧同时 opacity:1。
教训：分帧延迟必须写在简写之后，或用完整简写把 delay 一并写进去。
========================================================================== */
/* ① 顶栏：深色板 + 令牌重映射 */
.pg-shell .nav{
background:var(--band-top) !important;
backdrop-filter:none !important;
-webkit-backdrop-filter:none !important;
border-bottom:1px solid var(--band-line) !important;
--txt:var(--band-txt);
--txt-2:var(--band-txt-2);
--txt-3:var(--band-txt-3);
--line:var(--band-line);
--line-2:var(--band-line-2);
--line-3:var(--band-line-3);
--rule:var(--band-line);
--panel:var(--band-panel);
--panel-2:var(--band-panel-2);
}
.pg-shell .nav .nav-links a{color:var(--band-txt-2)}
.pg-shell .nav .nav-links a:hover{color:var(--band-txt)}
/* 导航项主色高亮与下划线在深底上要提亮一档 */
.pg-shell .nav .nav-links a.on,
.pg-shell .nav .nav-links a[aria-current]{color:#FF8B99}
html[data-theme="dark"] .pg-shell .nav .nav-links a.on,
html[data-theme="dark"] .pg-shell .nav .nav-links a[aria-current]{color:#FF7A8C}
/* 搜索入口 / 主题切换：深底上的描边按钮 */
.pg-shell .nav .nav-search{
background:rgba(255,255,255,.07) !important;
border-color:var(--band-line) !important;
color:var(--band-txt-2) !important;
}
.pg-shell .nav .nav-search:hover{color:var(--band-txt) !important;border-color:var(--band-line-2) !important}
.pg-shell .nav .tsw{border-color:var(--band-line) !important;background:rgba(255,255,255,.05) !important}
.pg-shell .nav .tsw button{color:var(--band-txt-3)}
.pg-shell .nav .tsw button[aria-pressed="true"]{background:rgba(255,255,255,.14) !important;color:var(--band-txt) !important}
.pg-shell .nav .burger{background:rgba(255,255,255,.07) !important;border-color:var(--band-line) !important;color:var(--band-txt-2) !important}
/* 深色顶栏下 logo 固定用夜间版（白色线稿），否则深色 logo 贴深底看不见 */
.pg-shell .nav .brand .bl-day{display:none !important}
.pg-shell .nav .brand .bl-night{display:block !important}
/* ② 主推卡轮播：定位与动画分开写，延迟写在简写之后 */
.rs-pick-s{opacity:0;animation:rsFade3 18s infinite}
.rs-pick-s + .rs-pick-s{position:absolute;inset:0;opacity:0}
.rs-pick-s:nth-child(1){animation-delay:0s}
.rs-pick-s:nth-child(2){animation-delay:6s}
.rs-pick-s:nth-child(3){animation-delay:12s}
.rs-pick:not(:has(.rs-pick-s + .rs-pick-s)) .rs-pick-s:first-child{opacity:1;animation:none}
@media (prefers-reduced-motion:reduce){
.rs-pick-s{animation:none;opacity:0}
.rs-pick-s:first-child{opacity:1}
}
/* ===== 41.6.END ===== */
/* 41.7 滚动后的顶栏
--------------------------------------------------------------------------
`.pg-shell .nav[data-scrolled]`（4661 行，权重 0,3,0）在滚动时把背景改回
半透明页面底色。41.6 的 `.pg-shell .nav`（0,2,0）压不住它 ——
实测详情页往下滚 400px 后，深色板变浅、白字直接糊在浅底上。
这里补同权重后置规则。 */
.pg-shell .nav[data-scrolled]{
background:var(--band-top) !important;
box-shadow:0 12px 28px -22px rgba(0,0,0,.7) !important;
border-bottom-color:var(--band-line) !important;
}
/* ===== 41.7.END ===== */
/* 41.8 轮播帧时序收口
--------------------------------------------------------------------------
41.4 的 rsFade3 是「0–30% 显示、到 33.4% 归零」，实际是：显示 5.4s + 淡出
0.6s + 空档 0.6s。截图验收时多次抓到淡出中那一帧，文字几乎看不见。
改成「0–32% 满亮、到 33.5% 归零」：显示 5.76s、淡出压到 0.27s、
帧间空档 0.24s。人眼看到的就是「三张在切」，不会出现半透明的中间态。 */
@keyframes rsFade3{
0%,32%{opacity:1}
33.5%,100%{opacity:0}
}
/* ===== 41.8.END ===== */
/* 41.9 轮播改硬切
--------------------------------------------------------------------------
问题：41.8 仍是线性插值，32%→33.5% 之间有 0.27s 的淡出。
实测连拍三张验收图，全部命中这段 —— 侧栏广告卡的「侧栏常驻位」显示成暗灰，
而 getComputedStyle 读到的 color 是 rgb(247,250,255)（纯白），
说明这不是配色问题，是 opacity 处在过渡中间态。
做法两条：
① keyframes 的显示区间拉到 0–33.3%（正好 6s，等于帧间隔），三帧首尾相接，
中间不再留空档；
② animation-timing-function 用 steps(1,end)，让 opacity 在区间内恒为 1，
到边界瞬间跳到 0。18s 里只有约 0.04s 处在跳变点，静态截图与真人观看
都拿到完整一帧。
为什么不再保留淡入淡出：广告轮播是「三张在切」，硬切本身就是这种组件的
常见形态；为了 0.27s 的柔和过渡而让 1/3 的截图时间不可读，不划算。
========================================================================== */
@keyframes rsFade3{
0%,33.3%{opacity:1}
33.4%,100%{opacity:0}
}
.rs-sidead .psl-slide,
.rs-pick-s{
animation-timing-function:steps(1,end) !important;
}
/* 帧间隔与显示区间对齐后，第二三帧的延迟必须精确为 1/3 周期 */
.rs-sidead .psl-slide:nth-child(2),
.rs-pick-s:nth-child(2){animation-delay:6s !important}
.rs-sidead .psl-slide:nth-child(3),
.rs-pick-s:nth-child(3){animation-delay:12s !important}
/* ===== 41.9.END ===== */
/* ==========================================================================
41.10 侧栏广告卡文字发灰 —— 真凶是压暗遮罩，不是配色
--------------------------------------------------------------------------
排查过程记一笔，避免下次又绕远路：
· getComputedStyle 读到 b 的 color 是 rgb(247,250,255)，纯白 —— 不是配色问题；
· 从 .rs-sidead 一路往上到 body，opacity 全是 1、无 animation —— 不是过渡残影；
· 那灰就一定来自「叠在文字之上的一层半透明黑」。
5450 行有答案：`.cr-adbox .psl-slide::after{display:none}`，注释写着
「撤掉主推位那层压暗，左栏要亮」。也就是说 `.psl-slide::after` 是主推位的
压暗层，且画在文字之上。第 41 轮把侧栏广告迁到右栏时，我沿用了 .psl-slide
类名却没带上 .cr-adbox 父级，那条 display:none 自然没命中 —— 于是白字被
压成 #6E737C 一档的灰。
修法：在新容器下单独撤销这层遮罩，不动历史规则。
========================================================================== */
.rs-sidead .psl-slide::after{display:none !important}
.rs-sidead .psl-slide{padding-bottom:19px}
/* ===== 41.10.END ===== */
/* ==========================================================================
43.0 顶栏 LOGO 与内容左缘对齐（第 43 轮）
--------------------------------------------------------------------------
站长：「首页标题栏 logo 与下面整体没对齐。」
根因不是 41 轮的 .nav-in，而是第 31 轮留下的这条（app.css 5313 行）：
.pg-shell .nav-logo{ justify-content:center; width:calc(var(--rail) - 8px) }
31 轮还有左导轨，这条是为了让 LOGO 的中轴对准导轨面板中轴。
41 轮 A 方案把导轨取消了，LOGO 却仍被钉在 217 宽的格子里居中 ——
实测 brand 从 82.4 起，而 .rs-wrap / .foot-grid / .rs-hero-in 的内容左缘都是 51.7，
视觉差 30.7px；再加上 LOGO 图片自带 5.39px 左边透明边（1667 宽原图首个
不透明像素在 x=55，显示宽 163.5 等比缩放），实际差 36.1px。
两条一起修：格宽改 auto + 左对齐；再用负外边距吃掉图片透明边。
========================================================================== */
.pg-shell .nav-logo{
justify-content:flex-start !important;
width:auto !important;
margin-right:0 !important;
flex:0 0 auto;
padding-right:26px !important;
}
.pg-shell .nav-logo .brand{margin-left:-5.4px !important}
/* ==========================================================================
43.1 首页重排：导航站，不是内容站（第 43 轮）
--------------------------------------------------------------------------
站长：「首页除了首屏这块暂时不动，其他都要重构，这是导航站，不是内容站。」
同时：「标题栏下面的分类导航取消。」→ head.html 里的 .catbar 已删除。
41 轮首页的骨架是内容站骨架：精选 3 卡 → 分类九宫格 → 资讯流 → 侧栏。
全站 4323 条工具、5 个一级分类，首页却只给 3 个工具入口，这与导航站的
任务不符 —— 导航站首屏之下就应该是能直接点走的工具名录。
43 轮骨架：
分类 Tab（吸顶，切一次看一类）
└ 每个 Tab 一个 panel：二级分类 chips + 16 格工具墙 + 查看全部
广告横条
资讯（压成一行，不再吃一整屏）
广告文字链 / 自营
右栏：编辑推荐 + 最多点开 + 侧栏广告轮播 + 选型求助
广告位一个没少：home-feed / home-feed-bar / home-news-sponsor /
home-textlink / home-bottom / rail-fixed / rail-fixed-2 / rail-fixed-3。
========================================================================== */
/* ---------- ① 分类 Tab：吸顶，滚到工具墙也还能切 ---------- */
.rs-tabs{
position:sticky;top:var(--nav-h);z-index:12;
display:flex;align-items:center;gap:7px;
margin:0 0 var(--sp-2);padding:12px 0;
border-bottom:1px solid var(--line);
background:color-mix(in srgb,var(--bg) 94%,transparent);
-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
overflow-x:auto;scrollbar-width:none;
}
.rs-tabs::-webkit-scrollbar{display:none}
.rs-tabs > button{
flex:none;display:inline-flex;align-items:center;gap:6px;
height:38px;padding:0 15px;border-radius:var(--r-pill);
font-family:inherit;
font-size:var(--fs-sm);font-weight:var(--fw-6);color:var(--txt-2);
background:var(--panel);box-shadow:inset 0 0 0 1px var(--line);
white-space:nowrap;cursor:pointer;
transition:color var(--t-fast),background var(--t-fast),box-shadow var(--t-fast);
}
/* 选中态按令牌铁律用 --c1-soft，不用实心主色 —— 一整排实心红会把页面压死 */
.rs-tabs > button[aria-selected="true"]{
color:var(--c1);background:var(--c1-soft);box-shadow:inset 0 0 0 1px var(--c1-line);
}
.rs-tabs > button:hover{color:var(--txt);box-shadow:inset 0 0 0 1px var(--line-2)}
.rs-tabs > button[aria-selected="true"]:hover{color:var(--c1);box-shadow:inset 0 0 0 1px var(--c1-line)}
.rs-tabs > button em{
font-style:normal;font-size:var(--fs-2xs);font-weight:var(--fw-6);
color:var(--txt-3);font-variant-numeric:tabular-nums;
}
.rs-tabs > button[aria-selected="true"] em{color:var(--c1);opacity:.7}
/* ---------- ② panel 切换 ---------- */
.rs-panels{position:relative}
.rs-panel{display:none}
.rs-panel.is-on{display:block;animation:rsPanelIn .26s var(--ease) both}
@keyframes rsPanelIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.rs-panel.is-on{animation:none}}
/* ---------- ③ 二级分类 chips：一级 Tab 之后的第二跳 ---------- */
.rs-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.rs-chips a{
display:inline-flex;align-items:center;gap:5px;padding:5px 11px;
border-radius:var(--r-pill);font-size:var(--fs-2xs);color:var(--txt-2);
box-shadow:inset 0 0 0 1px var(--line);
transition:color var(--t-fast),background var(--t-fast),box-shadow var(--t-fast);
}
.rs-chips a em{
font-style:normal;font-size:var(--fs-2xs);color:var(--txt-3);
font-variant-numeric:tabular-nums;
}
.rs-chips a:hover{color:var(--c1);background:var(--c1-soft);box-shadow:inset 0 0 0 1px var(--c1-line)}
.rs-chips a:hover em{color:var(--c1);opacity:.7}
/* ---------- ④ 工具墙：4 列密集名录 ---------- */
.rs-tools{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.rs-tool{
display:flex;align-items:center;gap:10px;min-width:0;
padding:10px 12px;border-radius:var(--r-s);
background:var(--panel);box-shadow:inset 0 0 0 1px var(--line);
transition:background var(--t-fast),box-shadow var(--t-fast),transform var(--t-fast) var(--ease);
}
.rs-tool:hover{
background:var(--panel-2);box-shadow:inset 0 0 0 1px var(--c1-line);
transform:translateY(-1px);
}
.rs-tool-ic{
flex:0 0 auto;width:34px;height:34px;border-radius:9px;
display:grid;place-items:center;overflow:hidden;
background:var(--panel-2);color:var(--txt-3);
font-size:var(--fs-md);font-weight:var(--fw-8);
}
.rs-tool-ic img{width:26px;height:26px;object-fit:contain;display:block}
.rs-tool-b{flex:1;min-width:0}
.rs-tool-b b{
display:block;font-size:var(--fs-sm);font-weight:var(--fw-6);line-height:1.4;
color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
transition:color var(--t-fast);
}
.rs-tool-b i{
display:block;margin-top:2px;font-style:normal;
font-size:var(--fs-2xs);line-height:1.4;color:var(--txt-3);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.rs-tool:hover .rs-tool-b b{color:var(--c1)}
/* 工具墙里的原生广告格：与工具同格同尺寸，角标仍在左上（铁律） */
.rs-tool--ad{
position:relative;padding-left:50px;
background:var(--c1-soft);box-shadow:inset 0 0 0 1px var(--c1-line);
}
.rs-tool--ad:hover{background:color-mix(in srgb,var(--c1) 18%,transparent);box-shadow:inset 0 0 0 1px var(--c1-line)}
.rs-tool--ad .ad-tag{
position:absolute;left:10px;top:50%;transform:translateY(-50%);
padding:2px 7px;border-radius:var(--r-xs);
font-size:var(--fs-3xs);font-weight:var(--fw-7);letter-spacing:.06em;line-height:1.5;
color:var(--c1);background:color-mix(in srgb,var(--c1) 16%,transparent);
}
.rs-tool--ad .rs-tool-b b{color:var(--c1)}
/* ---------- ⑤ 查看全部 ---------- */
.rs-more{
display:flex;align-items:center;justify-content:center;gap:7px;
margin-top:14px;height:44px;border-radius:var(--r-s);
font-size:var(--fs-sm);font-weight:var(--fw-6);color:var(--txt-2);
box-shadow:inset 0 0 0 1px var(--line);
transition:color var(--t-fast),background var(--t-fast),box-shadow var(--t-fast),gap var(--t-fast);
}
.rs-more:hover{color:var(--c1);background:var(--c1-soft);box-shadow:inset 0 0 0 1px var(--c1-line);gap:11px}
.rs-more svg{width:12px;height:12px}
/* ---------- ⑥ 资讯：压成一行，导航站资讯是附属不是主体 ---------- */
.rs-newsline{
display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;
padding:14px 16px;border-radius:var(--r-card);
background:var(--panel);box-shadow:inset 0 0 0 1px var(--line);
}
.rs-newsline > b{
flex:none;font-size:var(--fs-2xs);font-weight:var(--fw-7);color:var(--c1);
padding:3px 8px;border-radius:var(--r-xs);background:var(--c1-soft);
}
.rs-newsline a{
font-size:var(--fs-sm);color:var(--txt-2);max-width:min(100%,26em);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
transition:color var(--t-fast);
}
.rs-newsline a:hover{color:var(--c1)}
.rs-newsline a::after{content:"·";margin-left:10px;color:var(--txt-3)}
.rs-newsline a:last-of-type::after{content:"";margin:0}
/* ---------- ⑦ 右栏榜单 ---------- */
.rs-rank{display:flex;flex-direction:column;counter-reset:rk}
.rs-rank a{
display:flex;align-items:center;gap:9px;padding:8px 0;
border-bottom:1px solid var(--line);
}
.rs-rank a:last-child{border-bottom:0;padding-bottom:0}
.rs-rank a::before{
counter-increment:rk;content:counter(rk,decimal-leading-zero);
flex:0 0 auto;width:20px;
font-family:var(--mono);font-size:var(--fs-2xs);font-weight:var(--fw-7);
color:var(--txt-3);font-variant-numeric:tabular-nums;letter-spacing:-.02em;
}
.rs-rank a:nth-child(-n+3)::before{color:var(--c1)}
.rs-rank a:hover::before{color:var(--c1)}
.rs-rank b{
flex:1;min-width:0;font-size:var(--fs-sm);font-weight:var(--fw-6);color:var(--txt-2);
line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
transition:color var(--t-fast);
}
.rs-rank a:hover b{color:var(--c1)}
.rs-rank em{
flex:none;font-style:normal;font-size:var(--fs-2xs);color:var(--txt-3);
font-variant-numeric:tabular-nums;
}
/* 右栏带图标的推荐列表 */
.rs-pick2{display:flex;flex-direction:column}
.rs-pick2 a{
display:flex;align-items:center;gap:10px;padding:9px 0;
border-bottom:1px solid var(--line);
}
.rs-pick2 a:last-child{border-bottom:0;padding-bottom:0}
.rs-pick2 .ic{
flex:0 0 auto;width:30px;height:30px;border-radius:8px;
display:grid;place-items:center;overflow:hidden;
background:var(--panel-2);color:var(--txt-3);
font-size:var(--fs-sm);font-weight:var(--fw-8);
}
.rs-pick2 .ic img{width:22px;height:22px;object-fit:contain;display:block}
.rs-pick2 .t{flex:1;min-width:0}
.rs-pick2 .t b{
display:block;font-size:var(--fs-sm);font-weight:var(--fw-6);color:var(--txt);
line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
transition:color var(--t-fast);
}
.rs-pick2 .t i{
display:block;margin-top:1px;font-style:normal;font-size:var(--fs-2xs);
color:var(--txt-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.rs-pick2 a:hover .t b{color:var(--c1)}
/* ---------- ⑧ 响应 ---------- */
@media (max-width:1279px){
.rs-tools{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:1023px){
.rs-lay{grid-template-columns:minmax(0,1fr)}
.rs-side{position:static}
.rs-tabs{position:static;background:none;-webkit-backdrop-filter:none;backdrop-filter:none}
}
@media (max-width:767px){
.rs-tools{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.rs-tool{padding:9px 10px;gap:8px}
.rs-tool-ic{width:30px;height:30px;border-radius:8px}
.rs-tool-ic img{width:22px;height:22px}
.rs-tool-b b{font-size:var(--fs-2xs)}
.rs-tabs{padding:10px 0;gap:6px}
.rs-tabs > button{height:34px;padding:0 12px;font-size:var(--fs-2xs)}
.rs-chips{gap:5px}
.rs-tool--ad{padding-left:46px}
}
/* ==========================================================================
43.2 侧栏广告卡：两套轮播打架 + 被内联高度撑破（第 43 轮 · 部署后回测）
--------------------------------------------------------------------------
现象：右栏「侧栏常驻位」卡片文字挤在底部、上方一大片空白，卡片下沿还压着
另外两帧的淡淡文字（三帧叠显）。
实测：
· .rs-sidead 高 172，第一帧 .psl-slide 高 172，
后两帧 .psl-slide 高 236 且带内联 min-height:236px —— 236 是 app.js 给的，
它接管了 data-slider 并按最大帧高统一写内联；
· app.js 用内联 style 切 opacity，41.4 的 rsFade3 keyframes 也在切 opacity，
两套时序错开 → 截图能同时抓到三帧；
· 41.1 给 .psl-slide 的是 justify-content:flex-end，内容自然堆到底部。
修法：
① 模板去掉 data-slider（见 index.html 注释），只留 CSS 三帧硬切；
② 卡片定高 158，三帧全部 absolute 叠放 —— 高度不再由最长一帧决定；
③ 内容改垂直居中，角标仍钉左上（铁律）。
========================================================================== */
.rs-sidead .psl-track{height:158px !important;min-height:0 !important}
.rs-sidead .psl-slide{
position:absolute !important;inset:0 !important;
min-height:0 !important;
justify-content:center !important;
padding:26px 17px 22px !important;
}
@media (max-width:767px){
.rs-sidead .psl-track{height:146px !important}
}
/* 资讯行：一条不要太长，两条并排读起来更顺 */
.rs-newsline a{max-width:min(100%,19em)}
/* 43.3 1280 档 4 列过窄（每列 211px，标题 18 字放不下）→ 断点上提到 1339
注意必须带 min-width：不带的话这条会排在 43.1 的 767 档之后，
把手机端的 2 列一起改成 3 列（同权重、后置胜）。 */
@media (min-width:768px) and (max-width:1339px){
.rs-tools{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* ==========================================================================
44.0 顶栏去掉分类导航后的横向布局（第 44 轮）
--------------------------------------------------------------------------
站长：「标题行上的分类导航也取消。」
head.html 里的 .nav-links（首页 + 5 个一级分类 + 资讯 + 收录 + 投稿）整块删除。
.nav-in 原本是 flex + justify-content:flex-start，中间那一格没了之后，
.nav-right 会紧贴 LOGO —— 必须改成推到底。
注意：.nav-in 的 max-width/padding 由 41.0 管（--rs-shell + --rs-gut），
这里只补「右侧块靠右」，不重复定义宽度，免得和 41.0 打架。
========================================================================== */
.pg-shell .nav-right{margin-left:auto !important}
/* LOGO 右侧不再需要 26px 让位给导航链接（43.0 加的），改回自然间距 */
.pg-shell .nav-logo{padding-right:0 !important}
/* ==========================================================================
44.1 首页导航目录（第 44 轮 · 导航区域重做）
--------------------------------------------------------------------------
43 轮的分类 Tab 一次只露一个分类，其余挂在 display:none 里 —— 导航站不该
「点六下看六屏」。44 轮改成全量平铺：锚点条 + 5 个分类区块 + 区块内按二级
分类分组，38 组 × 5 条工具链接一页铺完。
分组的视觉底：一块浅面板（--panel），组与组之间只靠间距分隔，不画分隔线
（铁律：页面不出现装饰性细线）。卡片边框仍用 inset 0 0 0 1px var(--line)，
与全站其它卡一致。
========================================================================== */
/* ---------- ① 目录锚点条：吸顶，滚到哪一段都能跳 ---------- */
.nv-nav{
position:sticky;top:var(--nav-h);z-index:12;
display:flex;align-items:center;gap:6px;
margin:0 0 var(--sp-2);padding:10px 0;
background:color-mix(in srgb,var(--bg) 94%,transparent);
-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
overflow-x:auto;scrollbar-width:none;
}
.nv-nav::-webkit-scrollbar{display:none}
.nv-nav > b{
flex:none;margin-right:4px;
font-size:var(--fs-2xs);font-weight:var(--fw-7);color:var(--txt-3);
letter-spacing:.14em;
}
.nv-nav a{
flex:none;display:inline-flex;align-items:center;gap:6px;
height:34px;padding:0 13px;border-radius:var(--r-pill);
font-size:var(--fs-sm);font-weight:var(--fw-6);color:var(--txt-2);
box-shadow:inset 0 0 0 1px var(--line);white-space:nowrap;
transition:color var(--t-fast),background var(--t-fast),box-shadow var(--t-fast);
}
.nv-nav a em{
font-style:normal;font-size:var(--fs-3xs);color:var(--txt-3);
font-variant-numeric:tabular-nums;
}
.nv-nav a:hover{color:var(--c1);background:var(--c1-soft);box-shadow:inset 0 0 0 1px var(--c1-line)}
.nv-nav a:hover em{color:var(--c1);opacity:.72}
/* ---------- ② 分类区块 ---------- */
.nv-sec{
margin-bottom:14px;padding:20px 22px 22px;
border-radius:var(--r-card);background:var(--panel);
box-shadow:inset 0 0 0 1px var(--line);
scroll-margin-top:calc(var(--nav-h) + 62px);
counter-increment:nvsec;
}
.nv-sec-h{display:flex;align-items:baseline;gap:10px;margin-bottom:16px}
.nv-sec-h h2{
position:relative;margin:0;padding-left:38px;
font-size:var(--fs-xl);font-weight:var(--fw-8);letter-spacing:-.02em;color:var(--txt);
}
/* 区块序号用 CSS 计数器，不写死在模板里 —— 后台加分类不用改模板 */
.nv-sec-h h2::before{
counter-increment:nvsec;content:counter(nvsec,decimal-leading-zero);
position:absolute;left:0;top:.18em;
font-family:var(--mono);font-size:var(--fs-2xs);font-weight:var(--fw-7);
color:var(--c1);background:var(--c1-soft);
padding:2px 6px;border-radius:var(--r-xs);letter-spacing:.02em;
}
.nv-sec-h .nv-meta{font-size:var(--fs-2xs);color:var(--txt-3);font-variant-numeric:tabular-nums}
.nv-sec-h .nv-all{
margin-left:auto;flex:none;
display:inline-flex;align-items:center;gap:5px;
font-size:var(--fs-sm);font-weight:var(--fw-6);color:var(--txt-2);
transition:color var(--t-fast),gap var(--t-fast);
}
.nv-sec-h .nv-all svg{width:12px;height:12px}
.nv-sec-h .nv-all:hover{color:var(--c1);gap:9px}
/* ---------- ③ 二级分组：5 列 ---------- */
.nv-groups{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px 20px}
.nv-g{min-width:0}
.nv-g-h{
display:flex;align-items:baseline;justify-content:space-between;gap:8px;
padding-bottom:7px;
}
.nv-g-h b{
font-size:var(--fs-sm);font-weight:var(--fw-7);color:var(--txt);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
transition:color var(--t-fast);
}
.nv-g-h em{
flex:none;font-style:normal;font-size:var(--fs-3xs);color:var(--txt-3);
font-variant-numeric:tabular-nums;
}
.nv-g-h:hover b{color:var(--c1)}
.nv-g-l{display:flex;flex-direction:column}
.nv-g-l a{
font-size:var(--fs-2xs);line-height:1.95;color:var(--txt-2);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
transition:color var(--t-fast),padding-left var(--t-fast);
}
.nv-g-l a:hover{color:var(--c1);padding-left:3px}
/* ---------- ④ 广告四宫格（目录下方，四个 slot） ---------- */
.nv-ads{
display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;
margin:18px 0 0;
}
.nv-ad{
position:relative;display:flex;flex-direction:column;justify-content:center;gap:3px;
min-height:118px;padding:22px 18px 18px;
border-radius:var(--r-card);background:var(--panel);
box-shadow:inset 0 0 0 1px var(--line);
transition:background var(--t-fast),box-shadow var(--t-fast);
}
.nv-ad:hover{background:var(--panel-2);box-shadow:inset 0 0 0 1px var(--c1-line)}
.nv-ad b{font-size:var(--fs-sm);font-weight:var(--fw-6);color:var(--txt)}
.nv-ad span:last-child{font-size:var(--fs-3xs);color:var(--txt-3);line-height:1.6}
/* 角标恒在左上 */
.nv-ad .ad-tag{
position:absolute;left:14px;top:12px;
padding:2px 6px;border-radius:var(--r-xs);
font-size:var(--fs-3xs);font-weight:var(--fw-7);letter-spacing:.06em;line-height:1.5;
color:var(--c1);background:var(--c1-soft);
}
/* ---------- ⑤ 精选 + 榜单 并排 ---------- */
.nv-pair{
display:grid;grid-template-columns:minmax(0,1.62fr) minmax(0,1fr);
gap:14px;margin-top:18px;
}
.nv-block{
padding:20px 22px 22px;border-radius:var(--r-card);background:var(--panel);
box-shadow:inset 0 0 0 1px var(--line);
}
.nv-block-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:14px}
.nv-block-h h2{
margin:0;display:flex;align-items:center;gap:9px;
font-size:var(--fs-lg);font-weight:var(--fw-8);letter-spacing:-.02em;color:var(--txt);
}
.nv-block-h h2 .n{
font-size:var(--fs-3xs);font-weight:var(--fw-7);color:var(--c1);
background:var(--c1-soft);padding:2px 7px;border-radius:var(--r-xs);letter-spacing:.04em;
}
.nv-block-h a{
flex:none;display:inline-flex;align-items:center;gap:5px;
font-size:var(--fs-2xs);font-weight:var(--fw-6);color:var(--txt-2);
}
.nv-block-h a svg{width:11px;height:11px}
.nv-block-h a:hover{color:var(--c1)}
.nv-block-h em{font-style:normal;font-size:var(--fs-3xs);color:var(--txt-3)}
/* 精选 4 卡：2×2 */
.nv-picks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.nv-pick{
display:flex;align-items:center;gap:10px;min-width:0;
padding:10px 12px;border-radius:var(--r-s);
background:var(--panel-2);box-shadow:inset 0 0 0 1px var(--line);
transition:box-shadow var(--t-fast),transform var(--t-fast) var(--ease);
}
.nv-pick:hover{box-shadow:inset 0 0 0 1px var(--c1-line);transform:translateY(-1px)}
.nv-pick-ic{
flex:0 0 auto;width:32px;height:32px;border-radius:9px;
display:grid;place-items:center;overflow:hidden;
background:var(--panel);color:var(--txt-3);
font-size:var(--fs-md);font-weight:var(--fw-8);
}
.nv-pick-ic img{width:24px;height:24px;object-fit:contain;display:block}
.nv-pick-b{flex:1;min-width:0}
.nv-pick-b b{
display:block;font-size:var(--fs-sm);font-weight:var(--fw-6);color:var(--txt);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
transition:color var(--t-fast);
}
.nv-pick-b i{
display:block;margin-top:2px;font-style:normal;font-size:var(--fs-3xs);
line-height:1.5;color:var(--txt-3);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.nv-pick:hover .nv-pick-b b{color:var(--c1)}
/* 榜单 10 条：2 列 × 5 行 */
.nv-rank{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px;counter-reset:nvrk}
.nv-rank a{
display:flex;align-items:center;gap:7px;padding:6px 0;border-bottom:1px solid var(--line);
}
.nv-rank a:nth-last-child(-n+2){border-bottom:0;padding-bottom:0}
.nv-rank a::before{
counter-increment:nvrk;content:counter(nvrk,decimal-leading-zero);
flex:0 0 auto;width:18px;
font-family:var(--mono);font-size:var(--fs-3xs);font-weight:var(--fw-7);
color:var(--txt-3);font-variant-numeric:tabular-nums;
}
.nv-rank a:nth-child(-n+3)::before{color:var(--c1)}
.nv-rank b{
flex:1;min-width:0;font-size:var(--fs-2xs);font-weight:var(--fw-6);color:var(--txt-2);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
transition:color var(--t-fast);
}
.nv-rank a:hover b{color:var(--c1)}
.nv-rank em{flex:none;font-style:normal;font-size:var(--fs-3xs);color:var(--txt-3);font-variant-numeric:tabular-nums}
/* ---------- ⑥ 通栏广告条 ---------- */
.nv-bar{
position:relative;display:flex;align-items:center;gap:18px;
margin-top:18px;padding:20px 24px 20px 78px;
border-radius:var(--r-card);background:var(--c1-soft);
box-shadow:inset 0 0 0 1px var(--c1-line);
}
.nv-bar .ad-tag{
position:absolute;left:16px;top:50%;transform:translateY(-50%);
padding:3px 8px;border-radius:var(--r-xs);
font-size:var(--fs-3xs);font-weight:var(--fw-7);letter-spacing:.06em;
color:var(--c1);background:color-mix(in srgb,var(--c1) 16%,transparent);
}
.nv-bar-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.nv-bar-t b{font-size:var(--fs-sm);font-weight:var(--fw-6);color:var(--txt)}
.nv-bar-t span{font-size:var(--fs-2xs);color:var(--txt-2)}
.nv-bar-go{
flex:none;display:inline-flex;align-items:center;gap:6px;
height:34px;padding:0 14px;border-radius:var(--r-pill);
font-size:var(--fs-2xs);font-weight:var(--fw-6);color:var(--on-accent);
background:var(--c1);
}
.nv-bar-go svg{width:11px;height:11px}
/* ---------- ⑦ 资讯赞助行 / 文字链 ---------- */
.nv-sponsor{
display:flex;align-items:center;gap:9px;margin-top:8px;
padding:9px 13px;border-radius:var(--r-s);
background:var(--panel-2);box-shadow:inset 0 0 0 1px var(--line);
font-size:var(--fs-2xs);color:var(--txt-2);
transition:box-shadow var(--t-fast),color var(--t-fast);
}
.nv-sponsor:hover{color:var(--txt);box-shadow:inset 0 0 0 1px var(--c1-line)}
.nv-sponsor .ad-tag{
flex:none;padding:1px 6px;border-radius:var(--r-xs);
font-size:var(--fs-3xs);font-weight:var(--fw-7);letter-spacing:.06em;
color:var(--c1);background:var(--c1-soft);
}
.nv-links{
display:flex;flex-wrap:wrap;align-items:center;gap:6px 4px;
margin-top:14px;padding:13px 16px;border-radius:var(--r-card);
background:var(--panel);box-shadow:inset 0 0 0 1px var(--line);
}
.nv-links > b{
flex:none;margin-right:6px;font-size:var(--fs-3xs);font-weight:var(--fw-7);
color:var(--c1);letter-spacing:.06em;
}
.nv-links a{
padding:0 8px;font-size:var(--fs-2xs);color:var(--txt-2);
transition:color var(--t-fast);
}
.nv-links a em{font-style:normal;color:var(--txt-3)}
.nv-links a:hover{color:var(--c1)}
.nv-links-go{color:var(--c1) !important;font-weight:var(--fw-6)}
/* ---------- ⑧ 响应 ---------- */
@media (max-width:1339px){
.nv-groups{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:1079px){
.nv-groups{grid-template-columns:repeat(3,minmax(0,1fr))}
.nv-ads{grid-template-columns:repeat(2,minmax(0,1fr))}
.nv-pair{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:767px){
.nv-sec{padding:16px 15px 18px}
.nv-sec-h h2{font-size:var(--fs-lg);padding-left:34px}
.nv-groups{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 14px}
.nv-ads{grid-template-columns:minmax(0,1fr)}
.nv-picks{grid-template-columns:minmax(0,1fr)}
.nv-rank{grid-template-columns:minmax(0,1fr)}
.nv-rank a:nth-last-child(2){border-bottom:1px solid var(--line);padding-bottom:6px}
.nv-bar{flex-direction:column;align-items:flex-start;gap:12px;padding:34px 16px 16px}
.nv-bar .ad-tag{left:16px;top:12px;transform:none}
.nv-nav{padding:8px 0}
.nv-nav a{height:31px;padding:0 11px;font-size:var(--fs-2xs)}
}
/* ==========================================================================
44.2 首轮实测修正（第 44 轮 · 部署后回测）
--------------------------------------------------------------------------
① 页面左上角凭空出现一个「广告」角标（y≈84，压在首屏上沿）。
根因：.ad-tag 的历史规则带 position:absolute，44.1 给 .nv-sponsor 的角标
只写了 flex 布局、没写 position，于是它按最近的定位祖先定位 ——
.nv-sponsor 没设 position:relative，一路逃到页面顶部。
→ 明确改成 static，让它老实待在 flex 行里。
② 分组标题的计数被 justify-content:space-between 推到列的最右边，
「AI思维导图」和「29」隔着一百多像素，读起来像两列不相干的数字。
→ 改成紧跟标题，间距 6px。
========================================================================== */
.nv-sponsor{position:relative}
.nv-sponsor .ad-tag{position:static !important;left:auto;top:auto}
.nv-g-h{justify-content:flex-start;gap:6px}
.nv-g-h b{flex:0 1 auto;min-width:0}
.nv-g-h em{margin-left:auto}
/* 44.3 分组栅格改 auto-fit：4 个分组的区块原来留一个空列（第 44 轮 · 二轮回测）
--------------------------------------------------------------------------
固定 5 列时，「写作与对话」只有 4 个二级分类，第 5 列空着 —— 区块右侧白白
少掉 200px，看着像内容没加载完。auto-fit 会把空轨道折叠，4 个分组就铺满 4 列。
分组标题的计数改成紧跟名称，不再推到列尾（44.2 的 margin-left:auto 反转）。 */
.nv-groups{grid-template-columns:repeat(auto-fit,minmax(198px,1fr))}
.nv-g-h em{margin-left:0}
@media (max-width:767px){
.nv-groups{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
}
/* 44.4 列宽定到 238px：1440 下正好 5 列（第 44 轮 · 三轮回测）
--------------------------------------------------------------------------
44.3 的 198px 在 1440 下算出 6 列 —— 「办公与学习」7 个分组变成 6+1，
第二行只挂一个孤零零的格子，比空一列更难看。238px 算出 5 列：7 → 5+2，
9 → 5+4，4 个分组的区块靠 auto-fit 折叠空轨道铺满整行，两头都成立。 */
.nv-groups{grid-template-columns:repeat(auto-fit,minmax(238px,1fr))}
/* 44.5 44.4 把手机档的列数一起盖掉了（第 44 轮 · 四轮回测）
--------------------------------------------------------------------------
44.4 写在文件末尾，和 44.1 里 @media 767 的那条同权重但更靠后 ——
390 宽实测 .nv-groups 变成 320px 一列，分组上下堆成一长条。
手机档必须重新声明一遍，且要排在 44.4 之后。 */
@media (max-width:767px){
.nv-groups{grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:14px 12px}
}
/* 44.6 区块序号跳号（第 44 轮 · 五轮回测）
--------------------------------------------------------------------------
实测第一个区块显示「02」、第二个「04」—— 因为 44.1 在 .nv-sec 和
.nv-sec-h h2::before 两处都写了 counter-increment，每个区块加了两次。
计数器只在 ::before 里加，父容器负责 reset。 */
.rs-wrap{counter-reset:nvsec}
.nv-sec{counter-increment:none}
/* ==========================================================================
44.7 商务合作页组件（第 44 轮新建 hezuo.html）
--------------------------------------------------------------------------
页面主体复用关于页已有的 ab-* 体系（ab-hero / ab-sec / ab-grid4 / ab-card /
ab-steps / ab-no / ab-contact），这里只补三样关于页没有的东西：
· 价格卡（写上「价格面议」，不摆假价目表）
· 联系方式卡（邮箱 / 微信并排，微信带一键复制）
· 复制按钮的两个态
复用而不是另起一套，是为了两页看起来是同一个站 —— 页面之间的一致性
比单个页面的精致更值钱。
========================================================================== */
.hz-price{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:18px;align-items:stretch}
.hz-price-main{
display:flex;flex-direction:column;justify-content:center;gap:4px;
padding:26px 26px 24px;border-radius:var(--r-card);
background:var(--panel);box-shadow:inset 0 0 0 1px var(--c1-line);
}
.hz-price-k{font-size:var(--fs-2xs);color:var(--txt-3);letter-spacing:.1em}
.hz-price-v{font-size:40px;font-weight:var(--fw-8);letter-spacing:-.03em;line-height:1.2;color:var(--c1)}
.hz-price-main p{margin:8px 0 0;font-size:var(--fs-sm);line-height:1.78;color:var(--txt-2)}
.hz-price-l{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;justify-content:center}
.hz-price-l li{display:flex;flex-direction:column;gap:2px}
.hz-price-l b{font-size:var(--fs-sm);font-weight:var(--fw-7);color:var(--txt)}
.hz-price-l span{font-size:var(--fs-sm);line-height:1.72;color:var(--txt-2)}
.hz-contact{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:22px}
.hz-c{
display:flex;flex-direction:column;gap:3px;
padding:16px 18px 16px;border-radius:var(--r-s);
background:var(--panel);box-shadow:inset 0 0 0 1px var(--line);
transition:box-shadow var(--t-fast);
}
a.hz-c:hover{box-shadow:inset 0 0 0 1px var(--c1-line)}
.hz-c-k{font-size:var(--fs-3xs);color:var(--txt-3);letter-spacing:.12em}
.hz-c b{font-size:var(--fs-md);font-weight:var(--fw-7);color:var(--txt);word-break:break-all;letter-spacing:-.01em}
.hz-c-go{margin-top:2px;font-size:var(--fs-2xs);font-weight:var(--fw-6);color:var(--c1)}
.hz-copy{
align-self:flex-start;margin-top:6px;height:28px;padding:0 11px;
border:0;border-radius:var(--r-pill);cursor:pointer;
font-family:inherit;font-size:var(--fs-3xs);font-weight:var(--fw-6);
color:var(--c1);background:var(--c1-soft);box-shadow:inset 0 0 0 1px var(--c1-line);
transition:color var(--t-fast),background var(--t-fast);
}
.hz-copy:hover{color:var(--txt)}
.hz-copy.is-done{color:var(--on-accent);background:var(--c1);box-shadow:none}
@media (max-width:900px){
.hz-price{grid-template-columns:minmax(0,1fr)}
.hz-price-v{font-size:34px}
}
@media (max-width:560px){
.hz-contact{grid-template-columns:minmax(0,1fr)}
}
/* ==========================================================================
44.8 亮色主题下滚动后顶栏变白、白字看不见（第 44 轮 · 六轮回测）
--------------------------------------------------------------------------
实测（1440 / 亮色 / scroll=600）：.nav 背景 = rgb(231,235,244)（浅），
而 LOGO 仍是白版、按钮文字仍是 #DCE6F4 —— 等于整条顶栏消失。
来源是第 7 轮留下的：
html[data-theme="light"] .pg-shell .nav[data-scrolled]{background:rgba(255,255,255,.92)}
41.7 补过一条 !important，但它的选择器少一个 html[data-theme] 前缀，
在部分构建里仍被 4661 的 color-mix(--bg 94%) 抢先解析出浅色。
口径与 36.2 一致：**顶栏底色全宽度、全主题、滚不滚都一样，只有 #2C3E64 一个值。**
这里把亮色前缀补齐并放到文件末尾，权重与位置都压住。
========================================================================== */
html[data-theme="light"] .pg-shell .nav,
html[data-theme="light"] .pg-shell .nav[data-scrolled],
html:not([data-theme="light"]) .pg-shell .nav[data-scrolled]{
background:var(--band-top) !important;
-webkit-backdrop-filter:none !important;
backdrop-filter:none !important;
border-bottom-color:var(--band-line) !important;
}
/* ==========================================================================
44.9 FAQ 缩成左侧一条窄列（第 44 轮 · 商务合作页回测时发现，关于页同病）
--------------------------------------------------------------------------
实测 1440 下 .ab-faq 是 display:flex / column，条目被压到 300px 左右、
贴着左边缘，右侧空掉一整个 900px 宽的版面 —— 两页（关于我们 / 商务合作）
都一样。原始设计（6567 行）本来是两列 grid，被 9471 行的 flex 覆盖了。
这里恢复两列，并强制条目撑满单元格（有的 details 被设成 fit-content）。
关于页同时受益：这是同一个类的同一处问题，只修新页面等于留着一半的坑。
========================================================================== */
.ab-faq{
display:grid !important;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:12px;align-items:start;
}
.ab-faq > details{width:auto !important;max-width:none !important}
@media (max-width:900px){
.ab-faq{grid-template-columns:minmax(0,1fr)}
}
/* ==========================================================================
45.0 首页正文导航区重做：分类 Tab + 工具卡片网格（第 45 轮）
--------------------------------------------------------------------------
站长：「https://www.aigc.cn 模仿这个的正文导航区域，重新设计，导航按钮鼠标
放在上面要有动态效果。不要照抄他的。」
44 轮把导航区做成了「二级分组 × 5 条纯文字链接」——160 条链接铺一页，
密度够，但读完像一张网站地图（sitemap），不像导航站。差的是三样东西：
· 图标：纯文字列表没有视觉落点，眼睛扫不起来；
· 简介：只给工具名，读者不知道点进去会看到什么；
· 层次：一级分类下面直接铺 5 条链接，中间的二级分类只是个小标题。
45 轮取 aigc.cn 的组织思路（一级分类分段 → 二级分类切 Tab → 卡片网格），
视觉全部重做，不抄它的白卡 / 方角 / 灰底 / iconfont：
· 分段不用卡片包住，直接平铺 —— 五个区块是同一张目录的五个章节，
不是五个互不相干的盒子；
· Tab 用全站统一的 pill + --c1-soft 选中态（aigc 是方角浅灰）；
· 卡片用 --panel 底 + 1px inset 描边，图标位用首字母色块兜底
（库里 1065 条 ico 是文章配图不是 logo，直接当图标会是一堆照片）；
· 动效是这轮的重点，见 45.2。
结构对应：
.nn-sec 一级分类章节（5 个）
.nn-tabs 二级分类 pill 条（横向可滚）
.nn-pans 面板容器（.nn-pan 一一对应 .nn-tab，由 app.js 切换）
.nn-grid 12 格卡片墙（6 列 × 2 行）
========================================================================== */
/* ---------- ① 章节：不包盒子，靠留白与标题重量分章 ---------- */
.rs-main{counter-reset:nnsec}
.nn-sec{
margin:0 0 34px;
scroll-margin-top:calc(var(--nav-h) + 56px);
}
.nn-sec:last-of-type{margin-bottom:26px}
.nn-sec-h{
display:flex;align-items:center;gap:11px;
padding-bottom:13px;
}
/* 序号：mono 数字 + c1-soft 底，跟全站「编辑标号」同一套语言 */
.nn-sec-h .nn-no::before{
counter-increment:nnsec;content:counter(nnsec,decimal-leading-zero);
}
.nn-sec-h .nn-no{
flex:0 0 auto;
padding:3px 8px;border-radius:var(--r-xs);
font-family:var(--mono);font-size:var(--fs-2xs);font-weight:var(--fw-7);
letter-spacing:.02em;line-height:1.5;font-variant-numeric:tabular-nums;
color:var(--c1);background:var(--c1-soft);box-shadow:inset 0 0 0 1px var(--c1-line);
}
.nn-sec-h h2{
margin:0;flex:0 1 auto;min-width:0;
font-size:var(--fs-xl);font-weight:var(--fw-8);
letter-spacing:-.025em;line-height:1.35;color:var(--txt);
}
.nn-sec-h .nn-cnt{
flex:0 0 auto;font-size:var(--fs-2xs);color:var(--txt-3);
font-variant-numeric:tabular-nums;
}
.nn-sec-h .nn-more{
margin-left:auto;flex:0 0 auto;
display:inline-flex;align-items:center;gap:5px;
font-size:var(--fs-sm);font-weight:var(--fw-6);color:var(--txt-2);
transition:color var(--t-fast),gap var(--t-fast) var(--ease);
}
.nn-sec-h .nn-more svg{width:12px;height:12px}
.nn-sec-h .nn-more:hover{color:var(--c1);gap:10px}
/* ---------- ② 二级分类 Tab 条 ---------- */
.nn-tabs{
display:flex;align-items:center;gap:7px;
margin:0 0 15px;padding-bottom:2px;
overflow-x:auto;scrollbar-width:none;
-webkit-overflow-scrolling:touch;
}
.nn-tabs::-webkit-scrollbar{display:none}
.nn-tab{
position:relative;isolation:isolate;overflow:hidden;
flex:none;display:inline-flex;align-items:center;gap:6px;
height:34px;padding:0 13px;border:0;border-radius:var(--r-pill);
font-family:inherit;font-size:var(--fs-sm);font-weight:var(--fw-6);
line-height:1;color:var(--txt-2);background:transparent;
box-shadow:inset 0 0 0 1px var(--line);
white-space:nowrap;cursor:pointer;
transition:color .2s var(--ease),box-shadow .2s var(--ease);
}
/* 悬停底：从左侧展开的一条软色，比直接换背景色有「按下去的反应」 */
.nn-tab::before{
content:"";position:absolute;inset:0;z-index:-1;
background:var(--c1-soft);
transform:scaleX(0);transform-origin:left center;
transition:transform .26s var(--ease);
}
.nn-tab:hover{color:var(--c1);box-shadow:inset 0 0 0 1px var(--c1-line)}
.nn-tab:hover::before{transform:scaleX(1)}
.nn-tab:active{transform:translateY(1px)}
.nn-tab em{
font-style:normal;font-size:var(--fs-3xs);font-weight:var(--fw-6);
color:var(--txt-3);font-variant-numeric:tabular-nums;
transition:color .2s var(--ease);
}
.nn-tab:hover em{color:var(--c1);opacity:.72}
/* 选中态：不靠实心主色（一整排实心红会把目录压死），跟 .nv-nav 一致 */
.nn-tab.is-on{
color:var(--c1);background:var(--c1-soft);
box-shadow:inset 0 0 0 1px var(--c1-line);
}
.nn-tab.is-on em{color:var(--c1);opacity:.72}
.nn-tab.is-on::before{transform:scaleX(0)}
/* ---------- ③ 面板 ---------- */
.nn-pans{position:relative}
.nn-pan{display:none}
/* 无 JS 兜底：先露第一个面板，脚本就绪后由 is-on 接管 */
.nn-pan:first-child{display:block}
html.nn-js .nn-pan:first-child{display:none}
html.nn-js .nn-pan.is-on{display:block;animation:nnPanIn .26s var(--ease) both}
@keyframes nnPanIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
html.nn-js .nn-pan.is-on{animation:none}
}
/* ---------- ④ 卡片墙：6 列 × 2 行 ---------- */
.nn-grid{
display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
gap:10px;grid-auto-rows:52px;align-content:start;
}
.nn-card{
position:relative;overflow:hidden;
display:flex;align-items:center;gap:9px;min-width:0;
padding:0 10px;border-radius:var(--r-s);
background:var(--panel);box-shadow:inset 0 0 0 1px var(--line);
transition:transform .22s var(--ease),box-shadow .22s var(--ease),background .22s var(--ease);
}
/* 悬停时左上角散开的一层暖光，把卡片从整片目录里托起来 */
.nn-card::before{
content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
background:radial-gradient(130% 120% at 0% 0%,var(--c1-soft),transparent 64%);
opacity:0;transition:opacity .26s var(--ease);
}
/* 扫光：一条斜向高光从左划到右。--txt 派生，明暗两态自动反过来 */
.nn-card::after{
content:"";position:absolute;top:0;bottom:0;left:0;width:58%;z-index:0;pointer-events:none;
background:linear-gradient(100deg,transparent 12%,color-mix(in srgb,var(--txt) 9%,transparent) 50%,transparent 88%);
transform:translateX(-160%) skewX(-14deg);
opacity:0;
}
.nn-card:hover{
transform:translateY(-2px);
background:var(--panel-2);
box-shadow:inset 0 0 0 1px var(--c1-line),0 10px 22px -14px rgba(0,0,0,.55);
}
.nn-card:hover::before{opacity:1}
.nn-card:hover::after{opacity:1;animation:nnSweep .62s var(--ease) forwards}
@keyframes nnSweep{from{transform:translateX(-160%) skewX(-14deg)}to{transform:translateX(230%) skewX(-14deg)}}
@media (prefers-reduced-motion:reduce){
.nn-card:hover::after{animation:none;opacity:0}
.nn-card:hover{transform:none}
}
/* 图标位：36 方，图片优先，取不到就露首字母 */
.nn-ic{
position:relative;z-index:1;flex:0 0 auto;
width:34px;height:34px;border-radius:9px;
display:grid;place-items:center;overflow:hidden;
background:var(--panel-2);color:var(--txt-2);
font-size:var(--fs-md);font-weight:var(--fw-8);line-height:1;
transition:transform .26s var(--ease),box-shadow .26s var(--ease),background .26s,color .26s;
}
/* 首字母垫底：整条标题塞进来，只露 1 个字宽（中文正好一个字，
英文露 1~1.5 个字母也读得懂），图片一盖上去就看不见了。 */
.nn-ic > b{
display:block;width:1.08em;overflow:hidden;white-space:nowrap;
text-align:center;font-size:var(--fs-md);font-weight:var(--fw-8);line-height:1;
letter-spacing:0;
}
.nn-ic img{
position:absolute;inset:0;width:100%;height:100%;
object-fit:contain;padding:5px;display:block;
background:var(--panel-2);
}
.nn-card:hover .nn-ic{
transform:scale(1.08) rotate(-3deg);
background:var(--c1-soft);color:var(--c1);
box-shadow:inset 0 0 0 1px var(--c1-line);
}
/* 文字：名称一行 + 简介一行，都在格内截断，不做换行抖动 */
.nn-b{position:relative;z-index:1;flex:1;min-width:0}
.nn-b b{
display:block;font-size:var(--fs-sm);font-weight:var(--fw-6);
line-height:1.42;color:var(--txt);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
transition:color .2s var(--ease);
}
.nn-b i{
display:block;margin-top:1px;font-style:normal;
font-size:var(--fs-3xs);line-height:1.4;color:var(--txt-3);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
transition:color .2s var(--ease);
}
.nn-card:hover .nn-b b{color:var(--c1)}
.nn-card:hover .nn-b i{color:var(--txt-2)}
/* 右上角箭头：悬停才从卡片外滑进来 */
.nn-go{
position:absolute;z-index:1;right:8px;top:7px;
width:11px;height:11px;color:var(--c1);
opacity:0;transform:translate(-5px,3px);
transition:opacity .24s var(--ease),transform .24s var(--ease);
}
.nn-card:hover .nn-go{opacity:1;transform:none}
/* ---------- ⑤ 章节尾部：本类还有多少 ---------- */
.nn-tail{
display:flex;align-items:center;justify-content:flex-end;gap:6px;
margin-top:11px;font-size:var(--fs-2xs);color:var(--txt-3);
}
.nn-tail a{
display:inline-flex;align-items:center;gap:4px;
font-weight:var(--fw-6);color:var(--txt-2);
transition:color var(--t-fast),gap var(--t-fast) var(--ease);
}
.nn-tail a svg{width:10px;height:10px}
.nn-tail a:hover{color:var(--c1);gap:8px}
/* ---------- ⑥ 锚点条：跟新章节对齐，按钮加滑入底 ---------- */
.nv-nav > b::after{content:"";display:none}
.nv-nav a{
position:relative;isolation:isolate;overflow:hidden;
transition:color .2s var(--ease),box-shadow .2s var(--ease);
}
.nv-nav a::before{
content:"";position:absolute;inset:0;z-index:-1;
background:var(--c1-soft);
transform:scaleX(0);transform-origin:left center;
transition:transform .26s var(--ease);
}
.nv-nav a:hover::before{transform:scaleX(1)}
/* ---------- ⑦ 响应 ---------- */
@media (max-width:1439px){
.nn-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
}
@media (max-width:1199px){
.nn-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:991px){
.nn-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:767px){
.nn-sec{margin-bottom:26px}
.nn-sec-h{gap:8px;padding-bottom:11px}
.nn-sec-h h2{font-size:var(--fs-lg)}
.nn-sec-h .nn-cnt{display:none}
.nn-sec-h .nn-more{font-size:var(--fs-2xs)}
.nn-tabs{gap:6px;margin-bottom:12px}
.nn-tab{height:31px;padding:0 11px;font-size:var(--fs-2xs)}
.nn-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;grid-auto-rows:46px}
.nn-card{padding:0 9px;gap:8px}
.nn-ic{width:30px;height:30px;border-radius:8px;font-size:var(--fs-sm)}
.nn-ic img{padding:4px}
.nn-b i{display:none}
.nn-go{display:none}
.nn-tail{margin-top:9px}
}
/* ==========================================================================
45.1 导航区二轮修正：深色下卡片托不起来（第 45 轮 · 部署后回测）
--------------------------------------------------------------------------
实测 1440 深色：卡片用 --panel(#16181E) 压在 --bg(#0A0B0E) 上，
亮度差只有 6%，1px rgba(255,255,255,.075) 的描边也几乎融进背景 ——
整片导航区读起来像「一排排浮着的文字」，没有卡片的实体感。
三条一起提：
· 卡片底 --panel → --panel-2(#1D2027)，描边 .075 → .14；
· 图标位统一浅底 #EFF2F7：库里 3255 条 ico 是白底 png（favicon 抓来的），
深色卡片上直接摆就是一堆白方块；统一浅底后，白底 logo 融进去、
透明底深色 logo 也看得见，两主题还长一个样；
· 简介 --txt-3(#7C8492) → --txt-2(#AEB5C0)：13 个字的小字再压一档就糊了。
========================================================================== */
.nn-card{
background:var(--panel-2);
box-shadow:inset 0 0 0 1px var(--line-2);
}
.nn-card:hover{
background:var(--panel-3);
box-shadow:inset 0 0 0 1px var(--c1-line),0 12px 26px -16px rgba(0,0,0,.7);
}
.nn-ic{background:#EFF2F7}
.nn-ic > b{color:#6B7280}
.nn-ic img{background:#EFF2F7}
.nn-card:hover .nn-ic{
background:#EFF2F7;color:#6B7280;
box-shadow:0 0 0 2px var(--c1-line),0 4px 12px -6px rgba(0,0,0,.6);
}
.nn-b i{color:var(--txt-2)}
/* 章节之间多给 6px：卡片网格的底边是硬边，34px 收不住 */
.nn-sec{margin-bottom:40px}
/* ==========================================================================
45.2 亮色主题下卡片边界消失（第 45 轮 · 三轮回测）
--------------------------------------------------------------------------
实测亮色 1440：--bg #E7EBF4、--panel #FFFFFF、--panel-2 #F1F3F6。
45.1 给卡片统一用了 --panel-2 —— 在深色下是对的（比页面底亮一档），
亮色下就反了：#F1F3F6 压在 #E7EBF4 上只差 4% 明度，整片卡片糊成一片底。
两个主题的「卡面」本来就是不同令牌：
深色 页面底 #0A0B0E → 卡面 --panel-2 #1D2027（比底亮）
亮色 页面底 #E7EBF4 → 卡面 --panel #FFFFFF（比底亮）
所以按主题分别取，而不是硬找一个两边都成立的中间值。
图标浅底同理会消失：#EFF2F7 压在白卡上等于没底。
亮色下改用略深的 #EDF0F6 并补 1px 描边，才不会是一块空白。
========================================================================== */
html[data-theme="light"] .nn-card{
background:var(--panel);
box-shadow:inset 0 0 0 1px var(--line),0 1px 3px rgba(14,18,26,.05);
}
html[data-theme="light"] .nn-card:hover{
background:var(--panel);
box-shadow:inset 0 0 0 1px var(--c1-line),0 9px 22px -13px rgba(14,18,26,.30);
}
html[data-theme="light"] .nn-ic{
background:#EDF0F6;color:#6B7280;
box-shadow:inset 0 0 0 1px rgba(14,18,26,.07);
}
html[data-theme="light"] .nn-ic img{background:#EDF0F6}
html[data-theme="light"] .nn-card:hover .nn-ic{
background:#EDF0F6;color:#6B7280;
box-shadow:0 0 0 2px var(--c1-line),0 4px 10px -6px rgba(14,18,26,.3);
}
/* 亮色下 --c1-soft 只有 7% 不透明度，悬停光晕等于没有 → 换成极浅的红雾 */
html[data-theme="light"] .nn-card::before{
background:radial-gradient(130% 120% at 0% 0%,rgba(195,13,35,.055),transparent 62%);
}
/* ==========================================================================
45.3 卡片右上角箭头改 CSS 遮罩（第 45 轮）
--------------------------------------------------------------------------
原来每张卡都内联一个 3 行的