/*
 * 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); }

/* 移动端汉堡 */
/* v20261016：蓝底白线圆角按钮（原白底灰线方框太素），展开时三线渐变为 ✕ */
.nav-toggle {
  display: none;
  border: 0;
  background: linear-gradient(135deg, var(--blue), var(--blue-d));
  border-radius: 9px;
  width: 42px; height: 38px;
  cursor: pointer;
  padding: 0;
  place-items: center;
  align-content: center;
  gap: 3px;
  box-shadow: 0 2px 8px rgba(37, 148, 240, .35);
  transition: box-shadow .2s ease, transform .2s ease;
}
.nav-toggle:hover {
  box-shadow: 0 3px 12px rgba(37, 148, 240, .45);
  transform: translateY(-1px);
}
.nav-toggle:active { transform: translateY(0); }
.nav-toggle i {
  display: block;
  width: 17px; height: 2px;
  background: #fff;
  border-radius: 2px;
  margin: 0;
  transition: transform .25s ease, opacity .2s ease;
}
/* aria-expanded 由 app.js 维护，这里纯 CSS 完成汉堡 → ✕ 的形变 */
.nav-toggle[aria-expanded="true"] {
  background: linear-gradient(135deg, var(--blue-d), #0b5cb0);
}
.nav-toggle[aria-expanded="true"] i:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] i:nth-child(2) { opacity: 0; transform: scaleX(.4); }
.nav-toggle[aria-expanded="true"] i:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* ============================================================ 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 上，模板里不再需要额外的占位元素。
 */
/*
 * ★ v1.6.21 重做：区块头拆成**两行**。
 *
 *   第一行：短色条 + 标题 + 小字说明 + 右端「更多 ›」
 *   第二行：子分类胶囊（`.sec-chips` 独占一行）
 *
 * 原来是「标题和十几个子分类挤在同一行、靠换行硬塞」。那样做有两个问题：
 *   ① 标题被挤到不固定的位置，子分类一多，整块的高度和折行点全看分类名长短；
 *   ② 子分类只是灰色文字链接，选中和没选中长得一样 —— 一排看起来一模一样的
 *      文字里，访客分不出自己站在哪一个上。
 *
 * 现在第一行永远只有标题那几个元素，第二行是独立的筛选条。
 * 胶囊做成白底描边圆角，选中的那颗填主色 —— 「可切换的筛选器」这件事
 * 不用文字说明，看一眼形状就知道。
 */
.sec-hd {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  min-height: 24px;
  margin: 2px 0 14px;
}
.sec-hd h1,
.sec-hd p.sec-t,
.sec-hd h2 {
  position: relative;
  margin: 0;
  padding-left: 12px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .2px;
  white-space: nowrap;
  color: #22262b;
}
.sec-hd h1::before,
.sec-hd p.sec-t::before,
.sec-hd h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 15px;
  border-radius: 3px;
  background: linear-gradient(180deg, #4fa9f6, var(--blue-d));
}
/*
 * 分类页的标题用 h1（页面的唯一主语），字号比区块头的 h2 大一档。
 * 只放大到 20px：列表页上方还有面包屑和一排子分类，标题太大反而压住内容。
 */
