/*
Theme Name: 壁纸窝 Wallpaper House
Theme URI: https://bizhiwo.com/
Description: 壁纸窝 4K 高清壁纸站主题：分类 / 标签 / 颜色 / 宽高比 / 分辨率 多维筛选与聚合页，壁纸详情页含大图预览、参数面板、颜色色块条、标签与网盘下载计数；内置 33 条可配变量的 SEO 标题描述模板、结构化数据与站点地图；后台提供主题设置、SEO 设置、失效壁纸补档与服务器防护自检，并提供 REST 发布接口供配套工具批量入库/发布；主题设置存于 SQLite 文件、不占用 wp_options，重置或迁移时随主题一起带走；潮汐轻色视觉，零 JavaScript。
Version: 1.0.0
Author: bizhiwo
Text Domain: wallpaper-house
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 8.0
*/

/* ============================================================
   壁纸窝 · 壁纸展示下载站 v3
   统一视觉：潮汐壁纸案例的轻色系语言（oklch 系浅底 / 白茶绿强调）
   纯 HTML5 + CSS3，无 JavaScript
   ============================================================ */

:root {
  /* 基础色（来自参考案例的 oklch token，此处以可读形式保留） */
  --bg: #f6f9fb;
  --surface: #ffffff;
  --fg: #0e171e;
  --muted: #6a7280;
  /* 比 --muted 再深一档: 用在"要让人一眼看清、但又不是正文"的地方(如空状态按钮)。
     --muted 在素质一般/亮度偏高的屏幕上会显得发灰发浅 */
  --muted-strong: #4b545c;
  --border: #e5e9ec;
  --accent: #008a6a;
  --accent-strong: #00755a;

  /* 派生色 */
  --accent-soft: rgba(0, 138, 106, 0.12);
  --accent-softer: rgba(0, 138, 106, 0.07);
  --fg-soft: rgba(14, 23, 30, 0.06);
  --danger: #e2554f;

  /* 插画辅助色（广告位 SVG 装饰底） */
  --art-sky: #e2eaf1;
  --art-hill: #c6d2de;
  --art-hill-deep: #b0c0d0;

  /* 壁纸张配色（图片占位/示意渐变用） */
  --ph-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M8 48 22 26l10 14 7-9 17 17z' fill='%23c8d2d9'/%3E%3Ccircle cx='44' cy='18' r='6' fill='%23d5dde3'/%3E%3C/svg%3E");
  --ph-bg: linear-gradient(135deg, #eef2f5, #e6ebee);

  /* 字体：参考案例的系统字体方向，中文优先 PingFang / 微软雅黑 */
  --font-display: "PingFang SC", "Microsoft YaHei", "微软雅黑", "Segoe UI Semibold", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Microsoft YaHei", "微软雅黑", "Segoe UI", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;

  /* 字号（clamp 自适应） */
  --fs-h1: clamp(34px, 4.6vw, 56px);
  --fs-h2: clamp(26px, 3vw, 34px);
  --fs-h3: 22px;
  --fs-lead: 17px;
  --fs-body: 14px;
  --fs-meta: 13px;

  /* 间距：8 点网格 */
  --gap-xs: 8px;
  --gap-sm: 12px;
  --gap-md: 20px;
  --gap-lg: 32px;
  --gap-xl: 56px;

  /* 详情页两栏：左栏(大图+标签) = 剩余宽度, 右栏(信息面板) = 固定值。
     下边框里的免责声明要跟左栏同宽, 所以这两个值在这里声明一次, 别处引用 */
  --detail-panel-w: 380px;
  --detail-gap: 24px;
  --container: 1200px;
  /* 超宽屏分档: 4K 屏(3840 CSS px, 100% 缩放)下 1280px 的内容区只占屏 1/3、两侧各空 1280px,
     看上去就是中间一条窄带。这里给两档上限, 由下面的媒体查询按需取用;
     与主题设置里的 container_w 一起用 max(): 以用户设置为下限, 用户设得更大时听用户的 */
  --container-wide: 1680px;    /* ≥2000px 视口(含 4K 150% 缩放的 2560) */
  --container-ultra: 2000px;   /* ≥2800px 视口(4K 100% 缩放) */
  --gutter: 32px;

  /* 圆角 */
  --radius: 2px;
  --radius-lg: 2px;
  --radius-xl: 2px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
p { text-wrap: pretty; }
h1, h2, h3, h4 { text-wrap: balance; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* 仅供屏幕阅读器/SEO 阅读的文字 */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
/* 超宽屏放宽: 写在这里(而不是主题设置注入的 :root)是因为注入的 <style> 在样式表之后,
   同级选择器下它一定赢, 放进注入样式就没法用媒体查询分档。
   这里改的是 .container 的 max-width, 用 max() 取"设置值"和"档位值"中较大的一个 */
@media (min-width: 2000px) {
  .container { max-width: max(var(--container), var(--container-wide)); }
}
@media (min-width: 2800px) {
  .container { max-width: max(var(--container), var(--container-ultra)); }
}

/* ─── 顶栏（毛玻璃, 随页面滚走） ─────────────────────────────────── */
/* 2026-10-04 用户要求: 取消"滚动后吸顶"——原先 position: sticky 会在滚动时一直钉在顶部,
   观感别扭。改回 relative: 随页面正常滚走; 保留 z-index/定位上下文,
   下拉菜单(absolute)与手机端面板(top:100%)的定位链不受影响。 */
.topnav {
  position: relative; z-index: 100;
  background: #ffffff;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.topnav-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--gap-lg);
  padding-block: 13px;
}
.topnav .logo {
  font-family: var(--font-display);
  font-size: 20px; font-weight: 700; letter-spacing: -0.01em;
  display: inline-flex; align-items: center; gap: 7px;
  white-space: nowrap;
}
.topnav .logo .dot { width: 9px; height: 9px; border-radius: 2px; background: var(--accent); }
.topnav-left { display: flex; align-items: center; gap: var(--gap-lg); min-width: 0; }

.topnav nav { display: flex; align-items: center; gap: var(--gap-lg); }
.topnav nav > a { font-size: 16px; color: var(--muted); font-weight: 500; white-space: nowrap; }
.topnav nav > a:hover { color: var(--fg); }

/* 手机端汉堡菜单(桌面隐藏, 零 JS: checkbox 驱动) */
.nav-toggle { position: absolute; opacity: 0; pointer-events: none; }
.nav-burger { display: none; }

.topnav .search {
  width: 240px; padding: 8px 12px; border-radius: 999px;
}
.topnav .search input { font-size: 14px; }

/* 分类/尺寸 纯 CSS 下拉（hover / focus-within） */
.drop { position: relative; height: 40px; display: flex; align-items: center; }
/* 悬浮桥：填补触发器与下拉菜单之间的空隙，鼠标移动不断联 */
.drop::after {
  content: "";
  position: absolute;
  top: 100%;
  left: -8px;
  right: -8px;
  height: 16px;
}
.drop-toggle {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.drop-trigger {
  position: relative; z-index: 96; /* 高于兜底层，保证可再次点击关闭 */
  display: flex; align-items: center; gap: 5px;
  border: 0; background: none; padding: 10px 6px;
  font-size: 16px; font-weight: 500; color: var(--muted);
  cursor: pointer;
  list-style: none;
}
.drop-trigger::after {
  content: "";
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--muted);
  transition: transform 0.2s ease;
}
.drop:hover .drop-trigger, .drop .drop-toggle:checked ~ .drop-trigger { color: var(--fg); }
.drop:hover .drop-trigger::after, .drop .drop-toggle:checked ~ .drop-trigger::after {
  transform: rotate(180deg); border-top-color: var(--accent);
}
.drop-menu {
  position: absolute; top: calc(100% + 6px); left: 50%;
  transform: translateX(-50%) translateY(6px);
  min-width: 168px;
  max-width: min(92vw, 680px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px;
  display: none;
  z-index: 200;
}
/* 显示逻辑：hover（桌面）或 checkbox 勾选（点按切换）→ 展开 */
.drop:hover .drop-menu, .drop .drop-toggle:checked ~ .drop-menu {
  display: grid;
  grid-template-columns: repeat(var(--cols, 1), minmax(104px, 1fr));
  animation: dropIn 0.18s ease;
}
/* 兜底层：点按展开后变为全屏透明标签，点击菜单外任意处即取消勾选、收起 */
.menu-backdrop { display: none; }
.drop .drop-toggle:checked ~ .menu-backdrop {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 95;
}
/* 后开的下拉覆盖先开的（点开即切换，不堆叠） */
.drop:has(~ .drop .drop-toggle:checked) .drop-menu { display: none; }
@keyframes dropIn {
  from { opacity: 0; transform: translateX(-50%) translateY(2px); }
  to { opacity: 1; transform: translateX(-50%) translateY(6px); }
}
.drop-menu a {
  display: block; padding: 8px 12px; border-radius: 2px;
  font-size: 14px; color: var(--muted); white-space: nowrap;
}
.drop-menu a:hover { background: var(--fg-soft); color: var(--fg); }

/* ─── 按钮 ───────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 18px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  font-size: 14px; font-weight: 600; letter-spacing: -0.005em;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.05s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); color: #ffffff; border-color: var(--accent); }
.btn-primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); color: #ffffff; }
.btn-secondary { background: var(--surface); color: var(--fg); border-color: var(--border); }
.btn-secondary:hover { border-color: var(--muted); background: var(--fg-soft); }
.btn-ghost { background: transparent; color: var(--fg); border-color: transparent; padding-inline: 8px; }
.btn-ghost:hover { color: var(--accent); }
.btn-lg { min-height: 46px; padding: 12px 24px; font-size: 15px; }

/* ─── 搜索框 ─────────────────────────────────────────────────── */
.search {
  display: flex; align-items: center; gap: 10px;
  width: 100%; max-width: 520px;
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.search input {
  border: 0; outline: 0; background: transparent; flex: 1; min-width: 0;
  font: inherit; font-size: 15px; color: var(--fg);
}
.search input::placeholder { color: var(--muted); }
.search button { border: 0; background: none; padding: 0; color: var(--muted); display: flex; }
.search button:hover { color: var(--accent); }

/* ─── Hero（居中式，参考案例画廊首屏） ────────────────────────── */
/* Hero 通栏：无内边距、全宽 SVG 背景 */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(300px, 40vw, 420px);
  padding: 0;
  background: #0e171e;   /* 图片缺失时的兜底底色, 不留白洞 */
  /* 遮罩强度: 0 = 不遮, 1 = 全黑。觉得 banner 偏亮/偏暗只调这一个数 */
  --hero-veil: 0.65;
}
.hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* 内置 SVG 背景是 1.6:1, hero 盒子更扁, 取景上移让人脸落在可视带内 */
.hero-img-svg { object-position: center 38%; }
/* 遮罩层: 背景图本身亮, 压一层主题墨色的半透明遮罩, 保证标题与搜索框的对比度。
   用伪元素实现, 不占 DOM、不影响 HTML, 且 pointer-events 关闭后可正常点击搜索框 */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: var(--hero-veil);
  background: linear-gradient(180deg,
    #0e171e 0%,
    rgba(14, 23, 30, 0.86) 26%,
    rgba(14, 23, 30, 0.86) 74%,
    #0e171e 100%);
}
.hero-center { text-align: center; position: relative; z-index: 1; width: 100%; }
.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #ffffff;
  text-shadow: 0 2px 20px rgba(10, 16, 21, 0.75), 0 1px 3px rgba(10, 16, 21, 0.55);
  margin: 0 0 16px;
}
.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent); font-weight: 600;
  margin: 0 0 var(--gap-md);
}
.lead { font-size: var(--fs-lead); line-height: 1.6; color: var(--muted); max-width: 62ch; margin: 0 auto var(--gap-lg); }
.hero .search {
  margin: 28px auto 0;
  max-width: 760px;
  padding: 9px 10px 9px 22px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: var(--surface);
}
.hero .search input { font-size: 16px; }
.hero .search button {
  width: 42px; height: 42px;
  border-radius: 50%;
  flex-shrink: 0; margin-left: 8px;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent); color: #fff;
}
.hero .search button:hover { background: var(--accent-strong); color: #fff; }
.chips { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 18px; }

/* ─── pill / tag / chip ──────────────────────────────────────── */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px;
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.04em;
  font-weight: 600;
}
.pill-soft { background: var(--fg-soft); color: var(--muted); }
.pill-over {
  background: rgba(14, 23, 30, 0.44);
  color: var(--bg);
  backdrop-filter: blur(6px);
  font-family: var(--font-body); font-size: 11px; letter-spacing: 0; font-weight: 500;
}
.tag {
  display: inline-flex; align-items: center;
  padding: 6px 13px;
  background: var(--surface);
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 13px; font-weight: 500;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.tag:hover { border-color: var(--accent); color: var(--accent); }

/* 颜色文字标签：纯文字 + 彩色小圆点，无胶囊边框（与作品标签区分，且贴合整体克制风） */
.color-links { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 12px; }
.color-link {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; color: var(--muted);
  transition: color 0.15s ease;
}
.color-link i {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 0 1px var(--border);
  flex-shrink: 0;
}
.color-link:hover { color: var(--accent); }

/* 壁纸颜色：一行排列，文字居中，中文名下方紧跟该颜色、加粗的下边框 */
.color-list { display: flex; gap: 1px; margin-top: 6px; }
.color-row {
  flex: 1; min-width: 0;
  padding: 6px 2px 8px;
  /* 色名用深一档的灰: 这一排字压在色条上方, 太浅会看不清; 与空状态按钮同一档 */
  font-size: 13px; color: var(--muted-strong);
  text-align: center;
  border-bottom: 24px solid var(--c);
  transition: color 0.15s ease;
}
.color-row:hover { color: var(--accent); }
.color-row.active { color: var(--accent); font-weight: 600; }

/* 详情页色块: 两行 —— 第一行主色(独占整行, 色条更长), 第二行其余颜色(等分)。
   色块本身沿用上面的 .color-row, 只改行的排布 */
.color-rows { display: grid; gap: 10px; margin-top: 6px; }
.color-rows .color-list { margin-top: 0; }

/* 分类页颜色筛选条: 复用在用色块样式, 横向滚动 */
.colorfilter {
  display: flex; align-items: center; gap: 10px;
  margin: -8px 0 24px;
}
.colorfilter-label {
  font-size: 13px; font-weight: 500;
  color: var(--muted); flex-shrink: 0;
}
.colorfilter-track {
  display: flex; gap: 8px; align-items: stretch;
  overflow-x: auto; scrollbar-width: none;
  padding-block: 2px; max-width: 100%;
}
.colorfilter-track::-webkit-scrollbar { display: none; }
.colorfilter .color-row {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 10px;
  border: 1px solid transparent; border-radius: 8px;
  font-size: 13px; line-height: 1.2;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.colorfilter .color-row.no-sw::before { display: none; }
.colorfilter .color-row::before {
  content: "";
  width: 14px; height: 14px;
  border-radius: 3px;
  background: var(--c);
  box-shadow: 0 0 0 1px var(--border);
  flex-shrink: 0;
}
.colorfilter .color-row:hover {
  background: var(--fg-soft);
  border-color: var(--border);
  color: var(--fg);
}
.colorfilter .color-row.active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}

/* ─── 筛选栏 ─────────────────────────────────────────────────── */
/* 筛选控制面板: 四排筛选收进一块白底面板; 面板与下面的壁纸卡片同宽同圆角, 分层清楚。
   chip 统一白底 + 边框(见 .chip), 白面板上靠边框区分, 不再用页面底色填充。 */
.filterpanel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 18px 16px;
  margin-bottom: 26px;
  display: grid; gap: 10px;
}
.filterpanel .filterbar { margin-bottom: 0; background: none; border: 0; padding: 0; }
.filterpanel .colorfilter,
.filterpanel .sortfilter,
.filterpanel .ratiofilter { margin: 0; }
.filterpanel .chip.active { background: var(--accent); }

