/* ==========================================================================
 * ZBP 书库首页 / 分类页 版式层（2026-10-01）
 * —— 全部数值取自 Penpot 设计稿的实测规格，不自行发挥：
 *    hero 通栏 #fdf4f8（主题色 3%）｜标题 32/600｜说明 14 #5a6472
 *    搜索框 52 高 / 圆角 26 / 白底 #e9ebef 边；按钮 36 高 / 圆角 18 / 主题色
 *    热词 chip 26 高 / 圆角 13 / 白底；指南卡 600 宽 / 圆角 10 / 白底 + 边
 *    数据格 180×66 / 圆角 8 / 白底；数字 19/600 主题色；标签 11.5 #9aa0a6
 *    筛选条卡 圆角 12 / 白底 + 边；chip 30 高 / 圆角 15 / #f4f5f7 / 文字 12.5 #5a6472 / 计数 12 主题色 / 内边距 12 + 间隙 20
 *    区块标题 14.5/600 #1f2329 + 15px 主题色图标；右侧说明 11.5 #9aa0a6；链接 12.5 主题色
 *    卡片 313×272 / 圆角 10 / 白底 + 边；封面 293×168 / 圆角 8 / #edeef1
 *    书名 12.5/600 #1f2329；页数 11 #9aa0a6；下载 11 主题色 + 11px 图标；排行角标 28×22 / 圆角 6
 *    排序 chip 28 高 / 圆角 14；选中 #fde7f1（主题色 10%）；分页钮 34×34 / 圆角 6
 *    版权段 12 #5a6472 / 行高 24
 * 颜色：能走主题变量的走变量（夜间模式自动跟随），否则用稿上色值 + 变量兜底。
 * ========================================================================== */

/* 通栏 hero 带用 calc(50% - 50vw) 出血，而 100vw 含纵向滚动条宽 → 带子比可视区宽 8px，
   书库/分类页底部会多出一条横向滚动条（详情页在 detail-v5.css §0 已同样收口）。
   必须写在根元素：视口本身就是滚动容器，不影响子元素 sticky；写在 body 上会被传播到视口而失效。
   scrollbar-gutter: stable 与详情页一致：弹层/灯箱锁滚动时滚动条消失，不预留槽位整页会横向跳。 */
html { overflow-x: hidden; scrollbar-gutter: stable; }