.sec-hd h1 { font-size: 20px; }
.sec-hd h1::before { height: 18px; }
/* 标题右侧的小字说明（后台「首页模块」里可填） */
.sec-hd .sec-note { font-size: 12.5px; color: #b5b5b5; }

/*
 * 子分类筛选条 —— 独占一行。
 *
 * ★ v1.6.18 拿掉的 overflow:hidden + max-height:26px 不要再回来：
 *   那两条会把超出一行的子分类**直接裁掉**，「节日PPT」下十几个二级分类
 *   只露出前几个，而被藏起来的恰好是往下钻的唯一入口。这里自然换行，一个不漏。
 *
 * ★ v1.6.21 改成胶囊：白底 + 极浅描边 + 全圆角，选中的填主色。
 *   不再是无描边的灰色文字链接 —— 那样一排字里挑不出「当前」。
 */
.sec-chips {
  order: 5;
  flex: 1 1 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 1px;
}
/*
 * 只有带子分类的区块头（列表页、首页图文模块）才需要改成顶部对齐：
 * 子分类换行成一整块之后，若仍按 center 对齐，H1 / H2 会被顶到垂直居中位置，
 * 标题上方留出一块说不清用途的空白。
 * （:has() 不被支持的浏览器会忽略它 —— 最坏也只是回到居中，不会有东西被裁掉。）
 */
.sec-hd:has(.sec-chips) { align-items: flex-start; }
.sec-hd:has(.sec-chips) > h1,
.sec-hd:has(.sec-chips) > p.sec-t,
.sec-hd:has(.sec-chips) > h2 { margin-top: 0; }
.sec-chips a {
  display: inline-flex;
  align-items: center;
  padding: 5px 14px;
  font-size: 13px;
  line-height: 20px;
  color: var(--ink2);
  background: var(--card);
  border: 1px solid #e9edf2;
  border-radius: 999px;
  white-space: nowrap;
  transition: color .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.sec-chips a:hover {
  color: var(--blue-d);
  background: var(--blue-l);
  border-color: #bcdcf8;
}
/* 当前所在分类：填主色 + 一道浅投影，让它从一排白胶囊里浮出来 */
.sec-chips a.is-on,
.sec-chips a.is-on:hover {
  color: #fff;
  font-weight: 600;
  background: var(--blue);
  border-color: var(--blue);
  box-shadow: 0 3px 9px rgba(37, 148, 240, .28);
}

/* 「更多 ›」：灰色小字，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; }

/*
 * 卡片：纯白 + 极轻阴影 + 直角（v1.6.28 起去掉），静止时几乎看不见阴影，hover 才浮起。
 * 这是参考站（ypppt.com）的做法 —— 靠留白和阴影层次分区，而不是靠描边。
 */
.card {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border-radius: 0;
  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: 0;
  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 h1,
.sec-cards .sec-hd h2 { font-size: 15.5px; }
.sec-cards .sec-hd h1::before,
.sec-cards .sec-hd h2::before { height: 13px; }

/*
 * ★ v1.6.22：首页图文模块的区块头**回退到 v1.6.20 的单行版式**，
 *   列表页（分类页）继续用 v1.6.21 那套两行胶囊筛选条。
 *
 * 两套并存是有意的，不是没改干净：
 *   - 列表页那一排是**当前分类的兄弟分类**，一排里必然有且只有一颗代表「你现在的位置」，
 *     所以它需要一个形状（白胶囊 + 选中填主色）来回答「我在哪 / 我怎么换过去」；
 *   - 首页这一排只是**该模块挑出来的几个热门入口**，点进去是离开本页，不存在「当前项」。
 *     做成十几个白方块，既没有可回答的问题，又把模块标题从它管的内容上挤开了。
 *
 * 于是这里把 order / flex-basis / 描边 / 填色逐条覆写回灰色文字链接：
 * 标题、子分类、「更多 ›」回到同一行，一行排不下才换行。
 * ★ `.more` 仍要显式写 order —— 默认 0，不写会跑到最前头。
 */
.sec-cards .sec-hd { gap: 10px; margin: 2px 0 15px; }
.sec-cards .sec-hd h1,
.sec-cards .sec-hd h2 { padding-left: 11px; color: #333; }
.sec-cards .sec-hd h1::before,
.sec-cards .sec-hd h2::before { border-radius: 2px; background: var(--blue); }
.sec-cards .sec-hd .sec-chips {
  order: 1;
  flex: 1 1 auto;
  min-width: 0;
  gap: 4px 2px;
  margin-top: 0;
}
.sec-cards .sec-hd .sec-note { order: 2; }
.sec-cards .sec-hd .more { order: 3; }
/* 单行版式回到垂直居中（全局那条 flex-start 是为列表页的两行结构写的） */
.sec-cards .sec-hd:has(.sec-chips) { align-items: center; }
.sec-cards .sec-hd .sec-chips a {
  padding: 0 9px;
  font-size: 13px;
  line-height: 24px;
  color: #777;
  background: none;
  border: 0;
  border-radius: 4px;
  box-shadow: none;
}
.sec-cards .sec-hd .sec-chips a:hover { color: var(--blue-d); background: var(--blue-l); }
/*
 * 首页不存在「当前分类」，即便将来有调用方传了 $active_id 也别填色 ——
 * 一颗被填成主色的胶囊会让人以为它是筛选结果，而不是一个入口。
 */
.sec-cards .sec-hd .sec-chips a.is-on,
.sec-cards .sec-hd .sec-chips a.is-on:hover {
  color: #777;
  font-weight: 400;
  background: none;
  box-shadow: none;
}

/* 模块之间（网格 ↔ 图文区块）的竖向间距。
 * 只写相邻组合，避免第一个模块头顶无端多出 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: 0;
  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;
  /* v1.6.28：不再锁 4:3 —— 比例统一由 mu-plugin（ppts-thumb-top.php）的 230:130 接管。 */
  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;
}
/*
 * 分隔符「·」单独上浅灰（v1.6.16 起这一段是「分类名 · 页数 · 体积」三项，
 * 统一灰色会糊成一串）。与列表卡片 .card .mt .ed i 同一套口径。
 */
.pcard .pmeta .pspec i {
  font-style: normal;
  color: #c2c2c2;
  margin: 0 4px;
}
/* 右半边：浏览量贴右。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; }

/*
 * 单张顶部大图（特色图）—— v1.6.23 起详情页已不再输出。
 *
 * 旧版在截图区之外还会把特色图单独铺成一张 16:9 大图，
 * 那张图只是封面，与下面的截图重复，且常常是列表页用的窄缩略图，放大后很糊。
 * 规则留在这是为了兼容其它模板万一还在用这个类，不要再往详情页加回去。
 */
.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; }

/*
 * 详情页正文框体。
 *
 * ★ v1.7.4：详情页只剩一个正文框「PPT 简介」（.pbox.intro）。
 *   旧版并列在上面的「模板图片」框（.pbox.shots）已整块下线 ——
 *   正文里的图片就留在正文里显示，不再被摘走。
 *
 * margin 只给详情页这个正文框（见下方 .pbox.intro）：
 *   .pbox 还被首页模块、page.php、投稿页、友链页当作正文白卡在用 ——
 *   那些页面里它是一个**整块**，下面本来就跟着别的区块，
 *   凭空多出 22px 只会把版面撑散。
 */
.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;
  min-width: 0;
}
/* 详情页正文框（PPT 简介）：下面还要接标签与相关推荐，留 22px。 */
.pbox.intro { margin: 0 0 22px; }
/* 框体标题条：左侧蓝色竖条 + 标题，下方一条分隔线，两个框体共用。 */
.pbox-hd {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 0 12px;
  border-bottom: 1px solid var(--line);
  margin: 0 0 16px;
}
.pbox-hd h2 {
  position: relative;
  margin: 0;
  padding-left: 11px;
  font-size: 17px;
  font-weight: 700;
  color: #333;
}
.pbox-hd h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 15px;
  border-radius: 2px;
  background: var(--blue);
}
.pbox-hd .cnt {
  font-style: normal;
  font-size: 12px;
  color: var(--ink3);
  background: var(--badge);
  border-radius: 4px;
  padding: 2px 8px;
}
.pbox-hd .hint { margin-left: auto; font-size: 12.5px; color: #c3ccd8; }
.pbox-bd { min-width: 0; }
.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; }