/* 筛选条: 白底控制面板 —— 与列表页的 .filterpanel 同一套视觉。
   首页与搜索页的筛选条是"光着"放在容器里的, 所以白底/边框/圆角/内边距都由它自己提供;
   列表页那份在 .filterpanel 里(上面那行把自带的又抵消掉了), 保持原样不叠成双层。 */
.filterbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--gap-md); flex-wrap: wrap;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 18px 16px;
  margin-bottom: 26px;
}
.filterbar .filters {
  display: flex; gap: 8px; flex-wrap: wrap;
  overflow-x: auto; scrollbar-width: none; padding-block: 4px;
  max-width: 100%;
}
.filterbar .filters::-webkit-scrollbar { display: none; }
.chip {
  padding: 8px 16px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 14px; font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.chip:hover { border-color: var(--fg); color: var(--fg); }
.chip.active { background: var(--accent); border-color: var(--accent); color: #ffffff; }
/* 排序: "排序: 最新发布 | 下载最多" 文字链排版 (同颜色筛选条风格) */
.sortfilter {
  display: flex; align-items: center; gap: 6px;
  margin: -10px 0 26px;
  color: var(--muted);
  overflow-x: auto; scrollbar-width: none; padding-block: 2px;
}
.sortfilter::-webkit-scrollbar { display: none; }
.sortfilter-label { font-size: 13px; font-weight: 500; flex-shrink: 0; }
.sort-link {
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 13px; color: var(--muted);
  white-space: nowrap; text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}
.sort-link:hover { color: var(--fg); background: var(--fg-soft); }
.sort-link.active {
  color: var(--accent); font-weight: 600;
  background: var(--accent-soft);
  box-shadow: inset 0 -2px 0 var(--accent);
}
.meta { font-family: var(--font-mono); font-size: var(--fs-meta); color: var(--muted); }

/* 排序下拉（原生 select，零 JS） */
/* 排序下拉：与筛选 chips 同款的纯 CSS 胶囊下拉（零 JS） */
.sort-drop { position: relative; }
.sort-trigger {
  display: inline-flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 16px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  font-size: 14px; font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.sort-trigger:hover { border-color: var(--accent); color: var(--fg); }
.sort-caret {
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--muted);
  transition: transform 0.2s ease;
}
.sort-drop .drop-toggle:checked ~ .sort-trigger .sort-caret { transform: rotate(180deg); border-top-color: var(--accent); }
.sort-drop .drop-toggle:checked ~ .drop-menu { display: block; }
.sort-drop .drop-menu {
  position: absolute; top: calc(100% + 6px); left: 0;
  transform: none; /* 覆盖基础规则的居中位移，菜单对齐触发器左侧 */
  width: max-content; min-width: 132px;
  padding: 6px;
  z-index: 200;
  animation: none; /* 基础动画自带居中位移，展开时禁用避免闪现跳位 */
}
.sort-drop .drop-menu a.on { background: var(--accent-soft); color: var(--accent-strong); }
.sort-drop .drop-menu a.on:hover { color: var(--accent-strong); }

/* ─── 壁纸画廊 ───────────────────────────────────────────────── */
.section { padding-block: clamp(40px, 6vw, 28px); }
/* 上面那条 clamp 的上下限是写反的(min 40 > max 28): 按规范 clamp 会忽略 max, 实际恒定 40px,
   "6vw" 和 "28px" 是死值。这里先不动 —— 改了会一起影响首页各 section 的间距 */
/* 列表/搜索/404 的 <main class="section"> 底部不留白: 内容(通常以分页条收尾)下面直接接页脚。
   页脚自身有 28px 上内边距, 分隔已经够, 不必再叠 40px */
main.section { padding-bottom: 0; }
.section + .section { border-top: 1px solid var(--border); }
.section-title {
  font-family: var(--font-display); font-size: clamp(20px, 2.2vw, 24px); font-weight: 700;
  letter-spacing: -0.01em; margin: 0 0 var(--gap-md);
}

.wall-grid {
  display: grid;
  /* 列数由浏览器算: ⌊(主体宽 + 22) / (300 + 22)⌋, 余量均分。
     下限 300(原 280): 280 时主体 1216(容器 1280)能塞下 4 列, 卡片仅 288px 偏小;
     300 之后同样宽度是 3 列、卡片约 390px。4 列要到主体 ≥ 1266(容器 ≥ 1330)才出现 */
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 22px;
}
/* 整卡白色：图块 + 标题/元信息都收进白卡 */
.wall {
  min-width: 0; display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 8px 8px 4px;
}

.wp {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  aspect-ratio: 16 / 10;
  background: var(--ph-icon) center / 56px no-repeat, var(--ph-bg);
  display: block;
}
.wp .art {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.wall-meta { display: block; padding: 10px 6px 6px; }
.wall-meta .wt { display: flex; align-items: baseline; }
.wall-meta .wt strong {
  /* 不加粗: 卡片标题不再和页面标题/区块标题抢层级, 靠 15px 字号和 --fg 颜色区分即可 */
  font-size: 15px; font-weight: 400; color: var(--fg);
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wall-meta .wstat {
  display: flex; gap: 6px; margin-top: 5px;
  font-family: var(--font-mono); font-size: 12px; color: var(--muted);
}

/* ─── 前缀页词条墙 (/tag/ /color/ /ratio/ /res/) ────────────────
   卡片只放"图 + 遮罩 + 居中名称": 不放标题(词条名就是标题), 图统一 16:10 裁切 */
.hubcards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(186px, 1fr));
  gap: 16px;
}
.hubcard {
  position: relative; display: block;
  aspect-ratio: 16 / 10; overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--hc, var(--ph-bg));   /* 颜色词条用 --hc 兜底成该色 */
  isolation: isolate;
}
.hubcard img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.25s ease;
}
.hubcard:hover img { transform: scale(1.04); }
.hubcard-ph { position: absolute; inset: 0; }   /* 没图时留底色(--hc) */
.hubcard-mask {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6, 14, 20, 0.10) 0%,
                                      rgba(6, 14, 20, 0.30) 45%,
                                      rgba(6, 14, 20, 0.62) 100%);
  transition: filter 0.2s ease;
}
.hubcard:hover .hubcard-mask { filter: brightness(0.86); }
/* 颜色词条: 用该颜色本身当遮罩 —— 本色铺一层, 底下再压一层深色, 白字才看得清。
   用 --hc(色板里的 CSS 颜色名) 做 mix; 浏览器不支持 color-mix 时整条声明失效,
   自动退回上面那层中性遮罩, 不会变成没遮罩。 */
