/*
 * PPT集市 主题样式
 *
 * 视觉方向：小清新 —— 极浅冷灰底 + 纯白卡片 + 极轻阴影 + 单一蓝色主色。
 * 参考 ypppt.com 的克制做法：区块头用「左侧短色条」代替整条下划线；
 * 「更多」用灰色文字代替高饱和胶囊；除主色外不堆第二、第三种强调色。
 *
 * 主色 --blue 由「外观 → 自定义 → 主题设置」注入，默认 #2594f0。
 */

/* ============================================================ 1. 基础 */
:root {
  --blue: #2594f0;
  --blue-d: #0f6fd0;
  --blue-l: #eef7fe;
  /* 参考站（ypppt.com）的辅色，只用在 hover 与成功态上 */
  --green: #62b38d;
  --ink: #333;
  --ink2: #666;
  --ink3: #999;
  /* 分隔线一律极浅 —— 参考站的 #f1f1f1 / #eee，不用深灰描边 */
  --line: #f1f1f1;
  --line2: #e8e8e8;
  --bg: #f7f9fb;
  --card: #fff;
  --r: 8px;
  /* 卡片阴影照抄参考站的量级：静止几乎看不见，hover 才浮起来 */
  --sh-card: 0 0 4px rgba(0, 0, 0, .06);
  --sh-card-h: 0 2px 6px rgba(0, 0, 0, .07), 0 10px 24px rgba(0, 0, 0, .08);
  --sh: 0 0 6px rgba(0, 0, 0, .06);
  --sh2: 0 6px 22px rgba(0, 0, 0, .1);
  /* 序号徽章底：中性浅灰，前三名用主色浅底 */
  --badge: #f5f7f9;
  /* 5 列 × 230px + 4 × 12px 间隙 = 1198px 内容宽，容器再加左右 16px 内边距 */
  --wrap: 1230px;
  --gap: 12px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.75 -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", "PingFang SC", sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

img { display: block; max-width: 100%; height: auto; }

button { font-family: inherit; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 16px; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--blue);
  color: #fff;
  padding: 10px 18px;
  border-radius: 0 0 10px 0;
}
.skip-link:focus { left: 0; outline: 0; }

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* ============================================================ 2. 站头 */
/*
 * 站头滚动吸顶（v1.5）。
 *
 * 用 position: sticky 而不是 position: fixed：
 *   - fixed 会让站头脱离文档流，下面的内容整体上移，必须再手动补一段
 *     padding-top 才能不遮住首屏 —— 高度一改（比如小屏降到 60px）就要同步改，
 *     是个长期维护陷阱；
 *   - sticky 保留原有占位，滚动到顶才「贴」上去，一行 CSS 解决。
 *
 * z-index 取 100：要盖住卡片 hover 阴影，但要低于移动端导航下拉（z-index 60 不够，
 * 所以下拉在下面单独提到 110）与后台工具栏。
 *
 * 注意：祖先元素只要有 overflow: hidden/auto 就会让 sticky 失效 ——
 * body / main 都没有设置，所以这里安全。
 */
.hdr {
  background: #fff;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 100;
  transition: box-shadow .2s ease;
}

/*
 * 吸住之后才加阴影。
 *
 * 为什么不一开始就有阴影：站头在最顶上时紧贴着内容，阴影会显得脏；
 * 一旦贴顶、下面开始有内容从它底下滑过，才需要一层阴影把两者分开。
 * 这个类由 assets/js/app.js 在滚动时切换。
 */
.hdr.is-stuck {
  box-shadow: 0 1px 0 rgba(0, 0, 0, .04), 0 4px 14px rgba(0, 0, 0, .07);
}

/*
 * 登录状态下的 WordPress 管理工具栏是 fixed 且高 32px（小屏 46px），
 * 不补偿的话站头会有一截被它压住。
 */
.admin-bar .hdr { top: 32px; }

@media screen and (max-width: 782px) {
  .admin-bar .hdr { top: 46px; }
}

/*
 * 吸顶后站头会盖住锚点目标，给跳转目标留出站头的高度。
 * 数值 = .hdr-in 的高度 + 16px 呼吸位 —— 改站头高度时，这里要一起改。
 */
:target,
#main {
  scroll-margin-top: 74px;
}

/*
 * 站头内容行高。
 *
 * 66px → 58px（v1.6.9）：站长要求「导航栏高度调小一点」。
 * 下限由 logo 决定 —— 图固定 50px 高，58 还留出上下各 4px 不贴边；
 * 再往下压到 54 以下，logo 就会顶到那条 1px 的底边线上。
 */
.hdr-in {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 58px;
}

/* 站头 logo：站点根目录下的静态图 /images/logo.png，固定高 50px、宽按比例自适应。
 * line-height:0 是为了消掉行内图片基线留下的几像素空隙。 */
.logo { display: block; flex: 0 0 auto; line-height: 0; }
.logo img { height: 40px; width: auto; max-height: none; display: block; }

/* 导航 */
.nav { flex: 1; min-width: 0; }

.nav-list {
  display: flex;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}

.nav-list > li > a {
  display: block;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 14.5px;
  color: var(--ink2);
  white-space: nowrap;
  transition: color .18s ease, background .18s ease;
}
.nav-list > li > a:hover { background: var(--blue-l); color: var(--blue-d); }
.nav-list > .current-menu-item > a,
.nav-list > .current-menu-parent > a,
.nav-list > .current-menu-ancestor > a {
  color: var(--blue-d);
  font-weight: 500;
  background: var(--blue-l);
}

/* 子菜单 */
.nav-list .sub-menu {
  list-style: none;
  margin: 0;
  padding: 6px;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 168px;
  background: #fff;
  border-radius: 10px;
  border: 1px solid var(--line);
  box-shadow: var(--sh2);
  display: none;
  z-index: 60;
}
.nav-list > li { position: relative; }
.nav-list > li:hover > .sub-menu { display: block; }
.nav-list .sub-menu a {
  display: block;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 14px;
  color: var(--ink2);
}
.nav-list .sub-menu a:hover { background: var(--blue-l); color: var(--blue-d); }

/*
 * 搜索：浅灰底 + 无边框按钮。
 * 参考站的搜索框是「浅底 + 放大镜」而不是「白底 + 高饱和实心按钮」——
 * 首页 Hero 已移除，这个搜索框现在是全站唯一入口，做轻一点更耐看。
 */
.srch {
  display: flex;
  flex: 0 0 220px;
  background: #f4f7fa;
  border: 1px solid #eef2f6;
  border-radius: 20px;
  overflow: hidden;
  transition: background .2s ease, border-color .2s ease;
}
.srch:focus-within { background: #fff; border-color: var(--blue); }
.srch input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  padding: 9px 14px;
  font-size: 13.5px;
  font-family: inherit;
  outline: none;
  color: var(--ink);
}
.srch input::placeholder { color: #a8b4c0; }
.srch button {
  border: 0;
  background: none;
  color: var(--blue);
  padding: 0 14px;
  cursor: pointer;
  font-size: 13.5px;
  transition: color .18s ease;
}
.srch button:hover { color: var(--blue-d); }

/* 移动端汉堡 */
.nav-toggle {
  display: none;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 8px;
  width: 42px; height: 38px;
  cursor: pointer;
  padding: 0;
  place-items: center;
  gap: 3px;
}
.nav-toggle i {
  display: block;
  width: 17px; height: 2px;
  background: var(--ink2);
  border-radius: 2px;
  margin: 2px auto;
}

/* ============================================================ 3. 通用胶囊 */
/*
 * 首页 Hero 已整块移除（站长的要求：首屏不再要横幅大图 + 大搜索框）。
 * 搜索框现在只在站头，见第 2 节 .srch。
 *
 * .chips 保留给 404 页的「热门分类」用，改成适配浅色背景的写法
 * （旧的白色半透明胶囊是给深色 Hero 用的，留在白底上会看不见）。
 */
.chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 22px; }
.chips a {
  background: #fff;
  border: 1px solid var(--line2);
  color: var(--ink2);
  padding: 7px 16px;
  border-radius: 20px;
  font-size: 14px;
  transition: color .18s ease, border-color .18s ease, background .18s ease;
}
.chips a:hover { color: var(--blue-d); border-color: var(--blue); background: var(--blue-l); }