.zpb-library,
.zpb-category {
    --zpb-accent:   var(--theme-color, #f04494);
    --zpb-ink:      var(--main-color, #1f2329);
    --zpb-body:     var(--muted-color, #5a6472);
    --zpb-muted:    color-mix(in oklab, var(--main-color, #1f2329) 55%, transparent);
    --zpb-border:   var(--main-border-color, #e9ebef);
    --zpb-chip-bg:  color-mix(in oklab, var(--main-color, #1f2329) 4%, var(--main-bg-color, #fff));
    /* hero 淡底带的打底色必须用「页面底色」--body-bg-color（= 资源详情页那层 #f5f6f7），
       不能再用 --main-bg-color（那是卡片白底）。用错会显得整块 hero 是白底，
       与站点其它页面的灰底不一致；用主题变量后浅色/夜间自动跟随。 */
    --zpb-hero-base: var(--body-bg-color, #f5f6f7);
    /* 淡底带浓度：--zpb-hero-tint 由模板按后台「底色浓度」输出（默认 8%，可 0-40 调）
       3% 太淡看不出是条带（站长 2026-10-01）；改这一个数即可整体加浓/减淡 */
    --zpb-hero-bg:  color-mix(in oklab, var(--theme-color, #f04494) var(--zpb-hero-tint, 8%), var(--zpb-hero-base));
    --zpb-active-bg: color-mix(in oklab, var(--theme-color, #f04494) 10%, var(--main-bg-color, #fff));
    --zpb-radius:   12px;
}

/* ---------- 〇、按设计稿的页面宽度：内容 1344（1440 画板、左右各 48） ---------- */
/* 宽度使用子比主题默认容器宽度（站长要求），本文件不再覆盖 .container */
body.zpb-library-page .content-layout { display: block; }
body.zpb-library-page .zpb-sidebar { display: none; }

/* ---------- 一、面包屑：12.5 #9aa0a6 ---------- */
.zpb-library .zpb-breadcrumb,
.zpb-category .zpb-breadcrumb {
    display: flex; flex-wrap: nowrap; align-items: center; gap: 5px;
    padding: 0; margin: 0 0 8px;
    background: transparent; border: 0;
    font-size: 12.5px; color: var(--zpb-muted);
}
.zpb-library .zpb-breadcrumb i,
.zpb-category .zpb-breadcrumb i { font-size: 12px; }
.zpb-library .zpb-breadcrumb a,
.zpb-category .zpb-breadcrumb a { color: var(--zpb-muted); }
.zpb-library .zpb-breadcrumb a:hover,
.zpb-category .zpb-breadcrumb a:hover { color: var(--zpb-accent); }

/* ---------- 二、hero 通栏淡底 ---------- */
.zpb-lib-hero-wrap {
    position: relative;
    background: var(--zpb-hero-bg);
    margin: 0 calc(50% - 50vw) 20px;
    padding: 34px 24px 28px;
    overflow: hidden;
}
/* ---------------------------------------------------------------------------
 * hero 底图：《清明上河图》长卷，无缝慢速横向滚动
 * 图片由模板输出（.zpb-hero-bg 内两份相同图片，位移一份的宽度即无缝循环）
 * 换图：改插件选项 zpb_hero_image（URL），未配置时不输出、自动回落纯淡底色
 * --------------------------------------------------------------------------- */
.zpb-hero-bg {
    position: absolute; top: 0; left: 0; height: 100%; z-index: 0;
    display: flex; width: max-content;
    opacity: var(--zpb-hero-opacity, .7);   /* 底图浓淡：站长要求更实一点，.5 → .7 */
    animation: zpb-hero-scroll var(--zpb-hero-scroll, 240s) linear infinite;
    will-change: transform;
}
/* 一簇纸堆：绝对定位的不规则散布，纵向溢出上下缘（被 hero 带裁切） */
.zpb-stack { position: relative; flex: 0 0 auto; height: 100%; }
/* 单片纸：白边 + 投影 + 随机角度，大小/位置由行内样式给出 */
.zpb-sheet {
    position: absolute; display: block;
    padding: 8px 8px 16px;
    background: #fffdf8;
    border-radius: 2px;
    box-shadow: 0 10px 26px color-mix(in oklab, currentColor 24%, transparent),
                0 2px 4px color-mix(in oklab, currentColor 18%, transparent);
    transform: rotate(var(--r, 0deg));
    transform-origin: 50% 50%;
}
.zpb-sheet img { display: block; width: 100%; height: auto; }
/* 站长要「从左到右」：起始先左移一整份，再回到 0，视觉上即缓慢向右推进且首尾无缝 */
@keyframes zpb-hero-scroll {
    from { transform: translateX(-50%); }
    to   { transform: translateX(0); }
}
/* hero 渐变遮罩：**只在真的输出了底图（.zpb-hero-bg）时才启用**。
   底图由 zpb_render_hero_background() 输出，未配置/模式关闭时那个容器根本不渲染，
   此时不该留遮罩——否则纯淡底色带上还会压一层渐变，带子看着发脏（站长 2026-10-01）。
   浓淡强弱改这两个 color-mix 的百分比即可 */
.zpb-lib-hero-wrap:has(> .zpb-hero-bg)::after {
    content: ""; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(90deg,
        var(--zpb-hero-bg) 0%,
        color-mix(in oklab, var(--zpb-hero-bg) 62%, transparent) 36%,
        color-mix(in oklab, var(--zpb-hero-bg) 46%, transparent) 100%);
    pointer-events: none;
}
.zpb-lib-hero-inner { position: relative; z-index: 2; }
@media (prefers-reduced-motion: reduce) {
    .zpb-hero-bg { animation: none; }
}
.zpb-lib-hero-inner {
    position: relative; z-index: 2;
    width: 100%; max-width: 1170px; margin: 0 auto;   /* 与子比容器内容宽对齐（1200-15×2） */
}
.zpb-library .zib-widget + .zib-widget,
.zpb-category .zib-widget + .zib-widget { margin-top: 19px; }
.zib-widget.zpb-lib-hero,
.zib-widget.zpb-geo-hero {
    padding: 0 !important; margin: 0 !important;
    background: transparent !important; border: 0 !important; box-shadow: none !important;
    border-radius: 0 !important;
}
/* 书库首页 hero：左内容 + 右使用指南卡 */
.zib-widget.zpb-lib-hero { display: flex; align-items: flex-start; gap: 24px; }
/* 分类页 hero：主栏（标题/说明/搜索/热词/统计格）+ 右侧使用指南卡，与书库 hero 同款两栏 */
.zib-widget.zpb-geo-hero { display: flex; align-items: flex-start; gap: 24px; position: relative; }
/* 框内间距与书库首页逐项对齐（站长反馈：框里的间距要调整）
   标题→说明 12 ／ 说明→搜索 18 ／ 搜索→热词 22 ／ 热词→统计 22 */
.zib-widget.zpb-geo-hero .zpb-hero-desc { margin: 0 0 18px; }
.zpb-lib-hero-main { flex: 1 1 auto; min-width: 0; }
.zpb-hero-title { margin: 0 0 12px; font-size: 32px; font-weight: 600; line-height: 1.2; color: var(--zpb-ink); }
.zpb-hero-desc { margin: 0 0 18px; font-size: 14px; line-height: 1.6; color: var(--zpb-body); }

.zpb-hero-search,
.zpb-hero-search:focus-within,
.zpb-lib-hero-wrap .zpb-hero-search {
    display: flex; align-items: center; gap: 10px;
    height: 52px; padding: 0 8px 0 16px; margin-bottom: 22px;
    border: 1px solid var(--zpb-border) !important; border-radius: 26px;
    /* 站长反馈「填入文字后背景变深」：外框底色强制锁定，压过主题对输入态/聚焦态的着色 */
    background: var(--main-bg-color, #fff) !important;
    box-shadow: none !important;
    max-width: 720px;
}
.zpb-hero-search .fa { color: var(--zpb-muted); font-size: 15px; }
.zpb-hero-search input[type="search"] {
    flex: 1 1 auto; min-width: 0; height: 100%;
    border: 0 !important; background: transparent !important; box-shadow: none !important;
    padding: 0 !important; color: var(--zpb-ink);
    font-size: 13.5px; font-family: inherit; line-height: 1.5;
    -webkit-appearance: none; appearance: none;      /* 去掉浏览器原生搜索框外观 */
    outline: none;
}
/* 输入时不要出现系统自带的下拉/自动填充底色 */

.zpb-hero-search input[type="search"]::-webkit-search-cancel-button,
.zpb-hero-search input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.zpb-hero-search input[type="search"]:focus,
.zpb-hero-search input[type="search"]:hover,
.zpb-hero-search input[type="search"]:active,
.zpb-hero-search input[type="search"]:not(:placeholder-shown),
.zpb-hero-search input[type="search"]:-webkit-autofill {
    background: transparent !important; border: 0 !important; box-shadow: none !important;
    -webkit-text-fill-color: var(--zpb-ink);
}
.zpb-hero-search input::placeholder { color: var(--zpb-muted); }
.zpb-hero-search button {
    flex: 0 0 auto; height: 36px; padding: 0 24px;
    border: 0; border-radius: 18px; cursor: pointer;
    font-size: 13px; color: #fff; background: var(--zpb-accent);
}
.zpb-hero-search button:hover { opacity: .9; }

.zpb-hero-hot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; }
.zpb-hero-hot .lbl { color: var(--zpb-muted); }
.zpb-hero-hot a {
    display: inline-flex; align-items: center; height: 26px; padding: 0 12px;
    border-radius: 13px; font-size: 12px; color: var(--zpb-body);
    background: var(--main-bg-color, #fff);
}
.zpb-hero-hot a:hover { color: var(--zpb-accent); }

/* 使用指南卡：600×186 圆角 10 白底 + 边 */
.zpb-hero-guide {
    flex: 0 1 480px; min-width: 300px; max-width: 600px;
    margin-top: 74px; padding: 16px 18px;
    border-radius: 10px; background: var(--main-bg-color, #fff);
    border: 1px solid var(--zpb-border);
}
.zpb-guide-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 13px; font-weight: 600; color: var(--zpb-ink); }
.zpb-guide-head .fa { color: var(--zpb-accent); font-size: 14px; }
.zpb-hero-guide ul { margin: 0 0 10px; padding: 0; list-style: none; }
.zpb-hero-guide ul li {
    display: flex; align-items: center; gap: 8px;
    padding: 2px 0; font-size: 11.5px; line-height: 1.9; color: var(--zpb-body);
}
.zpb-hero-guide ul li .fa { color: var(--zpb-muted); font-size: 10px; flex: 0 0 10px; }
.zpb-guide-link { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--zpb-accent); }
.zpb-guide-link .fa { font-size: 13px; }
/* 指南卡底部：使用指南链接（捐助按钮已按站长要求移除） */
.zpb-guide-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.zpb-hero-guide ul li.zpb-guide-tip { color: var(--zpb-accent); }

/* ---------- 三、数据带：规格与 ZRG 的 .zrg-article .zrg-hero-stats / .zrg-stat 对齐 ----------
   站长 2026-10-01：宽度也要和 ZRG 统一 —— 整条 width:fit-content（跟着内容收，不拉伸整行），
   每格 flex:0 0 auto + min-width:108px + padding:10px 14px（ZRG 原值），格间 1px 分隔线。 */
.zpb-stat-row {
    display: flex; flex-wrap: wrap; gap: 0; margin-top: 22px;
    width: fit-content; max-width: 100%;
    border-radius: 10px; background: var(--zpb-card, var(--main-bg-color, #fff)); overflow: hidden;
}
.zpb-stat {
    position: relative; flex: 0 0 auto; min-width: 108px; max-width: none; box-sizing: border-box;
    padding: 10px 14px; border-radius: 0; background: transparent;
}
.zpb-stat + .zpb-stat::before {
    content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 1px;
    background: var(--zpb-line, #f1f2f5);
}
.zpb-stat b { font-size: 20px; font-weight: 700; line-height: 1.25; font-variant-numeric: tabular-nums; color: var(--zpb-accent); }
.zpb-stat span { margin-left: 3px; font-size: 20px; font-weight: 700; color: var(--zpb-accent); }
.zpb-stat em { display: block; margin-top: 2px; font-style: normal; font-size: 12px; color: var(--zpb-quiet, var(--zpb-muted, #9aa0a6)); }
/* 数据带里可点的格子（分类页四格接了目标页）—— 动效与 ZRG 的 a.zrg-stat 完全一致：
   悬停 = 7% 主题色淡底 + 标签转主题色 + 底部 2px 主题色横线淡入（左右各让 18px），统一 .2s ease */
.zpb-stat.is-link { color: inherit; text-decoration: none; cursor: pointer; position: relative; transition: background-color .2s ease; }
.zpb-stat.is-link::after {
    content: ""; position: absolute; left: 18px; right: 18px; bottom: 0; height: 2px;
    background: var(--zpb-accent, var(--theme-color, #f04494)); opacity: 0; transition: opacity .2s ease;
}
.zpb-stat.is-link:hover { background: color-mix(in oklab, var(--zpb-accent, var(--theme-color, #f04494)) 7%, transparent); }
.zpb-stat.is-link:hover em { color: var(--zpb-accent, var(--theme-color, #f04494)); }
.zpb-stat.is-link:hover::after { opacity: 1; }

/* ---------- 四、筛选条：圆角 12 卡片 ---------- */
.zib-widget.box-body.zpb-filter { position: relative; border-radius: var(--zpb-radius); padding: 18px 22px; }
.zpb-geo-hero, .zpb-lib-hero { padding-left: 0 !important; padding-right: 0 !important; }

.zpb-filter-row { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; }
.zpb-filter-label { flex: 0 0 58px; font-size: 12px; line-height: 30px; color: var(--zpb-muted); white-space: nowrap; }
.zpb-chips { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.zpb-chip {
    display: inline-flex; align-items: center; gap: 20px;
    height: 30px; padding: 0 12px;
    border-radius: 15px; border: 1px solid transparent;
    font-size: 12.5px; color: var(--zpb-body);
    background: var(--zpb-chip-bg);
    white-space: nowrap;
}
.zpb-chip em { font-style: normal; font-size: 12px; color: var(--zpb-accent); }
.zpb-chip:hover { color: var(--zpb-accent); }
.zpb-chip.on { color: var(--zpb-accent); font-weight: 600; background: var(--zpb-active-bg); border-color: color-mix(in oklab, var(--theme-color, #f04494) 35%, transparent); }
.zpb-chip-more { background: var(--main-bg-color, #fff); border-color: var(--zpb-border); color: var(--zpb-body); }

/* ---------- 五、区块卡（热门下载 / 全部古籍 / 版权）统一圆角 12 ---------- */
.zib-widget.box-body.zpb-hot,
.zib-widget.box-body.zpb-list,
.zib-widget.box-body.zpb-notice { border-radius: var(--zpb-radius); padding: 21px 22px 22px; }

.zpb-block-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 14px; }
.zpb-block-head h2 {
    display: flex; align-items: center; gap: 7px; margin: 0;
    border: 0; background: none; padding: 0;
    font-size: 14.5px; font-weight: 600; line-height: 1.3; color: var(--zpb-ink);
}
.zpb-block-head h2::before { content: none; }
.zpb-block-head h2 .fa { color: var(--zpb-accent); font-size: 15px; }
.zpb-block-side { display: flex; align-items: center; gap: 12px; font-size: 11.5px; color: var(--zpb-muted); }
.zpb-block-side a { color: var(--zpb-accent); font-size: 12.5px; display: inline-flex; align-items: center; gap: 4px; }
.zpb-block-side .fa { font-size: 13px; }

/* ---------- 六、排序 chips（块内）：28 高 / 圆角 14 ---------- */
.zpb-sort-chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 16px; }
.zpb-sort-chip {
    display: inline-flex; align-items: center; height: 28px; padding: 0 12px;
    border-radius: 14px; border: 1px solid var(--zpb-border);
    font-size: 12px; color: var(--zpb-body); background: var(--main-bg-color, #fff);
}
.zpb-sort-chip:hover { color: var(--zpb-accent); }
.zpb-sort-chip.on { color: var(--zpb-accent); font-weight: 600; background: var(--zpb-active-bg); border-color: var(--zpb-active-bg); }

/* ---------- 七、卡片：313×272 圆角 10 白底 + 边；封面 293×168 圆角 8 ---------- */
.zpb-card-grid,
.zpb-hot-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: start; }
.zpb-card {
    display: block; min-width: 0; margin: 0 !important; padding: 10px 10px 16px;
    border-radius: 10px; background: var(--main-bg-color, #fff);
    border: 1px solid var(--zpb-border);
    transition: border-color .15s, box-shadow .15s;
}
.zpb-card:hover { border-color: color-mix(in oklab, var(--theme-color, #f04494) 35%, transparent); box-shadow: 0 6px 18px color-mix(in oklab, currentColor 8%, transparent); }
.zpb-card-cover {
    position: relative; display: block; width: 100%;
    aspect-ratio: 293 / 168; overflow: hidden;
    border-radius: 8px; background: #edeef1;
}
.dark-theme .zpb-card-cover { background: color-mix(in oklab, var(--main-color, #fff) 8%, transparent); }
.zpb-card-cover img { width: 100%; height: 100%; object-fit: contain; display: block; }
.zpb-card-title {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    margin: 14px 0 6px; font-size: 12.5px; font-weight: 600; line-height: 22px; color: var(--zpb-ink);
    min-height: 44px;
}
.zpb-card:hover .zpb-card-title { color: var(--zpb-accent); }
.zpb-card-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 11px; color: var(--zpb-muted); }
.zpb-card-dl { color: var(--zpb-accent); display: inline-flex; align-items: center; gap: 3px; }
.zpb-card-dl .fa { font-size: 11px; }
.zpb-rank {
    position: absolute; top: 6px; left: 6px; z-index: 2;
    min-width: 28px; height: 22px; line-height: 22px; text-align: center;
    border-radius: 6px; font-style: normal; font-size: 11px; font-weight: 400;
    color: #fff; background: var(--zpb-accent);
}

/* ---------- 八、分页：34×34 圆角 6（沿用站上 .zpb-pagination 结构，只覆盖规格） ---------- */
.zpb-pagination { margin-top: 12px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.zpb-pagination .page-numbers {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 34px; height: 34px; padding: 0 6px;
    border-radius: 6px; border: 1px solid var(--zpb-border);
    background: var(--main-bg-color, #fff); color: var(--zpb-body);
    font-size: 13px; line-height: 1;
}
.zpb-pagination .page-numbers.current { background: var(--zpb-accent); border-color: var(--zpb-accent); color: #fff; }
.zpb-pagination .page-numbers.dots { border: 0; background: transparent; min-width: 20px; }
.zpb-empty { padding: 28px 16px; text-align: center; font-size: 13px; color: var(--zpb-muted); border: 1px dashed var(--zpb-border); border-radius: var(--zpb-radius); }
.zpb-empty a { color: var(--zpb-accent); }

/* ---------- 九、版权声明与下载须知：正文 12 / 行高 24 ---------- */
.zpb-notice { padding-top: 22px !important; }
.zpb-filter-foot { margin-top: 6px; font-size: 11.5px; color: var(--zpb-muted); }
.zpb-notice-cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 40px; }
.zpb-notice-col h4 { margin: 0 0 4px; font-size: 13px; font-weight: 600; color: var(--zpb-ink); }
.zpb-notice-col ul { margin: 0; padding: 0; list-style: none; }
.zpb-notice-col ul li { font-size: 12px; line-height: 24px; color: var(--zpb-body); }

/* ---------- 十、分类页头卡 ---------- */
.zpb-geo-top { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 0; }
.zpb-geo-hero .zpb-stat-row { margin-top: 22px; }
/* 「进入 X 地名页」移到 hero 右上角（站长反馈：原来夹在中间） */
.zpb-geo-jump {
    position: absolute; top: 15px; right: 0;
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 12.5px; color: var(--zpb-accent);
}
.zpb-geo-jump .fa { font-size: 13px; }

/* ---------- 十一、响应式 ---------- */
@media (max-width: 1300px) {
    .zpb-hero-guide { flex-basis: 420px; margin-top: 46px; }
}
@media (max-width: 1024px) {
    .zpb-hero-guide { flex-basis: 340px; }
}
@media (max-width: 1024px) {
    .zpb-card-grid, .zpb-hot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    .zib-widget.zpb-lib-hero,
    .zib-widget.zpb-geo-hero { flex-direction: column; gap: 20px; }
    .zib-widget.zpb-geo-hero .zpb-hero-guide { margin-top: 0; }
    .zib-widget.zpb-geo-hero .zpb-geo-jump { position: static; }   /* 手机上回到普通流，免得压住标题 */
    .zpb-hero-guide { flex-basis: auto; max-width: none; width: 100%; margin-top: 0; }
    .zpb-notice-cols { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    /* —— 手机版规格取自 Penpot「古籍资源库首页 · 手机版」（390 宽）——
       筛选条 358x176 / chip 28 高 / 卡片 167x164（封面 151x96，两列）/ 分页钮 32x32 / 版权段单列 */
    body.zpb-library-page .container { padding-left: 16px; padding-right: 16px; }   /* 手机板左右留白 16 */
    .zpb-lib-hero-wrap { padding: 14px 16px 18px; margin-bottom: 16px; }
    .zpb-lib-hero-inner { max-width: 100%; }
    .zpb-hero-title { font-size: 22px; margin-bottom: 8px; }
    .zpb-hero-desc { font-size: 12.5px; line-height: 1.6; margin-bottom: 14px; }
    .zpb-hero-search { height: 44px; border-radius: 22px; padding: 0 6px 0 14px; margin-bottom: 14px; max-width: none; }
    /* 16px 是 iOS 的门槛：低于它聚焦时会自动缩放整页，页面会"突然变难看" */
    .zpb-hero-search input[type="search"] { font-size: 16px; }
    .zpb-hero-search button { height: 32px; border-radius: 16px; padding: 0 16px; font-size: 12.5px; }
    .zpb-hero-hot { gap: 6px; }
    .zpb-hero-hot a { height: 24px; padding: 0 10px; border-radius: 12px; font-size: 11.5px; }
    .zpb-hero-guide { flex: 0 0 auto; width: 100%; max-width: none; margin-top: 16px; padding: 14px 15px; }
    .zpb-guide-head { font-size: 12.5px; }
    .zpb-hero-guide ul li { font-size: 11px; }
    /* 手机：统计四格排成一行，整条长度与下方「使用指南」卡片对齐（撑满内容宽）——
       站长 2026-10-01 明确：不要 2×2，要一行到底、和下面一样长。 */
    .zpb-stat-row {
        display: flex; flex-wrap: nowrap; gap: 0;
        width: 100%; max-width: 100%; margin: 14px 0 0;
        border-radius: 10px; background: var(--zpb-card, var(--main-bg-color, #fff)); overflow: hidden;
    }
    .zpb-stat { flex: 1 1 0; min-width: 0; padding: 12px 6px; text-align: center; }
    .zpb-stat b, .zpb-stat span { font-size: 20px; font-weight: 700; }
    .zpb-stat span { margin-left: 2px; }
    .zpb-stat em { font-size: 11px; margin-top: 3px; white-space: nowrap; }
    .zpb-stat + .zpb-stat::before { display: block; top: 10px; bottom: 10px; }   /* 四格之间保留竖分隔线 */
    .zpb-stat.is-link::after { left: 10px; right: 10px; }
    /* 站长 2026-10-01：统计条要跟下方「使用指南」一样长。
       实测 .zpb-lib-hero-main 在弹性容器里被压到 316，而内容宽 358（使用指南卡就是 358）
       → 让它整行占满，统计条自然拉齐。 */
    body.zpb-library-page .zpb-lib-hero-main { flex: 1 1 100%; width: 100%; min-width: 0; }
    /* 搜索居中：原来上限 720px，手机上等于满宽贴边。给个窄一点的居中胶囊。
       必须带 .zpb-lib-hero-wrap 提高特异性 —— 基础规则 .zpb-lib-hero-wrap .zpb-hero-search
       写的是 max-width:720px，只写 .zpb-hero-search 会被它按回去。 */
    body.zpb-library-page .zpb-lib-hero-wrap .zpb-hero-search {
        max-width: 300px; margin-left: auto; margin-right: auto;
    }
    /* 热门检索同行居中（站长 2026-10-01）：原来靠左，跟居中的搜索框不呼应 */
    body.zpb-library-page .zpb-hero-hot { justify-content: center; text-align: center; }

    .zib-widget.box-body.zpb-filter { padding: 14px 16px; }
    .zpb-filter-row { flex-direction: row; gap: 8px; padding: 5px 0; align-items: center; }
    .zpb-filter-label { flex: 0 0 34px; line-height: 28px; font-size: 11.5px; }
    .zpb-chips { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 2px; gap: 6px; }
    .zpb-chips::-webkit-scrollbar { display: none; }
    .zpb-chip { height: 28px; padding: 0 10px; gap: 12px; border-radius: 14px; font-size: 12px; }
    .zpb-chip em, .zpb-chip .fa { font-size: 11px; }
    .zpb-filter-foot { margin-top: 4px; font-size: 11px; }

    .zib-widget.box-body.zpb-list, .zib-widget.box-body.zpb-notice { padding: 14px 16px; }
    .zpb-block-head { margin-bottom: 10px; }
    .zpb-block-head h2 { font-size: 13.5px; gap: 6px; }
    .zpb-block-head h2 .fa { font-size: 14px; }
    .zpb-block-side { font-size: 11px; }
    .zpb-sort-chips { gap: 6px; margin-bottom: 12px; }
    .zpb-sort-chip { height: 26px; padding: 0 10px; border-radius: 13px; font-size: 11.5px; }
    .zpb-card-grid, .zpb-hot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .zpb-card { padding: 8px 8px 12px; border-radius: 8px; }
    .zpb-card-cover { aspect-ratio: 151 / 96; border-radius: 6px; }
    .zpb-card-title { font-size: 12px; line-height: 17px; min-height: 34px; margin: 8px 0 6px; }
    .zpb-card-meta { font-size: 10.5px; }
    .zpb-rank { min-width: 24px; height: 18px; line-height: 18px; font-size: 10px; top: 4px; left: 4px; }

    .zpb-pagination { gap: 6px; margin-top: 14px; }
    .zpb-pagination .page-numbers { min-width: 32px; height: 32px; border-radius: 6px; font-size: 12px; }

    .zpb-notice-cols { grid-template-columns: 1fr; gap: 14px; }
    .zpb-notice-col h4 { font-size: 12.5px; }
    .zpb-notice-col ul li { font-size: 11.5px; line-height: 24px; }
}

/* ==========================================================================
   自动填充覆盖 —— 必须放在本文件最后
   Chrome 用"搜索历史/自动填充"填入时，会给输入框刷一层自己的底色
   （浅色模式偏蓝灰、深色模式深底），只能用 1000px 的巨大内阴影盖住。
   注意：前面 :focus/:hover 等状态里写了 box-shadow:none !important，
   两者优先级持平、后者靠前，会把这层遮盖清掉 —— 所以这段必须压在最末尾。
   ========================================================================== */
.zpb-lib-hero-wrap .zpb-hero-search input[type="search"]:-webkit-autofill,
.zpb-lib-hero-wrap .zpb-hero-search input[type="search"]:-webkit-autofill:hover,
.zpb-lib-hero-wrap .zpb-hero-search input[type="search"]:-webkit-autofill:focus,
.zpb-lib-hero-wrap .zpb-hero-search input[type="search"]:-webkit-autofill:active,
.zpb-lib-hero-wrap .zpb-hero-search input[type="search"]:-internal-autofill-selected,
.zpb-lib-hero-wrap .zpb-hero-search input[type="search"]:-internal-autofill-previewed {
    box-shadow: 0 0 0 1000px var(--main-bg-color, #fff) inset !important;
    -webkit-box-shadow: 0 0 0 1000px var(--main-bg-color, #fff) inset !important;
    -webkit-text-fill-color: var(--zpb-ink) !important;
    caret-color: var(--zpb-ink) !important;
    background-color: transparent !important;
    background-image: none !important;
    transition: background-color 3600000s ease-out 0s !important;
}

/* ==========================================================================
   文章列表页（/articles/）
   站长 2026-10-01：要一个真正的「文章列表」独立页面。
   列表卡片复用首页那套（.zpb-hf-post-*，见 home-front.css），这里只补标题带与分页。
   ========================================================================== */
.zpb-art-hero {
    margin: 0 0 22px;
    padding: 30px 34px;
    border-radius: 12px;
    background: linear-gradient(180deg, #fbf7f0 0%, #f6f1e8 100%);
    border: 1px solid #efe7da;
}
.zpb-art-eyebrow { margin: 0 0 8px; font-size: 12.5px; letter-spacing: .12em; color: #a08d78; }
.zpb-art-title { margin: 0 0 10px; font-size: 28px; font-weight: 700; color: #241f1c; }
.zpb-art-desc { margin: 0; font-size: 14px; line-height: 1.85; color: #5a6472; }
.zpb-art-desc b { color: #f04494; font-weight: 700; }

.zpb-art-list { margin-top: 0; }

/* 站长 2026-10-02：列表离 footer 太近（实测卡片底=footer顶，0 间距）——与首页文章区同值 */
.zpb-articles { padding-bottom: 56px; }

.zpb-art-pager { margin: 26px 0 40px; }
.zpb-art-pager ul.page-numbers { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 0; padding: 0; list-style: none; }
.zpb-art-pager li { list-style: none; }
.zpb-art-pager .page-numbers {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 38px; height: 38px; padding: 0 12px;
    border-radius: 8px; background: #fff; border: 1px solid #eef0f2;
    color: #5a6472; font-size: 13.5px; text-decoration: none;
    transition: color .25s ease, border-color .25s ease, background .25s ease;
}
.zpb-art-pager a.page-numbers:hover { color: #f04494; border-color: #f7c6dc; }
.zpb-art-pager .page-numbers.current { background: #f04494; border-color: #f04494; color: #fff; }
.zpb-art-empty { padding: 40px 0; text-align: center; color: #8a8079; }

@media (max-width: 768px) {
    .zpb-art-hero { padding: 22px 20px; }
    .zpb-art-title { font-size: 23px; }
    .zpb-art-desc { font-size: 13px; }
}