.hubcard[style*="--hc"] .hubcard-mask {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--hc) 62%, transparent) 0%,
                            color-mix(in srgb, var(--hc) 55%, #06121a) 100%),
    linear-gradient(180deg, rgba(6, 14, 20, 0.14) 0%,
                            rgba(6, 14, 20, 0.34) 45%,
                            rgba(6, 14, 20, 0.62) 100%);
}
.hubcard-text {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; padding: 10px; text-align: center;
  color: #ffffff; text-shadow: 0 1px 3px rgba(6, 14, 20, 0.5);
}
.hubcard-text b { font-size: 16px; font-weight: 600; line-height: 1.25; font-family: var(--font-display); }
.hubcard-text i { font-style: normal; font-size: 11.5px; opacity: 0.9; }

/* ─── 分页 ───────────────────────────────────────────────────── */
.pager {
  margin-top: 30px;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 6px; justify-content: center;
  background: var(--surface);
  /* 无边框(2026-10-09 用户要求去掉了 .pager 那圈 1px 边线): 只剩白底圆角条,
     白底本身还在, 页码/两端方块各自带自己的边线不受影响 */
  border-radius: var(--radius-lg);
  /* 上下留白 14px -> 20px: 两端换成 44px 的方块按钮后, 它们几乎顶满 74px 的条高,
     中间的页码圈(34px)夹在两个大方块之间显得挤; 只加上下, 左右不动 */
  padding: 20px 18px;
}
/* 当前页是 <span class="cur">, 不是 <a>: 必须一起选上, 否则它没有任何按钮外观。
   .is-off 是"到了头"的占位(不再是可点的 a), 也要有同样的盒子, 两边才等宽 */