.chips--dark a { background: var(--blue-l); border-color: transparent; color: var(--blue-d); }
.chips--dark a:hover { background: var(--blue); border-color: var(--blue); color: #fff; }

/*
 * ★ v1.6.12 删掉了 .subchips / .subchips-hd / .chips--sub 三条规则。
 *
 * 它们原本给「首页图文模块下方的热门子分类」提供一套居左的胶囊外观。
 * 站主要求把那排入口挪进区块头（`.sec-hd`），直接复用已有的
 * `.sec-chips`（灰色文字链接、无描边）—— 于是这套胶囊样式再没有引用方，
 * 留着只会让下一次改版的人以为页面里还有一排在用。
 */

/* ============================================================ 4. 区块 */
/* 同上：.sec 常与 .wrap 同元素使用，不能覆盖左右内边距。 */
.sec { padding-top: 26px; padding-bottom: 4px; }

/*
 * 区块头 —— 参考 ypppt.com 的 .sub-nav：
 * 左侧一根 4px 短色条 + 17px 粗体标题 + 内联子分类文字链接 + 右端灰色「更多 ›」。
 * 不再用红色整条下划线，也不再堆红字虚边胶囊 —— 那两条是「杂乱感」的主要来源。
 * 色条用伪元素画在 h2 上，模板里不再需要额外的占位元素。
 */
.sec-hd {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 24px;
  margin: 2px 0 15px;
}
.sec-hd h1,
.sec-hd h2 {
  position: relative;
  margin: 0;
  padding-left: 11px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .2px;
  white-space: nowrap;
  color: #333;
}
.sec-hd h1::before,
.sec-hd h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 15px;
  border-radius: 2px;
  background: var(--blue);
}
/*
 * 分类页的标题用 h1（页面的唯一主语），字号比区块头的 h2 大一档。
 * 只放大到 20px：列表页上方还有面包屑和一排子分类，标题太大反而压住内容。
 */
.sec-hd h1 { font-size: 20px; }
.sec-hd h1::before { height: 17px; }
/* 标题右侧的小字说明（后台「首页模块」里可填） */
.sec-hd .sec-note { font-size: 12.5px; color: #b5b5b5; }

/* 子分类：像参考站那样直接排成一行灰色文字链接，不做胶囊描边 */
.sec-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  max-height: 26px;
}
.sec-chips a {
  padding: 0 9px;
  font-size: 13px;
  line-height: 24px;
  color: #777;
  border-radius: 4px;
  white-space: nowrap;
  transition: color .18s ease, background .18s ease;
}
.sec-chips a:hover { color: var(--blue-d); background: var(--blue-l); }

/* 「更多 ›」：灰色小字，hover 变主色 */
.sec-hd .more {
  flex: 0 0 auto;
  margin-left: auto;
  font-size: 13px;
  color: var(--ink3);
  white-space: nowrap;
  transition: color .18s ease;
}
.sec-hd .more::after { content: " ›"; }
.sec-hd .more:hover { color: var(--blue-d); }

.archive-desc { color: var(--ink2); font-size: 14.5px; margin: -8px 0 22px; }
.result-count { color: var(--ink3); font-size: 13.5px; margin: -8px 0 18px; }

/* ============================================================ 5. 卡片网格 */
/*
 * 每行 5 列，缩略图 230×130。
 * 容器内容宽 1198px（--wrap 1230 减去左右 16px 内边距）时：
 *   单卡宽 (1198 - 4×12) / 5 = 230px，图高 230 × 130/230 = 130px —— 正好落在设计规格上。
 *
 * 列数走 CSS 变量：裸 .grid 默认 5 列，需要别的列数就加 .grid--N 覆写变量；
 * 窄屏的降级规则集中在第 12 节媒体查询里，只改变量值，不重复写 grid-template。
 */
.grid {
  display: grid;
  grid-template-columns: repeat(var(--gcols, 5), minmax(0, 1fr));
  gap: var(--gap);
}
/* 说明：降级写在 .grid（而不是 .grid--N）上，裸 .grid 才能跟着窄屏降列。
 * archive / index / search 用的都是裸 .grid。 */
.grid--3 { --gcols: 3; }
.grid--4 { --gcols: 4; }
/* 下载页「看了又看」：同样 5 列 */
.grid--dl { --gcols: 5; }

/*
 * 卡片：纯白 + 极轻阴影 + 8px 圆角，静止时几乎看不见阴影，hover 才浮起。
 * 这是参考站（ypppt.com）的做法 —— 靠留白和阴影层次分区，而不是靠描边。
 */
.card {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--sh-card);
  transition: transform .2s ease, box-shadow .2s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--sh-card-h); }

/*
 * 缩略图：230:130 的比例，桌面端封顶 130px 高。
 * 窄屏卡片变窄时按比例自动降高，不会把图裁成方形。
 */
.card .thumb {
  position: relative;
  aspect-ratio: 230 / 130;
  max-height: 130px;
  background: #eef3f9;
  overflow: hidden;
  flex: 0 0 auto;
}
.card .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
/* 轻微放大即可 —— 参考站这类站点不做夸张的缩放 */
.card:hover .thumb img { transform: scale(1.06); }