/* 「首页展示 / 全站展示」输出的完整友链区块（footer.php 顶部、front-page.php）
 * —— 自带 .wrap 与区块头，这里只补与页脚之间的呼吸感。 */
.ppts-links-block { padding-bottom: 26px; }

/* 分组小标题（只有一个分组时不输出，见 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;
}

/* ------------------------------ 纯文字友链列表（现行版式） */
/*
 * 2026-10-10 起友链改成纯文字：只显示站名，hover 变主色，点开新窗口。
 * 原卡片版式（.flink*）已停用、规则保留，改回卡片只需换回 template-parts/links.php 的标记。
 */
.llinks {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  line-height: 1.9;
}
.llinks a {
  color: var(--ink2);
  transition: color .18s ease;
}
.llinks a:hover { color: var(--blue-d); }

/* 提交结果反馈条 */
.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; }

/* -------------------------------------------- 页脚右侧二维码（公众号 / 客服） */
/*
 * margin-left:auto 把它顶到 .ft-in 的最右侧：左边三栏导航、右边两张码，
 * 一横排读完就是「站内导航 → 站外联系方式」这个顺序。
 * 窄屏 .ft-in 已经 flex-wrap，它会整块掉到下一行（并左对齐），不会挤成一团。
 *
 * 二维码必须留白边：直接把 jpg 压在深灰底上，深色码点会和背景糊在一起，
 * 微信扫不出来的投诉基本都是这么来的 —— 所以这里是白底 + 5px 内padding，
 * 而不是透明底直接贴。
 */
.ft-qr { margin-left: auto; display: flex; gap: 20px; }
.ft-qr-i { width: 96px; text-align: center; }
.ft-qr-i img {
  width: 96px;
  height: 96px;
  padding: 5px;
  background: #fff;
  border-radius: 10px;
  object-fit: contain;
}
.ft-qr-i b {
  display: block;
  margin-top: 9px;
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
}
.ft-qr-i span {
  display: block;
  margin-top: 2px;
  color: #7d868f;
  font-size: 11.5px;
  line-height: 1.5;
}

/* ------------------------------------------------- 页脚友链带（一条横排） */
.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; }

/*
 * 右侧悬浮工具条：竖排「投稿入口 + 返回顶部」。
 *
 * ★ 定位的关键：钉的是**内容区（.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; }
}

/* ============================================================ 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; }

/*
 * 详情页「模板图片」框体（★ v1.7.4 已整体下线，本节暂无调用点）
 *
 * 之所以不整块删：.shots / .shots-list / .shot 这一套同时被 .shotnav、
 * 「.shotmeta」与对应的窄屏 @media 引用，整块拿掉容易误伤。
 * 但 markup 里已经不会再输出这些类名，新代码不用再往这里加东西。
 *
 * 图片纵向单列铺开 —— 与参考站一致：PPT 是横向版面，
 * 并排两张之后每张窄到看不清版式，就失去了预览的意义。
 */
.shots {
  min-width: 0;
}
/*
 * 截图不吃正文图片的上下留白。
 *
 * .pbox img 给正文插图留了 14px 上下边距，而图片框现在也带 .pbox 类，
 * 那 14px 会把「连成一整条」的截图之间顶出白缝 —— 必须在这里抵消掉。
 */
.shots-list img { width: 100%; margin: 0; }

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