.pager a, .pager .cur, .pager .page-numbers.is-off {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; height: 34px; padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted); font-size: 14px;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.pager a:hover { border-color: var(--accent); color: var(--accent); }
.pager .cur { background: var(--accent); border-color: var(--accent); color: #ffffff; font-weight: 600; }
.pager .gap, .pager span.page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 34px; color: var(--muted); font-size: 14px;
}
.pager .goto { margin-left: 10px; display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; }
.pager .goto input {
  width: 58px; height: 34px; padding: 0 10px;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface); color: var(--fg);
  font-family: inherit; font-size: 13px; outline: none;
}
.pager .goto input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.pager .goto a {
  border: 1px solid var(--border); background: var(--surface);
  color: var(--muted); height: 34px; padding: 0 14px;
}
.pager .goto a:hover { border-color: var(--accent); color: var(--accent); }

/* 分页条: 上一页/下一页分列两端, 页码居中。
   翻页是列表页最高频的动作, 让它待在两端固定位置、并且带颜色, 不用在一排页码里找。
   结构见 bz_pagination(): [上页] [.pager-nums 中间页码] [下页] */
.pager-split {
  gap: 10px;
  /* 两端方块要严丝合缝贴住分页条四边, 所以条内不留白:
     内边距归零, 高度由 min-height 定, 方块 align-self:stretch 撑满。
     nowrap 是必须的: 一旦换行, 两端方块会各自落到单独一行, stretch 只能撑到那一行的高度,
     方块会被压扁(手机上实测 104x25)。让 .pager-nums 吃下压缩、页码在它内部换行 */
  flex-wrap: nowrap;
  padding: 0;
  min-height: 52px;
}
.pager-nums {
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px;
}
.pager .page-numbers.prev, .pager .page-numbers.next {
  /* 方块而不是胶囊: 圆角取主题的 --radius(2px), 与 .btn / 卡片同一套近直角语言。
     高度不写死, 靠 align-self:stretch 撑满分页条 —— 上下左右都不留白边;
     .pager-nums 有 52px 的条高兜着, 中间的页码圈(34px)因此仍上下居中 */
  /* height 必须显式写 auto: 基础那条(.pager a)钉了 height:34px, 只要不覆盖, 它就定高,
     而定高的元素 align-self:stretch 会被当成 flex-start(顶对齐且拉不满) */
  height: auto;
  align-self: stretch;
  padding: 0 22px;
  border-radius: var(--radius);
  background: var(--accent); border-color: var(--accent);
  color: #ffffff; font-size: 15px; font-weight: 600; letter-spacing: 0.02em;
  /* 两边等宽: "下一页>"比"上一页"多一个字符, 不锁宽度中间那组页码就会被顶偏几个像素 */
  min-width: 104px;
}
.pager .page-numbers.prev:hover, .pager .page-numbers.next:hover {
  background: var(--accent-strong); border-color: var(--accent-strong); color: #ffffff;
}
/* 到了头: 不隐藏、不消失, 换成中性灰方块占位 —— 既保留"这边没有更多"的信号,
   又和对面等宽, 所以中间页码照样居中(尺寸/圆角沿用上面那条, 这里只改配色) */