/* 「免费」角标：白底 + 主色字，不再用高饱和红底白字 */
.card .thumb .free {
  position: absolute;
  left: 8px; top: 8px;
  background: rgba(255, 255, 255, .94);
  color: var(--blue);
  font-size: 11.5px;
  padding: 2px 9px;
  border-radius: 10px;
  font-weight: 500;
  letter-spacing: .3px;
  z-index: 2;
}
.card .thumb .free.paid { color: #d9903a; }

.card .bd {
  padding: 10px 12px 0;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.card h3 {
  font-size: 14px;
  line-height: 1.55;
  font-weight: 400;
  color: #333;
  margin: 0;
  min-height: 43px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  transition: color .18s ease;
}
.card:hover h3 { color: var(--blue-d); }

/*
 * 元信息：只有一行，12px 浅灰。
 * 左「分类名 · 相对时间」，右「浏览数」—— 与参考站「左格式/页数 · 右下载量」同构。
 * 旧版那行带橙色圆点的分类行已删除（它是画面噪点的主要来源之一）。
 */
.card .mt {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding: 6px 0 9px;
  font-size: 12px;
  color: var(--ink3);
}
.card .mt .ed {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.card .mt .ed i {
  font-style: normal;
  color: #c2c2c2;
  margin: 0 4px;
}
.card .mt .ev {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.card .mt svg { flex: 0 0 auto; }

/* ============================================================ 6. 首页模块 */
/*
 * 首页由两类模块拼成，共用「区块头 + 内容区」的骨架（见 front-page.php）：
 *   - 纯标题模块（.cats / .cbox / .rank）—— 分类名 + 1~N 序号列表，并排成多列小卡；
 *   - 图文模块（.sec-cards / .pgrid / .pcard）—— 分类名 + 一整行大封面卡。
 *
 * 两者可以混排，顺序即后台配置的顺序。
 */
/*
 * 白卡片 + 极轻阴影；卡片首行是「左色条 + 分类名」的浅色标题行，
 * 与页面其它区块头（.sec-hd）保持同一套视觉语言。
 *
 * 旧版那顶 40px 的深色封面条（叠 74% 黑蒙版 + 居中白字）已删除：
 * 它在一片浅色里显得特别重，是「杂乱」的另一处主要来源。
 */
.cats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.cats--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cats--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cats--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cats--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.cbox {
  background: #fff;
  padding: 16px 18px 12px;
  border-radius: var(--r);
  box-shadow: var(--sh-card);
  transition: box-shadow .2s ease;
}
.cbox:hover { box-shadow: var(--sh-card-h); }

/* 分类标题行：左色条 + 分类名 + 条数标签 + 右端「更多 ›」 */
.cbox .hd {
  display: flex;
  align-items: center;
  gap: 8px;
  height: auto;
  margin: 0 0 10px;
  padding: 0 0 10px;
  border-bottom: 1px solid var(--line);
  background: none;
  box-shadow: none;
}
.cbox .hd b {
  position: relative;
  padding-left: 9px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  color: #333;
}
.cbox .hd b::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 13px;
  border-radius: 2px;
  background: var(--blue);
}
.cbox .hd .cnt {
  font-style: normal;
  font-size: 11.5px;
  color: var(--ink3);
  background: var(--badge);
  border-radius: 4px;
  padding: 1px 7px;
}
.cbox .hd a {
  position: static;
  margin-left: auto;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--ink3);
  transition: color .18s ease;
}
.cbox .hd a::after { content: " ›"; }
.cbox .hd a:hover { color: var(--blue-d); }

.rank { list-style: none; padding: 0; margin: 0; }
.rank li {
  position: relative;
  display: flex;
  align-items: center;
  padding: 7px 0;
  border-bottom: 1px dotted #eef0f2;
}
.rank li:last-child { border-bottom: 0; padding-bottom: 2px; }

/*
 * 序号徽章：18×18 浅底 + 深字。
 * 前三名用主色浅底 / 浅蓝 / 浅绿区分，第 4 名往后统一中性灰 ——
 * 不再用红黄蓝满色块，一行里只有一个高亮就够了。
 */
.rank li .n {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  line-height: 18px;
  margin-right: 9px;
  text-align: center;
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  border-radius: 4px;
  background: var(--badge);
  color: var(--ink3);
}
.rank li:nth-child(1) .n { background: var(--blue-l); color: var(--blue-d); }
.rank li:nth-child(2) .n { background: #e9f3fb; color: #4a90d9; }
.rank li:nth-child(3) .n { background: #eef6f2; color: var(--green); }

.rank li a {
  flex: 1 1 auto;
  min-width: 0;
  padding-right: 74px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  color: #444;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color .18s ease;
}
.rank li a:hover { color: var(--blue-d); }
/* 右侧热度：「热度(9999)」约 70px 宽，所以标题右侧留 74px，长标题才会正常出省略号 */
.rank li .heat {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
  font-size: 12px;
  color: #c2c2c2;
}

/* ------------------------------------------------ 6.1 图文模块（大封面卡） */
/*
 * 一整行铺开：区块头（复用 .sec-hd）+ 一行 N 张大封面卡。
 *
 * ★ 封面用 4:3，不用列表页那个 230×130 的 16:9 横条。
 *   PPT 模板的封面是一整页缩略图，横条一裁，标题行和内页版式全没了，只剩一块色 ——
 *   而「先看见封面再决定点不点」正是这个模块存在的全部理由。
 *
 * ★ 卡面上是「图 + 两行标题 + 一行元信息」。
 *   元信息只有「24页 · 8.6MB」（左）和浏览量（右）两项 ——
 *   页数与体积正是决定要不要下载的核心指标，藏起来等于让访客点开才知道；
 *   而分类名归区块头、时间在首页没有决策价值，一律不放。
 */
.sec-cards { margin-bottom: 4px; }

/*
 * 图文模块的区块头降一级（15.5px，与纯标题模块的 .cbox .hd b 同档）。
 *
 * 因为首页会出现「总标题 + 模块标题」两级 —— 总标题「分类精选」和模块标题
 * 都套 .sec-hd，如果同是 17px 粗体加色条，读者根本分不出谁管谁。
 * 降一级之后，「总标题下面挂着几个平级模块」这层结构才看得出来。
 */
.sec-cards .sec-hd h2 { font-size: 15.5px; }
.sec-cards .sec-hd h2::before { height: 13px; }

/*
 * ★ v1.6.12：热门子分类挪进区块头之后，把「共 N 个模板」顺到右侧。
 *
 * DOM 顺序固定是「h2 → note → chips → more」（ppts_section_head 的输出顺序，
 * 分类页也在用，不能动）。这里只用 flex order 重排**首页图文模块**这一处：
 *   h2(默认 0) → 子分类(1) → 共 N 个模板(2) → 更多(3)
 * 读起来就是「节日PPT  中秋 国庆 新年 …  共 24 个模板  更多 ›」。
 *
 * ★ `.more` 必须显式写上 order —— 它的默认值是 0，不写会跑到最前头，
 *   变成「更多 › PPT模板 中秋 国庆 …」。
 */
.sec-cards .sec-hd .sec-chips { order: 1; }
.sec-cards .sec-hd .sec-note { order: 2; }
.sec-cards .sec-hd .more { order: 3; }

/* 模块之间（网格 ↔ 图文区块）的竖向间距。
 * 只写相邻组合，避免第一个模块头顶无端多出 26px。 */
.cats + .sec-cards,
.sec-cards + .cats,
.sec-cards + .sec-cards { margin-top: 26px; }

/*
 * 列数同样走 CSS 变量：裸 .pgrid 默认 4 列，
 * 需要别的列数就加 .pgrid--N 覆写变量；窄屏降级集中在第 12 节。
 */
.pgrid {
  display: grid;
  grid-template-columns: repeat(var(--pcols, 4), minmax(0, 1fr));
  gap: var(--gap);
}
.pgrid--2 { --pcols: 2; }
.pgrid--3 { --pcols: 3; }
.pgrid--4 { --pcols: 4; }
.pgrid--5 { --pcols: 5; }

.pcard {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--sh-card);
  transition: transform .2s ease, box-shadow .2s ease;
}
.pcard:hover { transform: translateY(-3px); box-shadow: var(--sh-card-h); }

.pcard .pthumb {
  position: relative;
  aspect-ratio: 4 / 3;
  background: #eef3f9;
  overflow: hidden;
  flex: 0 0 auto;
}
.pcard .pthumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
/* 比列表页卡片更克制：图更大，缩放过头会很晃 */
.pcard:hover .pthumb img { transform: scale(1.04); }

/* 付费角标：与列表页卡片同一套视听语言（白底 + 橙字），只是位置略放大 */
.pcard .pthumb .pfree {
  position: absolute;
  left: 9px;
  top: 9px;
  z-index: 2;
  padding: 3px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .94);
  color: var(--blue);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .3px;
}
.pcard .pthumb .pfree.paid { color: #d9903a; }

/*
 * 标题：固定两行高。
 * min-height 保证只有一行标题的卡片不会比邻居矮一截 ——
 * 网格里参差不齐的卡底比多几像素留白难看得多。
 */
.pcard h3 {
  margin: 0;
  padding: 11px 13px 10px;
  font-size: 14.5px;
  font-weight: 400;
  line-height: 1.55;
  color: #333;
  min-height: calc(1.55em * 2 + 21px);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  transition: color .18s ease;
}
.pcard:hover h3 { color: var(--blue-d); }

/*
 * 卡片底部元信息行（v1.6.6 新增）：左「24页 · 8.6MB」，右「浏览量」。
 *
 * ★ 为什么不放封面角上：封面是 4:3 的 PPT 整页，角上压字会挡版式，
 *   而这行小字和标题同属「卡面文字区」，并排一行最省地方。
 *
 * ★ 为什么补一条 1px 分隔线：标题是固定两行高的，
 *   没有线的时候元信息会和第二行标题黏成一段绕口的句子；
 *   有线之后「标题区 / 信息区」各自成段，卡片才有结构。
 *   线的两边各留 13px（与 h3 的左右内边距对齐），不顶到卡片边缘。
 *
 * ★ 用 --line 而不是 --line2：这条线是卡片**内部**的段落分隔，
 *   不是卡片轮廓，比边框更浅才对。
 */
.pcard .pmeta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 13px;
  padding: 9px 0 11px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  line-height: 1.4;
  color: var(--ink3);
}
/* 左半边：页数与体积。窄卡上宁可出省略号，也不让它把浏览量挤掉。 */
.pcard .pmeta .pspec {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/* 右半边：浏览量贴右。margin-left:auto 让左边没内容时它照样靠右。 */
.pcard .pmeta .pviews {
  flex: 0 0 auto;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.pcard .pmeta svg { flex: 0 0 auto; }

/* ============================================================ 7. 详情页 */
.crumb { padding: 18px 0 0; font-size: 13.5px; color: var(--ink3); }
.crumb a:hover { color: var(--blue); }
.crumb span { margin: 0 7px; color: #c3ccd8; }
.crumb .current { margin: 0; color: var(--ink3); }

.art {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 28px;
  padding: 16px 0 40px;
  align-items: start;
}
.art--page { grid-template-columns: minmax(0, 900px); }

.art h1 {
  font-size: 28px;
  line-height: 1.42;
  letter-spacing: -.4px;
  font-weight: 700;
  margin: 0;
}

.ameta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  margin-top: 14px;
  font-size: 13.5px;
  color: var(--ink3);
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.ameta .tag { background: var(--blue-l); color: var(--blue-d); padding: 3px 11px; border-radius: 6px; font-size: 13px; }

.preview {
  margin: 22px 0;
  border-radius: var(--r);
  overflow: hidden;
  background: #e9eff7;
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  box-shadow: var(--sh);
}
.preview img { width: 100%; height: 100%; object-fit: contain; }

.pbox {
  background: #fff;
  border-radius: var(--r);
  padding: 24px 26px;
  box-shadow: var(--sh);
  font-size: 15.5px;
  line-height: 1.95;
  color: #2c3849;
  overflow-wrap: break-word;
}
.pbox p + p { margin-top: 14px; }
.pbox img { margin: 14px auto; }
.pbox h2, .pbox h3 { margin: 22px 0 10px; line-height: 1.4; }
.pbox ul, .pbox ol { padding-left: 22px; }
.pbox blockquote {
  margin: 16px 0;
  padding: 10px 18px;
  border-left: 3px solid var(--blue);
  background: var(--blue-l);
  border-radius: 0 8px 8px 0;
}
.pbox table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 14.5px; }
.pbox th, .pbox td { border: 1px solid var(--line); padding: 9px 12px; text-align: left; }
.pbox th { background: var(--bg); }
.pbox .aligncenter { margin-left: auto; margin-right: auto; }

.page-links { margin-top: 18px; font-size: 14px; color: var(--ink3); }

.tagrow { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 24px; }
.tagrow a {
  background: #fff;
  border: 1px solid var(--line);
  color: var(--ink2);
  padding: 5px 13px;
  border-radius: 16px;
  font-size: 13px;
}
.tagrow a:hover { border-color: var(--blue); color: var(--blue-d); }

/* 侧栏下载面板 */
.side { position: sticky; top: 16px; display: grid; gap: 18px; align-content: start; }

.dl { background: #fff; border-radius: var(--r); box-shadow: var(--sh); overflow: hidden; }

.dl .top {
  background: var(--blue-l);
  color: var(--blue-d);
  padding: 18px 20px;
  text-align: center;
  border-bottom: 1px solid #e2f0fb;
}
.dl .top .price { font-size: 26px; font-weight: 700; letter-spacing: .5px; line-height: 1.2; color: var(--blue-d); }
.dl .top .sub { font-size: 12.5px; color: #7ba7cc; margin-top: 2px; }

.dl .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 16px 18px 6px;
  background: var(--blue);
  color: #fff;
  text-align: center;
  padding: 14px;
  border-radius: var(--r);
  font-size: 16px;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(37, 148, 240, .24);
  cursor: pointer;
  transition: background .18s ease, box-shadow .18s ease;
}
/* 按钮上的云下载图标（旧站「立即下载」同款） */
.dl .btn .ico { flex: 0 0 auto; display: block; }
.dl .btn:hover { background: var(--blue-d); }
.dl .btn + .btn { margin-top: 10px; }
.dl .btn.is-disabled {
  background: #eef3f9;
  color: var(--ink3);
  box-shadow: none;
  cursor: not-allowed;
}
.dl .btn.is-loading { opacity: .72; pointer-events: none; }

.dl .tip { text-align: center; font-size: 12.5px; color: var(--ink3); padding: 0 18px 14px; }

.spec { list-style: none; border-top: 1px dashed var(--line); margin: 0 18px 16px; padding: 6px 0 0; }
.spec li { display: flex; padding: 8px 0; font-size: 13.5px; border-bottom: 1px dashed #f0f4f9; }
.spec li:last-child { border-bottom: 0; }
.spec li b { flex: 0 0 82px; color: var(--ink3); font-weight: 400; }
.spec li span { color: var(--ink); word-break: break-all; }

.ads {
  background: linear-gradient(120deg, #21add1, #1c93b8);
  color: #fff;
  border-radius: var(--r);
  padding: 20px;
  text-align: center;
  box-shadow: var(--sh);
}
.ads b { display: block; font-size: 17px; }
.ads em { font-style: normal; display: block; font-size: 13px; color: #d6f2fa; margin: 5px 0 12px; }
.ads a {
  display: inline-block;
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: 18px;
  padding: 5px 18px;
  font-size: 13px;
}
.ads a:hover { background: #fff; color: #1c93b8; border-color: #fff; }

.widgets .widget {
  background: #fff;
  border-radius: var(--r);
  padding: 18px 20px;
  box-shadow: var(--sh);
  margin-bottom: 18px;
}
.widget-title { font-size: 16px; margin: 0 0 10px; }

/* 相关推荐 */
.related { margin-top: 40px; }

/* ============================================================ 8. 分页 */
.pagination { margin: 36px 0 10px; }
.pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  align-items: center;
}
.pagination .page-numbers {
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--ink2);
  display: inline-grid;
  place-items: center;
  font-size: 14px;
}
.pagination .page-numbers:hover { border-color: var(--blue); color: var(--blue-d); }
.pagination .page-numbers.current {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
  font-weight: 600;
}
.pagination .dots { background: none; border-color: transparent; }

/*
 * 原「9. 评论」整节已删除 —— 站点不再开放评论，
 * 评论模板、表单与全部 .comment-* 样式一并移除（v1.5）。
 * 历史评论数据仍留在数据库里，只是不再显示、后台也不再管理。
 * 后续章节号已顺延。
 */

/* ============================================================ 9. 空状态 */
.empty-state {
  text-align: center;
  padding: 70px 20px;
  background: #fff;
  border-radius: var(--r);
  box-shadow: var(--sh);
}
.empty-state .code { font-size: 88px; font-weight: 800; color: var(--blue-l); line-height: 1; margin: 0 0 8px; }
.empty-state h1 { font-size: 24px; margin: 0 0 10px; }
.empty-state > p { color: var(--ink2); margin: 0 0 22px; }
.empty-state .srch { margin: 0 auto; max-width: 380px; }
.empty-state .chips { justify-content: center; }

/* ============================================================ 10. 友情链接 */
/* 友链页 / [ppts_links] 短代码 / 页脚带，三处共用这里的视觉语言。 */

.links-sec { margin-top: 6px; }

/* 分组小标题（只有一个分组时不输出，见 template-parts/links.php） */
.lgrp {
  margin: 22px 0 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink2);
}
.lgrp:first-child { margin-top: 0; }

.flinks {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap);
}
.flinks--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.flinks--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.flinks--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

/* 单个友链：白底卡片 + 极轻阴影，与模板卡片同一套语言 */
.flink {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 15px;
  background: var(--card);
  border-radius: var(--r);
  box-shadow: var(--sh-card);
  transition: transform .2s ease, box-shadow .2s ease;
}
.flink:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh-card-h);
}
.flink-logo {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  object-fit: contain;
  background: var(--bg);
}
.flink-tx {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.flink-tx b {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.flink:hover .flink-tx b { color: var(--blue-d); }
.flink-tx i {
  font-style: normal;
  font-size: 12px;
  color: var(--ink3);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* 提交结果反馈条 */
.lmsg {
  margin: 0 0 20px;
  padding: 12px 18px;
  border-radius: var(--r);
  font-size: 14px;
  line-height: 1.7;
  border-left: 4px solid var(--blue);
  background: var(--blue-l);
  color: var(--blue-d);
}
.lmsg.is-ok {
  border-left-color: var(--green);
  background: #eef7f2;
  color: #2f7a57;
}
.lmsg.is-err {
  border-left-color: #dba617;
  background: #fdf8e8;
  color: #7a5a12;
}

/* ---------------------------------------------------------- 申请表单 */
.lform {
  position: relative;   /* 蜜罐字段用 absolute 移出视口，需要这里做定位参照 */
  margin-top: 34px;
  padding: 26px 28px 24px;
  background: var(--card);
  border-radius: var(--r);
  box-shadow: var(--sh-card);
}
.lform-hd {
  margin: 0 0 12px;
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
}
.lform-note {
  margin: 0 0 20px;
  padding: 12px 16px;
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--ink2);
  background: var(--bg);
  border-radius: 6px;
}
.lform-note p { margin: 0; }
.lform-note p + p { margin-top: 8px; }

/* 蜜罐：移出视口而不是 display:none —— 脚本会跳过不可见元素，但会填这里。 */
.lform-hp {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.lform-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.lform-field {
  display: block;
  margin-bottom: 16px;
}
.lform-field > span {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  color: var(--ink2);
}
.lform-field > span i {
  font-style: normal;
  color: #e2574c;
  margin-left: 3px;
}
.lform-field input {
  width: 100%;
  padding: 10px 13px;
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  background: #fbfcfd;
  border: 1px solid var(--line2);
  border-radius: 6px;
  outline: none;
  transition: background .18s ease, border-color .18s ease;
}
.lform-field input:focus {
  background: #fff;
  border-color: var(--blue);
}
.lform-field input::placeholder { color: #b0bcc8; }

.lform-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin: 4px 0 0;
}
.lform-submit {
  padding: 11px 30px;
  font-size: 14.5px;
  font-weight: 600;
  color: #fff;
  background: var(--blue);
  border: 0;
  border-radius: var(--r);
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(37, 148, 240, .24);
  transition: background .18s ease, transform .18s ease;
}
.lform-submit:hover {
  background: var(--blue-d);
  transform: translateY(-1px);
}
.lform-tip { font-size: 12.5px; color: var(--ink3); }

.lpage-intro { margin-bottom: 8px; }

/* ============================================================ 11. 页脚 */
/* 中性深灰（不用带蓝调的深蓝）—— 在一片浅色里收个尾，不抢视线 */
.ft { background: #2c3136; color: #9aa3ad; margin-top: 44px; padding: 34px 0 0; font-size: 13.5px; }
.ft-in { display: flex; flex-wrap: wrap; gap: 36px; }
.ft-col { min-width: 150px; }
.ft h4 { color: #fff; font-size: 14px; margin: 0 0 11px; font-weight: 600; }
.ft-col a { display: block; padding: 3px 0; transition: color .18s ease; }
.ft-col a:hover { color: #fff; }

/* -------------------------------------- 页脚右侧二维码（公众号 / 小程序） */
/*
 * .ft-in 是 flex 容器，三栏靠左排完右侧会空出一大片；
 * 用 margin-left:auto 把二维码整体顶到行尾，跟三栏共用同一行。
 * 二维码必须垫白底——深色页脚里贴深色的码扫不出来。
 * 图片固定引用 /images/qr-gzh.png、/images/qr-mp.png，换码覆盖文件即可。
 */
.ft-qr {
  margin-left: auto;
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding-top: 2px;
}
.ft-qr-item { flex: 0 0 auto; width: 96px; }
.ft-qr-box {
  display: block;
  width: 96px;
  height: 96px;
  padding: 5px;
  box-sizing: border-box;
  background: #fff;
  border-radius: 9px;
  line-height: 0;
}
.ft-qr-box img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.ft-qr-tx {
  display: block;
  margin-top: 8px;
  text-align: center;
  font-size: 12.5px;
  line-height: 1.4;
  color: #9aa3ad;
}

/* ------------------------------------------------- 页脚友链带（一条横排） */
.ft-links {
  margin-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, .08);
}
.ft-links-in {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 14px 16px 0;
}
.ft-links-hd {
  flex: 0 0 auto;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
}
.ft-links-list {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  line-height: 1.7;
}
.ft-links-list a { color: #9aa3ad; transition: color .18s ease; }
.ft-links-list a:hover { color: #fff; }
.ft-links-more {
  flex: 0 0 auto;
  color: var(--blue);
  transition: color .18s ease;
}
.ft-links-more:hover { color: #6db6f5; }
.ft-links-more::after { content: " ›"; }

/* ------------------------------------------- 页脚底栏：版权 / 备案 / 免责 */
/*
 * 与上面三栏之间用一条 8% 白的分隔线隔开，底栏居中。
 * 备案号用 target=_blank + rel=nofollow（输出在 footer.php），
 * 这里只管样式：两个备案号之间用竖线分隔，图标记在号前面。
 */
.ft-bar {
  margin-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  background: rgba(0, 0, 0, .14);
}
.ft-bar-in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 14px;
  padding: 15px 16px 17px;
  text-align: center;
  font-size: 12.5px;
  line-height: 1.8;
  color: #8b949e;
}
.ft-bar-in p { margin: 0; }

.ft-cp { color: #a8b1ba; }

.ft-lic {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 12px;
}
.ft-lic a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #8b949e;
  transition: color .18s ease;
}
.ft-lic a:hover { color: #fff; }
.ft-lic img {
  display: block;
  width: 18px;
  height: 18px;
  object-fit: contain;
}
/* 两项之间一条淡竖线，比用「|」字符更干净（也不会被读屏念出来）。 */
.ft-lic a + a::before {
  content: "";
  width: 1px;
  height: 11px;
  margin-right: 12px;
  background: rgba(255, 255, 255, .16);
}

.ft-note { color: #7d868f; }

/* ============================================================ 13. 投稿与求档 */
/*
 * 两个表单（投稿 / 求档）共用一套视觉：
 *   区块 -> .apply-sec，卡片 -> .apply-card，表单 -> .aform。
 * 反馈条沿用友链那套配色，但类名独立（.amsg），避免两个模块互相影响。
 */
.apply-sec {
  margin-top: 44px;
}
.apply-lead {
  margin: -6px 0 18px;
  font-size: 14px;
  line-height: 1.8;
  color: var(--ink2);
}
.apply-closed {
  margin: 0;
  padding: 18px 20px;
  font-size: 14px;
  color: var(--ink2);
  background: var(--bg);
  border-radius: var(--r);
}

/* 提交结果反馈条 */
.amsg {
  margin: 0 0 20px;
  padding: 12px 18px;
  border-radius: var(--r);
  font-size: 14px;
  line-height: 1.7;
  border-left: 4px solid var(--blue);
  background: var(--blue-l);
  color: var(--blue-d);
}
.amsg.is-ok {
  border-left-color: var(--green);
  background: #eef7f2;
  color: #2f7a57;
}
.amsg.is-err {
  border-left-color: #dba617;
  background: #fdf8e8;
  color: #7a5a12;
}

/* ------------------------------------------------------------ 表单卡片 */
.aform {
  position: relative;   /* 蜜罐字段用 absolute 移出视口，需要定位参照 */
  padding: 26px 28px 24px;
  background: var(--card);
  border-radius: var(--r);
  box-shadow: var(--sh-card);
}

/* 蜜罐：移出视口而不是 display:none —— 脚本会跳过不可见元素，但会填这里。 */
.aform-hp {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.aform-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 16px;
}

.aform-field {
  display: block;
  margin-bottom: 16px;
}
.aform-field > label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  color: var(--ink2);
}
.aform-field > label i {
  font-style: normal;
  color: #e2574c;
  margin-left: 3px;
}

.aform-field input[type="text"],
.aform-field input[type="email"],
.aform-field select,
.aform-field textarea {
  width: 100%;
  padding: 10px 13px;
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  background: #fbfcfd;
  border: 1px solid var(--line2);
  border-radius: 6px;
  outline: none;
  transition: background .18s ease, border-color .18s ease;
}
.aform-field input[type="text"]:focus,
.aform-field input[type="email"]:focus,
.aform-field select:focus,
.aform-field textarea:focus {
  background: #fff;
  border-color: var(--blue);
}
.aform-field input::placeholder,
.aform-field textarea::placeholder { color: #b0bcc8; }
.aform-field textarea {
  resize: vertical;
  min-height: 96px;
  line-height: 1.7;
}

/* 文件选择框：让原生控件不那么突兀 */
.aform-field input[type="file"] {
  width: 100%;
  padding: 9px 12px;
  font-size: 13.5px;
  color: var(--ink2);
  background: #fbfcfd;
  border: 1px dashed var(--line2);
  border-radius: 6px;
  cursor: pointer;
}
.aform-field input[type="file"]:hover {
  border-color: var(--blue);
  background: #fff;
}

.aform-tip {
  margin: 6px 0 0;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--ink3);
}
/* JS 在选中文件后写进来的「已选择 xx MB」 */
.aform-picked {
  display: block;
  margin-top: 5px;
  font-size: 12.5px;
  color: var(--green);
}

.aform-submit {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 6px;
}
.aform-note {
  font-size: 13px;
  color: var(--ink3);
}

/* ==================================================== 11.5 列表页 / 详情页 */
/*
 * 本类热门（分类页顶部）
 *
 * 视觉语言与首页的 .cbox 同一套（左侧色条 + 名称 + 条数徽章），
 * 但这里占**整行**，所以排行排成两列 —— 8 条只占四行高度，
 * 不至于把下面的卡片列表推到首屏之外。
 */
.hotbox {
  background: #fff;
  padding: 14px 18px 10px;
  border-radius: var(--r);
  box-shadow: var(--sh-card);
  margin: 0 0 18px;
}
.hotbox .hd {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  padding: 0 0 9px;
  border-bottom: 1px solid var(--line);
}
.hotbox .hd b {
  position: relative;
  padding-left: 9px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  color: #333;
}
.hotbox .hd b::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 13px;
  border-radius: 2px;
  background: var(--blue);
}
.hotbox .hd .cnt {
  font-style: normal;
  font-size: 11.5px;
  color: var(--ink3);
  background: var(--badge);
  border-radius: 4px;
  padding: 1px 7px;
}
.hotbox .hd .tip { margin-left: auto; font-size: 12px; color: #c3ccd8; }
/* 两列排布；序号按原顺序从左到右、再从上到下。 */
.hotbox .rank {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 26px;
}
.hotbox .rank li { min-width: 0; }
.hotbox .rank li a {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.hotbox .rank li .heat { flex: 0 0 auto; margin-left: 10px; }

/*
 * 详情页「模板预览图」
 *
 * 独立一张白卡（与 .pbox 同级），因为它是「决策依据」而不是「正文」。
 * 图片纵向单列铺开 —— 与参考站一致：PPT 是横向版面，
 * 并排两张之后每张窄到看不清版式，就失去了预览的意义。
 */
.shots {
  background: #fff;
  border-radius: var(--r);
  box-shadow: var(--sh);
  padding: 16px 20px 20px;
  margin: 0 0 22px;
}
.shots-hd {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 0 12px;
  border-bottom: 1px solid var(--line);
  margin: 0 0 16px;
}
.shots-hd h2 {
  position: relative;
  margin: 0;
  padding-left: 11px;
  font-size: 17px;
  font-weight: 700;
  color: #333;
}
.shots-hd h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 15px;
  border-radius: 2px;
  background: var(--blue);
}
.shots-hd .cnt {
  font-style: normal;
  font-size: 12px;
  color: var(--ink3);
  background: var(--badge);
  border-radius: 4px;
  padding: 2px 8px;
}
.shots-hd .hint { margin-left: auto; font-size: 12.5px; color: #c3ccd8; }

/*
 * 单列网格：必须显式声明 minmax(0, 1fr)。
 * 否则 grid 轨道按 auto 最小值解析，会被截图固有宽度（可达 3000px 的竖版长图）
 * 顶开，导致整页横向溢出——同 .grid / .pgrid / .cats 的写法。
 *
 * gap 必须是 0：多张截图要连成**一整条**，中间一旦露出底色或白缝，
 * 读者看到的又回到「好几张图拼在一起」了。
 */
.shots-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.shot { margin: 0; min-width: 0; }

/*
 * 单张截图。
 *
 * 这里刻意**没有**边框 / 圆角 / 阴影 —— 它们会给每张图一个独立的轮廓，
 * 把「一份完整作品」重新切回「六张小图」。参考站（www.pptjishi.com）
 * 的预览区就是一条连成一片的长图。
 *
 * line-height / font-size 归零，是为了掐掉 <a> 作为行内元素时
 * 图片基线下方那几像素的空隙 —— 不清掉的话，相邻两张之间会出现一条细白线，
 * 那正是「连成一片」最容易破功的地方（图越大越明显）。
 */
.shot-link {
  position: relative;
  display: block;
  border: 0;
  border-radius: 0;
  overflow: hidden;
  line-height: 0;
  font-size: 0;
  /* 图片没加载出来之前先占一块浅色底，避免整页高度反复跳动（CLS）。 */
  background: var(--bg);
  cursor: zoom-in;
  min-width: 0;
}
.shot-link img {
  display: block;
  width: 100%;
  height: auto;
}
/* 描边撤掉之后，hover 反馈改由亮度承担：一眼看出这一段可以点。 */
.shot-link:hover img { opacity: .93; }

/*
 * 灯箱
 *
 * 纯 CSS + 少量 JS（assets/js/app.js）。没有脚本时这里永远不显示，
 * 点图片走 <a href="原图"> 的默认行为，功能不缺失。
 */
.pltb {
  position: fixed;
  inset: 0;
  z-index: 99990;
  display: none;
  background: rgba(8, 14, 22, .93);
}
.pltb.is-open { display: flex; align-items: center; justify-content: center; }
.pltb img {
  max-width: 94vw;
  max-height: 86vh;
  width: auto;
  height: auto;
  border-radius: 4px;
  box-shadow: 0 12px 48px rgba(0, 0, 0, .5);
  background: #fff;
}
.pltb-count {
  position: absolute;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  color: #cbd6e2;
  font-size: 13px;
  letter-spacing: .5px;
}
.pltb-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: background .18s ease;
}
.pltb-btn:hover { background: rgba(255, 255, 255, .26); }
.pltb-prev { left: 18px; }
.pltb-next { right: 18px; }
.pltb-close {
  top: 16px;
  right: 16px;
  transform: none;
  font-size: 20px;
}
/* 只有一张图时不显示左右箭头（点了也没反应，反而像坏了）。 */
.pltb.is-single .pltb-prev,
.pltb.is-single .pltb-next { display: none; }

/*
 * 详情页广告位
 *
 * 与下载页的 .dlad 分开命名（.sad）：两者所处版面完全不同 ——
 * 下载页整页只有一块内容，广告可以很重；详情页广告夹在正文与截图之间，
 * 必须做成「不打断阅读」的样子：白底、圆角、居中、带浅边框。
 */
.sad {
  position: relative;
  margin: 0 0 22px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--line2);
  border-radius: var(--r);
  text-align: center;
  overflow: hidden;
}
.sad img { max-width: 100%; height: auto; }
.sad-tag {
  position: absolute;
  left: 8px;
  top: 8px;
  padding: 0 6px;
  font-size: 11px;
  line-height: 16px;
  color: var(--ink3);
  background: rgba(247, 249, 251, .92);
  border: 1px solid var(--line2);
  border-radius: 3px;
  pointer-events: none;
}
/* 侧栏那一格宽度只有 320px，去掉左右内边距与通栏感。 */
.sad--side { padding: 8px; }
.sad--side img { width: 100%; }
.sad--side .sad-tag { left: 4px; top: 4px; }

/* ------------------------------------------------------------
 * 空广告位占位框（v1.6.12）
 *
 * 起因：站长填代码之前，广告位在页面上连一个像素都不占，
 * 「这个位在哪、能放多大」只能靠猜。于是给空位画一个浅色虚线框，
 * 框里直接写明它能用多宽、建议多大。
 *
 * ★ 只对管理员输出（判断在 ppts_render_ad 里），所以这里不用考虑
 *   「访客会不会觉得站点坏了」—— 它是一个标尺，不是设计元素。
 *
 * 样式上刻意做成「比页面浅一点点」：底用极淡的蓝灰 #f8fbfe（页面底是 #f7f9fb），
 * 边用虚线而不是实线 —— 实线会被当成一张真的卡片，虚线才读作「这里还空着」。
 * 字号一律压到 13/12/11.5，任何情况下都不该抢内容。
 *
 * 与 .dlad（下载页）共用这一套：两张样式表都在下载页加载，
 * 没必要在 download.css 里再抄一份。
 * ------------------------------------------------------------ */
.dlad.is-empty,
.sad.is-empty {
  min-height: 90px;
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: #f8fbfe;
  border: 1px dashed #cfdff0;
  border-radius: var(--r);
}

/* 主力位与侧栏能放大版，占位框就按实际容量画高，让站长一眼看出「放 250 高会占多少」。 */
.dlad.is-empty.is-tall,
.sad.is-empty.is-tall { min-height: 250px; }

.adph-t {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink2);
  letter-spacing: .2px;
  line-height: 1.5;
}
.adph-s {
  font-size: 12px;
  color: var(--ink3);
  line-height: 1.5;
}
.adph-s code {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  font-size: 12px;
  font-family: inherit;
  color: var(--blue-d);
  background: #fff;
  border: 1px solid var(--line2);
  border-radius: 4px;
}
.adph-n {
  font-size: 11.5px;
  color: #aeb9c6;
  line-height: 1.5;
}

/* 正文图片：必须限制在内容栏内，否则大图会撑破 .pbox 的白卡。 */
.pbox img { max-width: 100%; height: auto; display: block; }

/* ============================================================ 12. 响应式 */
/*
 * 卡片网格的列数降级统一走变量，只在这里改值，不重复写 grid-template：
 *   --gcols → .grid（模板卡片网格）、--pcols → .pgrid（首页图文模块）。
 * 另有一类不走变量的（.cats / .flinks），因为它们的列数组合更多，直接写整条规则更清楚。
 *
 * ★ 降级规则挂在 .grid 上（不是 .grid--N）：
 *   archive / index / search 用的是裸 .grid，旧写法只降 .grid--N，
 *   结果这些页面在手机上会一直是 5 列 —— 现在统一由 .grid 兜住。
 *   因为媒体查询在源文件中靠后，特异性同为 (0,1,0) 时它会盖掉前面的
 *   .grid--3 / .grid--4，所以 3 列的显式写法要在 1180 档重新声明一次。
 *
 * 断点按 5 列的实际手感定：容器 1230px 时单卡刚好 230px；
 * 视口降到 1180px 以下，单卡会窄到 ~200px，此时先掉到 4 列更稳。
 */
@media (max-width: 1180px) {
  .grid { --gcols: 4; }
  .grid--3 { --gcols: 3; }   /* 显式 3 列不该被抬成 4 列 */
  /* 友链同理：5 列的显式写法要先跟模板卡片一起降到 4 列。 */
  .flinks--5 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* 图文模块同理：默认就是 4 列，只有显式 5 列的需要跟着降。 */
  .pgrid--5 { --pcols: 4; }
}

@media (max-width: 1080px) {
  .cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* 图文模块：封面比列表页的横条高得多，3 列就到头了，再挤封面就看不清。 */
  .pgrid { --pcols: 3; }
  .pgrid--2 { --pcols: 2; }

  .nav-toggle { display: grid; margin-left: auto; }
  .nav {
    display: none;
    position: absolute;
    left: 0; right: 0;
    /* 与 .hdr-in 的高度严格一致 —— 差 1px 就会在站头下沿露出一条缝。 */
    top: 58px;
    background: #fff;
    border-top: 1px solid var(--line);
    box-shadow: var(--sh2);
    padding: 10px 16px 16px;
    max-height: calc(100vh - 58px);
    overflow-y: auto;
  }
  .nav.is-open { display: block; }
  .nav-list { flex-direction: column; gap: 0; }
  .nav-list > li > a { padding: 11px 8px; font-size: 15px; }
  .nav-list .sub-menu {
    position: static;
    display: block;
    box-shadow: none;
    border: 0;
    padding: 0 0 0 14px;
    border-radius: 0;
  }
}

@media (max-width: 900px) {
  .grid { --gcols: 3; }
  /* 友链卡片比模板卡片矮，900 档掉到 3 列更稳。 */
  .flinks,
  .flinks--5,
  .flinks--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  .grid { --gcols: 2; gap: 10px; }
  .pgrid { --pcols: 2; gap: 10px; }
  .art { grid-template-columns: minmax(0, 1fr); }
  .side { position: static; }
  .cats { grid-template-columns: 1fr; }
  .hdr-in { gap: 14px; height: 52px; }
  .nav { top: 52px; }
  .srch { flex: 1 1 auto; }
  .art h1 { font-size: 22px; }
  .pbox { padding: 18px 16px; font-size: 15px; }
  .sec-hd { flex-wrap: wrap; row-gap: 6px; }
  .sec-chips { order: 3; flex-basis: 100%; max-height: none; }
  /*
   * 首页图文模块的热门子分类：窄屏整行换行之后，仍要贴在 H2 下面，
   * 不能被上面那条 `order: 3` 推到「共 N 个模板」后面去。
   */
  .sec-cards .sec-hd .sec-chips { order: 1; }

  /* 友链：卡片两列，申请表单改单列。 */
  .flinks,
  .flinks--5,
  .flinks--4,
  .flinks--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lform { padding: 20px 18px 18px; }
  .lform-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }

  /* 投稿 / 求档：同样的处理。 */
  .apply-sec { margin-top: 34px; }
  .aform { padding: 20px 18px 18px; }
  .aform-grid { grid-template-columns: minmax(0, 1fr); }

  /* 页脚友链带在窄屏换成竖排（标题 / 链接 / 申请入口各占一行）。 */
  .ft-links-in { flex-direction: column; align-items: flex-start; gap: 8px; }
  .ft-bar-in { text-align: left; justify-content: flex-start; }
  .ft-lic { justify-content: flex-start; }

  /* 列表页 / 详情页 */
  .hotbox .rank { grid-template-columns: minmax(0, 1fr); }   /* 窄屏单列，免得标题被截成半句 */
  .shots { padding: 14px 14px 16px; }
  .shots-hd { flex-wrap: wrap; row-gap: 6px; }
  .shots-hd .hint { flex-basis: 100%; margin-left: 0; }
  .pltb-btn { width: 38px; height: 38px; font-size: 18px; }
  .pltb-prev { left: 8px; }
  .pltb-next { right: 8px; }
  .pltb img { max-width: 96vw; max-height: 78vh; }
}

@media (max-width: 480px) {
  .grid { --gcols: 1; }
  .pgrid { --pcols: 1; }
  .card h3 { font-size: 13.5px; min-height: 40px; }
  .pcard h3 { font-size: 14px; }
  .srch input { padding: 9px 12px; }
  .srch button { padding: 0 12px; }
  /* 小屏给搜索框和汉堡按钮让位，logo 按比例降到 40px（桌面端仍是 50px）。 */
  .logo img { height: 40px; }
  .flinks,
  .flinks--5,
  .flinks--4,
  .flinks--3,
  .flinks--2 { grid-template-columns: minmax(0, 1fr); }
  .lform-submit { width: 100%; }
  .aform-submit .btn { width: 100%; }
}

/* 无障碍：尊重系统的减弱动画偏好 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* 页脚二维码：窄屏取消右推，随三栏一起换行排列 */
@media (max-width: 820px) {
  .ft-qr { margin-left: 0; gap: 26px; }
}
@media (max-width: 480px) {
  .ft-qr { width: 100%; justify-content: flex-start; }
}

/*
 * ★ 缩略图方案 B：模糊底 + 完整封面（v1.6.13）
 *
 * 由来：现有大量封面是「整份 deck 拼成的竖长图」，230×130 中心裁切后
 * 只剩中间一条色带，标题行和内页版式全被裁掉。方案 B 不再裁 ——
 *   - .is-bg：同一张图 cover 铺满 + 高斯模糊 + 放大，负责填满框、补两侧空洞；
 *   - .is-fg：同一张图 contain 完整放进框里，负责「看得见封面」。
 * 两层 src 相同（都是 ppts-fit），浏览器只发一次请求。见 inc/template-tags.php。
 *
 * 放大 1.3 是必需的：blur 会把边缘的像素「吸」进来，不放大就会在框边
 * 留出一圈半透明的羽化边。容器有 overflow:hidden，放大的部分被裁掉即可。
 */
.thumb .ppts-thumb-img.is-bg,
.pthumb .ppts-thumb-img.is-bg,
.dlcard-thumb .ppts-thumb-img.is-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(16px) saturate(1.25) brightness(1.04);
  transform: scale(1.3);
  opacity: .92;
  z-index: 0;
}

.thumb .ppts-thumb-img.is-fg,
.pthumb .ppts-thumb-img.is-fg,
.dlcard-thumb .ppts-thumb-img.is-fg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 1;
}

/*
 * 悬停只放大前景：底层一旦被拉回 1.06 就会露出羽化边，
 * 所以这里分别给两层各写一遍（特异性要压过上面那条 .card:hover .thumb img）。
 */
.card:hover .thumb .ppts-thumb-img.is-bg { transform: scale(1.36); }
.card:hover .thumb .ppts-thumb-img.is-fg { transform: scale(1.06); }
.pcard:hover .pthumb .ppts-thumb-img.is-bg { transform: scale(1.32); }
.pcard:hover .pthumb .ppts-thumb-img.is-fg { transform: scale(1.04); }
/*
 * 右侧悬浮工具条：竖排「投稿入口 + 返回顶部」。
 *
 * ★ 定位的关键：钉的是**内容区（.wrap）的右边缘**，不是屏幕右边缘。
 *   视口宽于 --wrap(1230px) 时，容器右边缘离屏幕右边 = 50% - --wrap/2；
 *   按钮宽 50px，所以 right 取 (50% - --wrap/2 - 50px) 时刚好贴在外侧。
 *   视口不够宽时那个值会变成负数把按钮挤出屏幕，
 *   所以外面套一层 max(12px, …) 兜底 —— 窄屏自动退回贴屏幕右侧 12px。
 *   （不能写死 right:22px：宽屏下按钮会孤零零飘在屏幕角上，跟内容脱节。）
 */
.side-tools {
  position: fixed;
  right: max(12px, calc(50% - var(--wrap) / 2 - 50px));
  bottom: 28px;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/*
 * 两个按钮共用一套外观，一个链接（投稿）一个按钮（回顶部），
 * 所以 font: inherit 是必需的 —— button 元素不继承页面字体。
 */
.st-btn {
  display: grid;
  place-items: center;
  gap: 3px;
  width: 50px;
  height: 50px;
  padding: 0;
  font: inherit;
  border: 1px solid var(--line2);
  border-radius: var(--r);
  background: #fff;
  color: var(--ink2);
  box-shadow: var(--sh2);
  cursor: pointer;
  text-decoration: none;
  transition: color .15s, background .15s, border-color .15s, transform .15s;
}
.st-btn svg { display: block; }
.st-btn span { font-size: 10px; line-height: 1; letter-spacing: .3px; }
.st-btn:hover { color: var(--blue-d); border-color: var(--blue); transform: translateY(-2px); }

/* 投稿是入口，常驻；回顶部要滚过一段才有意义 —— 由 app.js 加 .is-visible。
 * 用 opacity + visibility 而不是 display：display 切换做不了过渡，
 * visibility 保证隐藏时不会被 Tab 聚焦到。 */
.st-top {
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  pointer-events: none;
}
.st-top.is-visible { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }

/* 投稿按钮上主色浅底，跟「回顶部」这个纯工具按钮区分开。 */
.st-submit { color: var(--blue); border-color: #d7e9fb; background: var(--blue-l); }
.st-submit:hover { color: #fff; background: var(--blue); border-color: var(--blue); }

@media (max-width: 480px) {
  .side-tools { bottom: 16px; }
  .st-btn { width: 44px; height: 44px; }
  .st-btn span { font-size: 9px; }
}