/*
 * 详情页「模板图片」—— 一次一张 + 就地翻页（v1.6.30）
 *
 * ★ 为什么改版式 ★
 * 老版式是「多张连成一整条」：一套 24 页的模板要往下拖很久才看得完，
 * 而且首屏之外全是图，页面变得又高又重。现在框体里一次只放一张，
 * 鼠标移到框体上才浮出左右箭头，点一下就地切到下一张 —— 纯前端切换，
 * 不刷新页面、不发请求。
 *
 * ★ 高度锁 16:9 ★
 * 给 .shot-view 定死 16:9（PPT 的版面比例），图片 object-fit: contain
 * 完整放进去。这样翻页时框体高度不变，页面不会跳一下；
 * 换成自适应高度的话，16:9 与 4:3 混排会让下方正文不停上下弹。
 *
 * ★ 所有图都留在 DOM 里（横向溢出被裁掉），不用 display:none ——
 *   对搜索引擎来说图片仍然在页面上，不是隐藏内容。
 */
.shotstage {
  position: relative;
  min-width: 0;
  outline: none;
}
.shotstage:focus-visible { box-shadow: 0 0 0 2px var(--blue); }

/* 定高舞台：裁掉左右两侧的待翻页图片。 */
.shot-view {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: #f2f3f5;
  cursor: pointer;                 /* 点一下就是下一页 */
  -webkit-tap-highlight-color: transparent;
}

/* 横向排开的胶片：靠 transform 平移，不触发重排。 */
.shot-track {
  display: flex;
  height: 100%;
  transition: transform .34s cubic-bezier(.22, .61, .36, 1);
  will-change: transform;
}

.shotstage .shot {
  flex: 0 0 100%;
  height: 100%;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f2f3f5;
}
/* 不吃 .pbox img 给正文插图留的上下边距；contain 缩放，不裁图。 */
.shotstage .shot img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  margin: 0;
  object-fit: contain;
}

/* ---------------------------------------------------------- 翻页箭头 */
/*
 * ★ 默认透明 —— 鼠标移到框体上才浮出来（站长要求）。
 *   focus-within 是键盘用户的等价入口：Tab 进框体也看得见箭头。
 */
.shotnav {
  position: absolute;
  top: 50%;
  margin-top: -27px;
  z-index: 3;
  width: 44px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: rgba(18, 20, 24, .46);
  color: #fff;
  cursor: pointer;
  opacity: 0;
  transform: scale(.94);
  transition: opacity .18s ease, transform .18s ease, background .18s ease;
}
.shotnav svg { width: 22px; height: 22px; display: block; }
.shotnav--prev { left: 10px; }
.shotnav--next { right: 10px; }

.shotstage:hover .shotnav,
.shotstage:focus-within .shotnav {
  opacity: 1;
  transform: scale(1);
}
.shotnav:hover { background: rgba(18, 20, 24, .74); }

/* 触屏没有 hover：箭头常显，否则根本翻不了页。 */
@media (hover: none) {
  .shotnav { opacity: .88; transform: scale(1); }
}

/* ---------------------------------------------------------- 页码与进度 */
.shotmeta {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 12px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  pointer-events: none;              /* 别挡住点击图片翻页 */
}
.shottip,
.shotnum {
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(18, 20, 24, .5);
  color: #fff;
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: .02em;
  white-space: nowrap;
}
/* 提示语只在 hover 时出现：平时框体保持干净。 */
.shottip { opacity: 0; transition: opacity .18s ease; }
.shotstage:hover .shottip { opacity: 1; }
.shotnum b { font-weight: 600; }

.shotbar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  z-index: 3;
  background: rgba(0, 0, 0, .09);
}
.shotbar i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--blue);
  transition: width .3s ease; 
}

/* 小屏：箭头收窄，提示语省掉（本来就只在 hover 时出现，手机上没有 hover）。 */
@media (max-width: 640px) {
  .shotnav { width: 38px; height: 46px; margin-top: -23px; }
  .shotnav svg { width: 18px; height: 18px; }
  .shotmeta { left: 8px; right: 8px; bottom: 8px; }
  .shottip { display: none; }
}
.shots-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.shot { margin: 0; min-width: 0; line-height: 0; background: var(--bg); }

/* ------------------------------------------------------------
 * 详情页广告位（v1.7.4 · 轻量化）
 *
 * 旧版把每个广告位做成一张白底小卡片（圆角 + 细边框 + 左上一个「广告」小标签）。
 * 两个问题：一是详情页本身白卡就多，再加两张「长得像内容」的白卡，
 * 访客分不清哪块是正文；二是广告位② 现在落在「PPT 简介」白卡**内部**，
 * 白卡套白卡会浮起来。
 *
 * 现在一律不带底色、不带边框：广告直接落在页面或卡片的地色上，
 * 只留一个 10.5px 的浅灰「广告」小字标明性质，靠外边距与正文隔开。
 * 空位的虚线占位框仍然保留（.sad.is-empty，只对管理员可见）。
 * ------------------------------------------------------------ */