.pager .page-numbers.is-off {
  background: var(--fg-soft); border-color: var(--border);
  color: var(--muted); font-weight: 500; cursor: default;
}

/* ─── 面包屑（安静一行） ─────────────────────────────────────── */
.crumbs { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); margin-bottom: 14px; white-space: nowrap; overflow-x: auto; scrollbar-width: none; }
.crumbs::-webkit-scrollbar { display: none; }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--accent); }
.crumbs .cur { color: var(--fg); }

/* ─── 内容页（详情）：顶部广告位（SVG 装饰底 + 文字） ─────────── */
.detail-ad { margin-top: 22px; }
.ad-slot {
  position: relative;
  overflow: hidden;
  min-height: 132px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--bg);
}
.ad-art { position: absolute; inset: 0; width: 100%; height: 100%; }
.ad-badge { position: absolute; top: 12px; right: 14px; z-index: 2; }
.ad-copy {
  position: relative; z-index: 1;
  min-height: 132px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 6px;
  color: var(--muted);
}
.ad-line { margin: 0; font-size: 14px; }
.ad-sub { margin: 0; font-size: 12px; opacity: 0.85; }

/* ─── 内容页主体：大图 + 信息面板（信息补强） ─────────────────── */
.detail-layout {
  display: grid;
  grid-template-columns: 1fr var(--detail-panel-w);
  gap: var(--detail-gap);
  /* 两栏各按自身内容高度(2026-10-09 改)。原来是 stretch「两栏等高，避免右栏悬空」，
     但大图那一栏通常比信息面板高得多，面板(白底卡片)被拉齐后底下会剩一大片空白；
     左栏 .detail-left 自己没有底色，本来就看不见等高效果，所以只影响面板这一侧 */
  align-items: start;
}
.detail-left { min-width: 0; display: flex; flex-direction: column; }

.detail-imgcard {
  display: block;
  border-radius: var(--radius-xl);
  border: 1px solid var(--border);
  background: var(--surface);
  padding: 10px;}
/* 大图卡片里的标题: 白底/边框/圆角都由卡片提供, 标题本身不再是一张卡。
   居中排版(用户要求) —— 与下方图片左右对称, 不再左对齐到图片左边缘。
   元素不带 class, 按"卡片直接子元素"选中; UA 的 h1{font-size:2em;margin:.67em 0} 已被这里覆盖 */
.detail-imgcard > h1 {
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(16px, 1.45vw, 18px);
  font-weight: 400;
  letter-spacing: -0.01em;
  /* 行高 1.6: 单行时给字形上下各留一点对称空隙, 标题换行时(窄屏/超长标题)
     两行之间不会挤在一起 —— 中文正文行高一般 1.5 起步, 标题原来 1.4 偏紧 */
  line-height: 1.6;
  /* 上边距比下边距小 4px: 行高带来的半行距(约 5px)上下都有,
     而卡片自身的 10px 内边距只加在上方 —— 收一点上边距, 字形上下留白才接近相等 */
  margin: 8px 0 16px;
}
.detail-imgcard > a { display: block; border-radius: var(--radius-lg); overflow: hidden; }
.detail-imgcard .tags { padding: 20px 6px 6px; }
.detail-imgcard .img.ratio { max-height: 78vh; background-size: contain, 80px, auto; margin-inline: auto; }
.detail-imgcard .img {
  display: block;
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  background-image: var(--bg, none), var(--ph-icon), var(--ph-bg);
  background-size: cover, 80px, auto;
  background-position: center;
  background-repeat: no-repeat;
}
/* 主图是真 <img>: 绝对定位铺满 .img 盒子, 裁切方式与原 background-size 一致 */
.detail-imgcard .img > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.detail-imgcard .img.ratio > img { object-fit: contain; }

/* 信息面板 */
.detail-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 26px;
}
.detail-panel .dl-btn {
  width: 100%;
  margin-bottom: 22px;
}
.ratio-link { color: var(--accent); text-decoration: none; border-bottom: 1px dashed currentColor; }
.ratio-link:hover { color: var(--accent-strong); }
/* 信息块用 <fieldset>/<legend>: 标签(legend)天然骑在上边框线上, 右侧留白让线"让开" ——
   比"线一行、标签一行"更紧凑协调。两块都给上边框(第一块也画), 视觉上对称 */