.sad {
  position: relative;
  margin: 26px 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  text-align: center;
  overflow: visible;
}
.sad img { max-width: 100%; height: auto; }
.sad-tag {
  position: static;
  display: block;
  margin: 0 0 8px;
  padding: 0;
  font-size: 10.5px;
  line-height: 1;
  letter-spacing: .16em;
  text-align: center;
  color: #c2ccd6;
  background: none;
  border: 0;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}
/* 侧栏那一格没有通栏感：标识靠左，外边距交给 .side 的 gap。 */
.sad--side { margin: 0; padding: 0; }
.sad--side img { width: 100%; }
.sad--side .sad-tag { margin: 0 0 6px; text-align: left; }

/* ------------------------------------------------------------
 * 空广告位占位框（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; }
  /* v1.6.21：胶囊行已是全局「独占一行」，窄屏只把间距收紧一点。 */
  .sec-chips { gap: 7px; }
  .sec-chips a { padding: 5px 12px; }
  /* v1.6.22：首页那排灰字链接窄屏同样整行折到标题下面，但不恢复成胶囊。 */
  .sec-cards .sec-hd .sec-chips { flex-basis: 100%; }
  .sec-cards .sec-hd .sec-chips a { padding: 0 9px; }

  /* 友链：卡片两列，申请表单改单列。 */
  .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; }
  /* 二维码整块掉到下一行后，margin-left:auto 会把它孤零零顶到右边，去掉。 */
  .ft-qr { margin-left: 0; gap: 16px; }
  .ft-bar-in { text-align: left; justify-content: flex-start; }
  .ft-lic { justify-content: flex-start; }

  /* 列表页 / 详情页 */
  .hotbox .rank { grid-template-columns: minmax(0, 1fr); }   /* 窄屏单列，免得标题被截成半句 */
  /* v1.6.23：图片框的内边距由 .pbox 统一给（.shots 不再自带白卡样式），
     所以这里只处理标题条在窄屏下的折行。 */
  .pbox-hd { flex-wrap: wrap; row-gap: 6px; }
  .pbox-hd .hint { flex-basis: 100%; margin-left: 0; }
}

@media (max-width: 480px) {
  /* v20261016：手机端图文卡改两列（原单列），与 820px 档的两列衔接 */
  .grid { --gcols: 2; }
  .pgrid { --pcols: 2; }
  .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;
  }
}

/*
 * ★ 缩略图方案 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); }

/* ==================================================== 10.1 申请友链页（v1.6.27） */
/*
 * page-links.php 专用：顶部说明区 + 三步流程 + 「表单 + 右侧说明栏」两栏。
 *
 * 这一页 v1.6.27 起**不再列出已收录的友链**（template-parts/links.php 传 links=false），
 * 只留「申请」这一件事，所以版式上给了更多层次，避免整页就一个白框。
 *
 * 放在 app.css 末尾是刻意的：上面的 @media 里已有 .lform 的窄屏规则，
 * 这里只加新选择器 + 自己的一套断点，不去覆盖那些。
 */

/* ---------------------------------------------------------- 顶部说明区 */
.lhero {
  position: relative;
  display: flex;
  align-items: center;
  gap: 15px;
  margin: 2px 0 18px;
  padding: 24px 26px;
  overflow: hidden;
  background: linear-gradient(118deg, #eaf5ff 0%, #f5fbff 58%, #fff 100%);
  border: 1px solid #e2f0fb;
  border-radius: 12px;
}
.lhero-ico {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  color: #fff;
  background: linear-gradient(158deg, #4fa9f6, var(--blue-d));
  border-radius: 14px;
  box-shadow: 0 6px 16px rgba(37, 148, 240, .26);
}
.lhero-tx { position: relative; z-index: 1; min-width: 0; }
.lhero-h1 {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.25;
  color: #1d2b36;
}
.lhero-sub { margin: 5px 0 0; font-size: 13.5px; color: var(--ink2); }

/* 右下角压一个出血的链条水印 —— 给浅色块加点「设计感」，不抢内容 */
.lhero-ghost {
  position: absolute;
  right: -28px;
  bottom: -34px;
  color: var(--blue);
  opacity: .07;
  pointer-events: none;
}

/* ------------------------------------------------------------ 三步流程 */
.lsteps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
}
.lsteps li {
  position: relative;
  padding: 14px 16px 14px 52px;
  background: var(--card);
  border-radius: var(--r);
  box-shadow: var(--sh-card);
}
.lsteps i {
  position: absolute;
  left: 15px;
  top: 14px;
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  font-style: normal;
  font-size: 13px;
  font-weight: 700;
  color: var(--blue-d);
  background: var(--blue-l);
  border-radius: 50%;
}
.lsteps b { display: block; font-size: 14px; font-weight: 600; color: var(--ink); }
.lsteps span { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.6; color: var(--ink3); }

/* -------------------------------------------- 表单 + 右侧说明栏（两栏） */
.lapply {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 296px;
  gap: 18px;
  align-items: start;
}
.lapply-main { min-width: 0; }
.lapply .lform { margin-top: 0; }

.lapply-side { display: grid; gap: 14px; }

.lcard {
  padding: 17px 18px 16px;
  background: var(--card);
  border-radius: var(--r);
  box-shadow: var(--sh-card);
}
.lcard h3 {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 11px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.lcard h3::before {
  content: "";
  flex: 0 0 auto;
  width: 3px;
  height: 14px;
  border-radius: 2px;
  background: var(--blue);
}
.lcard-ul { margin: 0; padding: 0; list-style: none; }
.lcard-ul li {
  position: relative;
  padding-left: 15px;
  margin-bottom: 8px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--ink2);
}
.lcard-ul li:last-child { margin-bottom: 0; }
.lcard-ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--blue);
  opacity: .55;
}
.lcard-note { font-size: 13px; line-height: 1.8; color: var(--ink2); }
.lcard-note p { margin: 0 0 8px; }
.lcard-note p:last-child { margin-bottom: 0; }

/* ------------------------------------------------- 表单卡内部的分层 */
.lform-hd {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0 0 18px;
}
.lform-hd-ico {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  color: var(--blue-d);
  background: var(--blue-l);
  border-radius: 10px;
}
.lform-hd-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lform-hd-tx b { font-size: 15.5px; font-weight: 700; color: var(--ink); }
.lform-hd-tx span { font-size: 12.5px; line-height: 1.5; color: var(--ink3); }

/* 输入框：左侧一个图标槽；.lform-ctl 本身是 <span>，要抵消上一段
 * 「.lform-field > span { margin-bottom: 6px }」的老规则。 */
.lform-field > .lform-ctl { position: relative; margin-bottom: 0; }
.lform-ctl svg {
  position: absolute;
  left: 12px;
  top: 50%;
  width: 16px;
  height: 16px;
  transform: translateY(-50%);
  color: #a7b6c4;
  pointer-events: none;
}
.lform-ctl input { padding-left: 38px; }
.lform-field input:hover { border-color: #cfdbe6; }
.lform-field input:focus { box-shadow: 0 0 0 3px rgba(37, 148, 240, .13); }

.lform-submit { display: inline-flex; align-items: center; gap: 7px; }
.lform-submit svg { width: 15px; height: 15px; }

/* 有右侧说明栏时，说明区（第 ① 段正文）和下面留一点距离 */
.lpage-intro { margin-bottom: 18px; }

/* --------------------------------------------------------------- 窄屏 */
@media (max-width: 1080px) {
  .lapply { grid-template-columns: minmax(0, 1fr); }
  .lapply-side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  .lsteps { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .lsteps li { padding: 12px 14px 12px 48px; }
  .lapply-side { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 480px) {
  .lhero { padding: 18px; gap: 12px; }
  .lhero-ico { width: 44px; height: 44px; border-radius: 12px; }
  .lhero-h1 { font-size: 20px; }
  .lhero-ghost { display: none; }
}

/* ============================================================ 侧栏小工具 */
/*
 * v1.7.2：详情页侧栏「近期文章」「热门标签」统一成扁平卡片。
 *
 * ★ 两个小工具的 HTML 来源不同，标题标签也不一样 ——
 *   「近期文章」是区块小工具，标题落在 h2.wp-block-heading；
 *   「热门标签」是经典小工具，标题落在 h3.widget-title。
 *   所以下面的标题样式两条选择器必须都写，少一条就有一个框体掉队，
 *   两个框体看起来会像两套设计。
 *
 * 风格沿用全站区块头：左侧 4px 渐变短色条，不用整条下划线，
 * 不引入第二种强调色。
 */
.widgets { display: grid; gap: 18px; }
.widgets .widget {
  background: #fff;
  border-radius: var(--r);
  padding: 18px 20px 20px;
  box-shadow: var(--sh);
  margin-bottom: 0;
}
.widgets .widget .widget-title,
.widgets .widget .wp-block-heading {
  position: relative;
  margin: 0 0 14px;
  padding-left: 12px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .2px;
  color: #22262b;
}
.widgets .widget .widget-title::before,
.widgets .widget .wp-block-heading::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 15px;
  border-radius: 3px;
  background: linear-gradient(180deg, #4fa9f6, var(--blue-d));
}

/* --- 近期文章 --- */
.widgets .widget_block .wp-block-group__inner-container { margin: 0; padding: 0; }
.widgets .widget_block ul.wp-block-latest-posts__list {
  counter-reset: ppts-rp;
  list-style: none;
  margin: 0;
  padding: 0;
}
/*
 * 一条 = 20px 序号方块 + 标题（最多两行）；摘要另起一行、对齐标题。
 * 用 grid-template-areas 而不是 flex：标题和摘要在 li 里是平级的两个
 * 兄弟节点，没有外层包裹，flex 会把它们排成左右两列。
 */
.widgets .widget_block ul.wp-block-latest-posts__list > li {
  counter-increment: ppts-rp;
  display: grid;
  grid-template-columns: 20px 1fr;
  grid-template-areas: "num title" ". excerpt";
  column-gap: 10px;
  row-gap: 3px;
  padding: 10px;
  margin: 0 -10px;
  border-radius: 6px;
  transition: background .18s ease;
}
.widgets .widget_block ul.wp-block-latest-posts__list > li + li { border-top: 1px solid var(--line); }
.widgets .widget_block ul.wp-block-latest-posts__list > li::before {
  grid-area: num;
  content: counter(ppts-rp);
  width: 20px;
  height: 20px;
  margin-top: 2px;
  border-radius: 5px;
  background: var(--badge);
  color: var(--ink3);
  font-size: 11.5px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
  transition: background .18s ease, color .18s ease;
}
/* 前三名用主色的深浅递变，与首页排行榜徽章同一个逻辑 */
.widgets .widget_block ul.wp-block-latest-posts__list > li:nth-child(1)::before { background: var(--blue); color: #fff; }
.widgets .widget_block ul.wp-block-latest-posts__list > li:nth-child(2)::before { background: #6cb8f5; color: #fff; }
.widgets .widget_block ul.wp-block-latest-posts__list > li:nth-child(3)::before { background: #a8d5fa; color: #fff; }
.widgets .widget_block .wp-block-latest-posts__post-title {
  grid-area: title;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.55;
  color: var(--ink);
  transition: color .18s ease;
}
.widgets .widget_block .wp-block-latest-posts__post-excerpt {
  grid-area: excerpt;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--ink3);
}
.widgets .widget_block ul.wp-block-latest-posts__list > li:hover { background: var(--blue-l); }
.widgets .widget_block ul.wp-block-latest-posts__list > li:hover .wp-block-latest-posts__post-title { color: var(--blue-d); }

/* --- 热门标签 --- */
/*
 * WordPress 会给每个标签写死行内 font-size（8pt~22pt，按文章数算），
 * 不盖掉就是一串大小不一的乱麻 —— 扁平风格要的是整齐，热度不靠字号表达。
 * 所以用 !important 压掉行内样式，全部统一成等大的浅灰胶囊。
 */
.widgets .widget_tag_cloud .tagcloud {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.widgets .widget_tag_cloud .tagcloud a {
  font-size: 12.5px !important;
  line-height: 1;
  padding: 7px 12px;
  border-radius: 6px;
  background: #f5f7f9;
  color: var(--ink2);
  transition: background .18s ease, color .18s ease;
}
.widgets .widget_tag_cloud .tagcloud a:hover {
  background: var(--blue);
  color: #fff;
}

/* ==========================================================================
 * 友链申请表单 v2（2026-10-13）
 * 放在 app.css 末尾是刻意的：上面的 @media 里已有 .lform 的窄屏规则，
 * 这里写在后面才能覆盖它们。
 * 主色、圆角、阴影、文字层级全部沿用主题变量，不与全站风格打架。
 * ======================================================================== */

.lf2 { padding: 28px 30px 26px; }

/* ---------- 头部：主色渐变小方块 + 标题 ---------- */
.lf2 .lform-hd {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 20px;
	font-size: inherit;
	font-weight: inherit;
}
.lf2-hd-ico {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 10px;
	color: #fff;
	background: linear-gradient(135deg, #3aa3f7, #1677d2);
	box-shadow: 0 4px 10px rgba(37, 148, 240, .28);
}
.lf2-hd-tx { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.lf2-hd-tx b { font-size: 16.5px; font-weight: 700; color: var(--ink); letter-spacing: .01em; }
.lf2-hd-tx span { font-size: 12.5px; line-height: 1.5; color: var(--ink3); }

/* 后台填的「申请说明」 */
.lf2-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;
}
.lf2-note p { margin: 0; }
.lf2-note p + p { margin-top: 8px; }

/* ---------- 分组 ---------- */
.lf2-group { margin: 0; padding: 0; border: 0; min-width: 0; }
.lf2-group + .lf2-group {
	margin-top: 24px;
	padding-top: 22px;
	border-top: 1px dashed var(--line2);
}
.lf2-gtitle {
	display: flex;
	align-items: center;
	gap: 9px;
	width: 100%;
	margin: 0 0 15px;
	padding: 0;
	float: none;
}
.lf2-gtitle i {
	flex: none;
	font-style: normal;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .04em;
	line-height: 1;
	color: var(--blue);
	background: var(--blue-l);
	border-radius: 5px;
	padding: 4px 6px;
}
.lf2-gtitle b { font-size: 14.5px; font-weight: 700; color: var(--ink); }
.lf2-gtitle span { font-size: 12px; color: var(--ink3); }

/* ---------- 字段 ---------- */
.lf2-row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 16px;
}
.lf2-field { display: block; margin-bottom: 15px; min-width: 0; }
.lf2-lb {
	display: block;
	margin-bottom: 6px;
	font-size: 13px;
	font-weight: 500;
	color: var(--ink2);
}
.lf2-lb i { font-style: normal; color: #e2574c; margin-left: 3px; }

.lf2-ctl { position: relative; display: block; }
.lf2-ctl svg {
	position: absolute;
	left: 12px;
	top: 21px;
	width: 16px;
	height: 16px;
	color: #a8b6c4;
	pointer-events: none;
	transition: color .18s ease;
}
.lf2-ctl input,
.lf2-ctl textarea {
	width: 100%;
	padding: 11px 14px;
	font: inherit;
	font-size: 14px;
	color: var(--ink);
	background: #fbfcfd;
	border: 1px solid var(--line2);
	border-radius: 7px;
	outline: none;
	transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.lf2-ctl input { height: 42px; padding-left: 38px; }
.lf2-ctl input:focus,
.lf2-ctl textarea:focus {
	background: #fff;
	border-color: var(--blue);
	box-shadow: 0 0 0 3px rgba(37, 148, 240, .13);
}
.lf2-ctl:focus-within svg { color: var(--blue); }
.lf2-ctl input::placeholder,
.lf2-ctl textarea::placeholder { color: #b0bcc8; }

/* 简介：多行 + 右下角字数 */
.lf2-ctl-ta textarea {
	min-height: 106px;
	padding: 12px 14px 30px;
	line-height: 1.75;
	resize: vertical;
}
.lf2-count {
	position: absolute;
	right: 12px;
	bottom: 10px;
	font-size: 11.5px;
	color: #b0bcc8;
	transition: color .18s ease;
}
.lf2-count.is-near { color: #d98a0b; }
.lf2-count.is-full { color: #e2574c; }

.lf2-hint {
	display: block;
	margin-top: 6px;
	font-size: 12px;
	line-height: 1.6;
	color: var(--ink3);
}

/* ---------- 校验失败态 ---------- */
.lf2-field.is-err input,
.lf2-field.is-err textarea {
	border-color: #e2574c;
	background: #fff7f6;
}
.lf2-field.is-err .lf2-lb { color: #c9483d; }

/* ---------- 提交区 ---------- */
.lf2-actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 22px;
}
.lf2-submit {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 32px;
	font-size: 15px;
	font-weight: 600;
	color: #fff;
	background: linear-gradient(135deg, #2f9bf5, #1677d2);
	border: 0;
	border-radius: var(--r);
	cursor: pointer;
	box-shadow: 0 5px 14px rgba(37, 148, 240, .28);
	transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.lf2-submit:hover {
	transform: translateY(-1px);
	box-shadow: 0 8px 20px rgba(37, 148, 240, .34);
}
.lf2-submit svg { width: 16px; height: 16px; transition: transform .18s ease; }
.lf2-submit:hover svg { transform: translateX(3px); }
.lf2-submit[disabled] { opacity: .62; cursor: progress; transform: none; }
.lf2-tip { font-size: 12.5px; color: var(--ink3); }

/* 验证码挂件被插到按钮前面，别把 flex 行撑坏 */
.lf2-actions #ppts-turnstile { flex: 0 0 100%; margin: 0 0 12px; line-height: 0; }

/* ---------- 结果提示（JS 读 URL 渲染，不受整页缓存影响） ---------- */
.lf2-result {
	margin-top: 16px;
	padding: 12px 14px;
	border-radius: 7px;
	font-size: 13.5px;
	line-height: 1.7;
	border-left: 3px solid transparent;
}
.lf2-result.is-ok {
	border-left-color: var(--green);
	background: #f1f9f5;
	color: #2f6b4f;
}
.lf2-result.is-err {
	border-left-color: #dba617;
	background: #fdf8e8;
	color: #7a5a12;
}

/* ---------- 窄屏 ---------- */
@media (max-width: 820px) {
	.lf2 { padding: 22px 18px 20px; }
	.lf2-row { grid-template-columns: minmax(0, 1fr); gap: 0; }
	.lf2-submit { width: 100%; justify-content: center; }
	.lf2-gtitle span { display: none; }
}

/* ============================================================
 * v1.6.32：窄屏把「更多 ›」拉回标题同一行（PC 版式不变）。
 *
 * 此前窄屏两处会把「更多」挤到下一行：
 *   - 通用 .sec-hd：标题 white-space:nowrap 不可收缩，长标题直接把
 *     「更多」顶到第二行；
 *   - 首页图文模块：胶囊行窄屏独占一行（flex-basis:100%）但 order(1)
 *     比 .more(3) 小，视觉顺序成了 标题 → 胶囊 → 更多。
 *
 * 修法：标题允许收缩（超出显示省略号），把「换行权」让给「更多」；
 * 图文模块把胶囊 order 调回 5（与列表页一致），
 * 顺序变成 标题 → 更多 → 胶囊行。
 * ============================================================ */
@media (max-width: 820px) {
  .sec-hd h1,
  .sec-hd p.sec-t,
  .sec-hd h2 {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .sec-cards .sec-hd .sec-chips { order: 5; }
}