.info-block { border: 0; border-top: 1px solid var(--border); padding: 18px 0 0; margin: 0; min-width: 0; }
.info-block + .info-block { margin-top: 18px; }
.info-cap {
  font-family: var(--font-body);   /* 中文用正文字体: 等宽字体没有中文字形, 会退回系统默认 */
  font-size: 14px; letter-spacing: 0.01em;
  color: var(--fg); font-weight: 600;   /* 作为小块标题, 用正文色比灰字更立得住 */
  padding: 0 10px 0 0;
  background: var(--surface);   /* 面板底色, 盖住它下面那一小段线 */
}
.info-rows { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.info-rows .f .l { font-size: 12px; color: var(--muted); display: block; }
.info-rows .f .v { font-size: 14px; color: var(--fg); font-weight: 500; margin-top: 2px; word-break: break-all; }
.info-rows .f.wide { grid-column: 1 / -1; }

/* 颜色块条（前台只显色块，不显 hex；弹性宽度，默认一行排完） */
.swatches { display: flex; align-items: stretch; gap: 8px; flex-wrap: nowrap; }
.swatches .sw {
  flex: 1; min-width: 0; height: 32px; border-radius: 2px;
  border: 1px solid rgba(14, 23, 30, 0.08);
  display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: 3px;
  font-size: 10px; color: rgba(14, 23, 30, 0.55);
}
.swatches .sw.main { flex: 1.5; }
.swatches .sw.light { color: #fff; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; }

/* 内容页声明：与全站一致的白卡（白底 + 发丝边框）+ mono 小标签 */
/* 空结果 / 404 提示(独立样式, 不复用免责声明 .declare) */
.bz-empty-note {
  margin: 20px 0 10px;
  padding: 18px 20px;
  text-align: center;
  font-size: 15px; color: var(--fg);
  background: var(--accent-softer);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

/* 免责声明 + 「复制本页地址」: 大图卡片底下贴的一张便签(与左栏同宽),
   浅绿底 + 虚线绿框; 上边距很小, 紧贴上方标签卡片; 按钮骑在右下角、方角 */
.declare-box {
  position: relative;
  margin: 6px 0 0;
  /* 下内边距要留出按钮"骑在边框上"的那一半: 按钮高 32px, 一半 16px, 再加一点间隙。
     原来 14px —— 手机上文字折成 3~4 行时, 末行距离按钮只剩 2px, 换段更长的文字就钻到按钮底下了 */
  padding: 6px 12px 26px;
  background: var(--accent-softer);
  border: 1px dashed rgba(0, 138, 106, 0.38);
  border-radius: var(--radius);
}
.share-copy {
  position: absolute;
  right: 16px; bottom: 0;
  transform: translateY(50%);        /* 一半压在下边框上 */
  padding: 6px 14px;
  font: inherit; font-size: 13px; font-weight: 600;
  color: #ffffff; background: var(--accent);
  border: 0; border-radius: 0;       /* 方角 */
  cursor: pointer;
  transition: background 0.15s ease;
}
.share-copy:hover { background: var(--accent-strong); }
.share-copy.done { background: var(--accent-strong); }
.share-copy.fail { background: var(--danger); }

.declare {
  margin: 0; padding: 0; border: 0; background: none;
  font-size: 12px; color: var(--muted); line-height: 1.8;
}

/* ─── 右侧悬浮栏：只保留“返回顶部” ───────────────────────────── */
.gotop {
  position: fixed; right: 22px; bottom: 96px;
  z-index: 999;
}
.gotop-btn {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 3px;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--border);
  backdrop-filter: blur(8px);
  color: var(--muted);
  font-size: 11px;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.gotop-btn:hover { color: #ffffff; background: var(--accent); border-color: var(--accent); }
.gotop-btn:active { transform: scale(0.96); }
.gotop-icon {
  width: 10px; height: 10px;
  border-top: 2px solid currentColor;
  border-left: 2px solid currentColor;
  transform: rotate(45deg);
  margin-top: 4px;
}

/* ─── 页脚（轻色） ───────────────────────────────────────────── */
.pagefoot {
  padding-block: 28px 34px;
}
.pagefoot .row-between { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--gap-md); }
.pagefoot .links { display: flex; gap: 18px; flex-wrap: wrap; font-size: 13px; color: var(--muted); }
.pagefoot .links a:hover { color: var(--accent); }
.pagefoot .friend-links {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px;
  padding: 14px 0 6px;
  margin-top: 16px;
  border-top: 1px dashed var(--border);
}
.pagefoot .friend-links .fl-title { font-size: 13px; color: var(--fg); font-weight: 600; margin-right: 4px; }
.pagefoot .friend-links a { font-size: 13px; color: var(--muted); }
.pagefoot .friend-links a:hover { color: var(--accent); }
.pagefoot .meta-line { margin-top: 12px; font-size: 12px; color: var(--muted); display: flex; gap: 10px 18px; flex-wrap: wrap; }
.pagefoot .demotip { color: var(--muted); opacity: 0.8; }

/* ─── 响应式 ─────────────────────────────────────────────────── */
@media (max-width: 1020px) {
  .detail-layout { grid-template-columns: 1fr; gap: 16px; }
  /* 两栏合并成一栏了, 免责声明不再"对齐左栏", 直接占满 */
  .declare-box { width: 100%; }
  /* 手机上单栏, 下面紧挨着信息面板(间距 16px): 按钮悬出下边框的那一半(约 16px)会顶上去,
     所以给它留出下外边距; 按钮本身略收窄, 并限制不超过框宽 */
  .declare-box { margin-bottom: 20px; }
  .share-copy { font-size: 12px; padding: 6px 12px; max-width: calc(100% - 28px); }
  .topnav nav { gap: var(--gap-md); }
}

@media (max-width: 860px) {
  :root { --gutter: 20px; }
  .topnav .search { display: none; }
  /* 汉堡面板顶部的搜索框(2026-10-04 加): 只在手机端出现, 任何页面都能搜。
     样式自成一套(不挂 .search 基类) + 用 [hidden] 提权显示 ——
     访客缓存着旧 CSS 时它保持 hidden 不露馅, 也不会被上面的 .topnav .search{display:none} 误伤 */
  .topnav nav .nav-search[hidden] {
    display: flex; align-items: center; gap: 10px;
    width: 100%; margin: 12px 0 4px;
    padding: 11px 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
  }
  .topnav nav .nav-search input {
    border: 0; outline: 0; background: transparent; flex: 1; min-width: 0;
    font: inherit; font-size: 15px; color: var(--fg);
  }
  .topnav nav .nav-search input::placeholder { color: var(--muted); }
  .topnav nav .nav-search button { border: 0; background: none; padding: 0; color: var(--muted); display: flex; }
  /* 手机端隐藏详情页的免责声明框(2026-10-04 用户要求不显示)。
     注意: 框里除了声明文字还含「点击复制本页地址」按钮 —— 一起隐藏;
     同款版权声明在页脚 meta-line 里仍有, 移动端不会完全没有提示。 */
  .declare-box { display: none; }
  /* 手机端: 汉堡菜单; 点开后面板从顶栏下方展开 */
  .nav-burger {
    display: flex; flex-direction: column; justify-content: center; gap: 4px;
    width: 40px; height: 40px; padding: 10px 8px; margin-left: auto;
    cursor: pointer; border-radius: 10px;
  }
  .nav-burger span {
    display: block; height: 2px; background: var(--fg); border-radius: 2px;
    transition: transform 0.2s ease, opacity 0.2s ease;
  }
  .nav-toggle:checked ~ .nav-burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .nav-toggle:checked ~ .nav-burger span:nth-child(2) { opacity: 0; }
  .nav-toggle:checked ~ .nav-burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  .topnav nav {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #fff; border-bottom: 1px solid var(--border);
    padding: 4px 16px 16px; max-height: 74vh; overflow-y: auto;
    box-shadow: 0 16px 28px rgba(15, 23, 30, 0.08);
  }
  .nav-toggle:checked ~ .topnav-left nav { display: flex; }
  .topnav nav > a {
    display: block; padding: 13px 2px; font-size: 16px;
    border-bottom: 1px solid var(--border);
  }
  .topnav nav .drop { display: block; height: auto; border-bottom: 1px solid var(--border); }
  .topnav nav .drop::after { display: none; }
  .topnav nav .drop-trigger {
    display: flex; justify-content: space-between; align-items: center;
    padding: 13px 2px; font-size: 16px;
  }
  /* 面板内的二级菜单: 就地展开(不再做浮层), 两列排布 */
  .topnav nav .drop-menu {
    position: static; width: auto; min-width: 0;
    transform: none; animation: none;
    padding: 2px 0 10px; max-height: none; overflow: visible;
    border: 0; box-shadow: none; background: transparent;
    columns: 2; column-gap: 10px;
  }
  /* 触屏点击后 :hover 会粘住不消失, 必须屏蔽 hover 显示, 只由 :checked 控制开合
     (否则再点一次收起后, 菜单仍被 .drop:hover 规则顶着显示) */
  .topnav nav .drop:hover .drop-menu { display: none; }
  /* 展开态: 选择器要与桌面那条 :checked 规则同级或更高, 才能覆盖它的 animation/transform
     (桌面 dropIn 动画带 translateX(-50%) 居中位移, 手机上会先左移半屏再归位 = 闪一下) */
  .topnav nav .drop .drop-toggle:checked ~ .drop-menu {
    display: grid;
    animation: none;
    transform: none;
  }
  .drop-menu a { break-inside: avoid; padding: 9px 8px; }
  /* 筛选条在窄屏换行铺开(不再横向滚动把后面的选项藏起来) */
  .colorfilter-track, .sortfilter { flex-wrap: wrap; overflow: visible; row-gap: 6px; }
    .wall-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .detail-panel { padding: 20px; }
  .gotop { right: 12px; bottom: 84px; }
}

@media (max-width: 560px) {
  .wall-grid { grid-template-columns: 1fr; }
  .info-rows { grid-template-columns: 1fr 1fr; }
  .wall-meta .wt strong { white-space: normal; }
  .hero .search { max-width: calc(100% - 48px); }
  /* 详情页标题在手机上改回左对齐: 窄屏标题会折成 2 行(约 16px 字号, 一行放不下),
     居中后每行两侧各空 45px 左右、两行长度又不一致, 看着就是"中间一大块、两边空荡荡"。
     左对齐后两行从同一条竖线起排, 只留尾部自然空白 */
  .detail-imgcard > h1 { text-align: left; text-wrap: wrap; }
  /* text-wrap 必须显式写 wrap: 主题给所有标题设了 balance, 它会把两行配平成一样长,
     于是两行右侧各留一大片空白(390px 实测两行 203/208px, 右侧空 110/105px)。
     wrap(默认的贪心折行)让第一行排满, 只让最后一行短 */
  /* 手机上的分页条改成两行: 第一行两颗按钮各占一半(拇指好按), 第二行整排页码。
     不能沿用桌面的"两端夹页码": 窄屏页码会折成 2~3 行, 而方块的 align-self:stretch
     会把它们一起撑高, 变成 76x72 的大片绿色(实测 390px 就是如此)。
     页码独占一行后有整个条宽可用, 反而能排回一行(实测 320px 仍是一行) */
  /* 两行排布时上下也不留白: 按钮贴条的上沿, 只留分页条自身那 1px 边框 */
  .pager-split { flex-wrap: wrap; min-height: 0; gap: 8px; padding: 0; }
  /* order 不能省: 页码容器的 flex-basis 是 100%, 按 DOM 顺序它先占满第一行,
     两颗按钮就被挤成各占一整行(实测变成 3 行 150px)。order 让换行顺序变成 上页→下页→页码 */
  .pager .page-numbers.prev { order: 1; }
  .pager .page-numbers.next { order: 2; }
  .pager .page-numbers.prev, .pager .page-numbers.next {
    flex: 1 1 40%; min-width: 0; height: 44px; align-self: auto;
    padding: 0 10px; font-size: 14px; letter-spacing: 0;
  }
  .pager-nums { order: 3; flex: 1 0 100%; min-height: 44px; gap: 4px; }
  /* 手机上只留两颗大按钮, 整排页码去掉(翻页为主)。
     用 :has() 只针对"容器里装着页码链接"的那条 —— 标签墙的"第 N / M 页"是位置提示而不是页码,
     容器里没有 <a>, 因此保留。:has() 不支持的旧浏览器会忽略这一条, 退化成显示页码, 不会坏版 */
  .pager-nums:has(a) { display: none; }
}

/* 用户偏好：跟随系统减少动画 */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

/* 底部友链二级子项 */
.friend-links a.fl-sub::before{content:"›";margin:0 3px 0 6px;color:#6a7280;}

/* 详情页灯箱: 纯CSS :target, 无JS; 点击任意处关闭 */
.bzw-lightbox{position:fixed;inset:0;z-index:9999;background:rgba(14,23,30,.88);opacity:0;visibility:hidden;transition:opacity .22s ease;}
.bzw-lightbox:target{opacity:1;visibility:visible;}
.bzw-lightbox-zap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:24px;}
.bzw-lightbox-img{max-width:94vw;max-height:86vh;border-radius:14px;box-shadow:0 24px 60px -30px rgba(0,0,0,.65);}
.bzw-lightbox-close{position:absolute;top:18px;right:26px;z-index:2;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.92);color:#0e171e;font-size:20px;line-height:44px;text-align:center;text-decoration:none;font-weight:700;}
.bzw-lightbox-close:hover{background:#008a6a;color:#fff;}


/* 网盘链接未填写时的占位(不可点, 与主按钮同尺寸避免跳动) */
.dl-btn-empty {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 10px 18px;
  /* 底色/描边加深一档: 原来 --muted + --border + 图标 70% 不透明度, 在一般屏幕上整块发虚 */
  font-size: 15px; color: var(--muted-strong); background: var(--fg-soft);
  border: 1px dashed rgba(14, 23, 30, 0.22); border-radius: var(--radius); cursor: not-allowed;
}

/* ─── 网盘失效上报(详情页) ───────────────────────────────────── */
/* 跟面板里其它链接同一套样式(.ratio-link): 纯文字 + 虚线下划线, 不用药丸按钮 */
/* 该单元格只有一行内容(没有 label), 竖向居中到与左侧"下载次数/0 次"对齐 */
.info-rows .f.bz-report-cell { align-self: center; }
.bz-report-form { display: inline; margin: 0; }
.bz-report-btn {
  display: inline; padding: 0; margin: 0;
  font: inherit; font-size: 14px; font-weight: 500; line-height: inherit;
  color: var(--accent); background: none; border: 0;
  border-bottom: 1px dashed currentColor;
  cursor: pointer; transition: color .15s ease;
}
.bz-report-btn:hover { color: var(--accent-strong); }
/* 等待补档: 状态文字(非链接), 用暖色区分 */
.bz-wait { color: #b45309; font-weight: 500; }
.bz-thanked { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); }

/* ─── 后台「失效壁纸」补档页 ─────────────────────────────────── */
.bz-broken-table td { vertical-align: middle; }
.bz-broken-table .bz-fix-form { display: block; }
/* 输入框 + 补档按钮同一行: 输入框自适应, 按钮不压缩 */
.bz-broken-table .bz-fix-row { display: flex; gap: 6px; align-items: center; }
.bz-broken-table .bz-fix-row input[type=text] { flex: 1 1 auto; min-width: 0; }
.bz-broken-table .bz-fix-row .button { flex: 0 0 auto; }
.bz-broken-table .bz-fix-form input[type=text] {
  border: 1px solid #e2e8f0; border-radius: 8px; padding: 5px 8px; font-size: 12px;
}
.bz-broken-table .bz-fix-form input[type=text]:focus {
  border-color: #008a6a; box-shadow: 0 0 0 3px rgba(0,138,106,.14); outline: none;
}
/* 补档成功后提示缓慢淡出 */
.bz-fade { animation: bzFade 3s ease forwards; }
@keyframes bzFade { 0%,60% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }