/* ==========================================================================
   哆哆农场 · 设计系统
   风格：像素 / 马赛克复古 —— 直角硬边、硬投影、棋盘抖动底、像素精灵图标
   配色为一组受限的复古色板：文字色、描边色、表面色、强调色。
   暗夜主题（[data-theme="dark"]）只换这几个变量，结构与排版完全不变。
   ========================================================================== */

/* ---------- 1. 设计变量与重置 ---------- */
:root {
  /* 文字 */
  --ink: #1e2b45;
  --ink-soft: #4a5c7d;
  --ink-mute: #7b89a2;
  /* 描边与硬投影 */
  --edge: #1e2b45;
  --edge-shadow: #1e2b45;
  --dash: rgba(30, 43, 69, .34);
  --focus: #f4645c;
  /* 导航当前项 */
  --active-bg: #1e2b45;
  --active-fg: #fff8e6;
  /* 表面 */
  --bg: #f2e3bb;
  --panel: #fff8e6;
  --panel-tint: #ffd85e;
  --panel-info: #7fd0e8;
  --panel-thumb: #86d98f;
  --panel-thumb-2: #9ec9ef;
  --sand: #e8d3a3;
  /* 强调色：复古色板，两个主题里都保持明亮，文字统一用 --on-accent */
  --yellow: #ffcf3f;
  --coral: #f4645c;
  --sky: #62c4ee;
  --mint: #6fd48c;
  --peach: #ff9fb6;
  --lavender: #ab93ee;
  --on-accent: #1e2b45;
  --nav-hover: #ffe08a;
  /* 马赛克棋盘底 */
  --grid-a: rgba(30, 43, 69, .055);

  --sticky: var(--yellow);
  --line: 3px solid var(--edge);
  /* 搜索框描边色：日间跟普通描边一致（深藏青，在亮面板上本来就清楚），
     暗夜会改成常驻的暗红（见下面暗夜变量块）。 */
  --search-border: var(--edge);
  /* 像素风一律直角：圆角全部归零 */
  --radius-lg: 0;
  --radius-md: 0;
  --radius-sm: 0;
  /* 硬投影：没有模糊半径，只有位移，像贴上去的色块 */
  --shadow-1: 3px 3px 0 var(--edge-shadow);
  --shadow-2: 5px 5px 0 var(--edge-shadow);
  --shadow-3: 6px 6px 0 var(--edge-shadow);

  --font-pixel: "Zpix", "Fusion Pixel 12px", "Ark Pixel Font", "Silkscreen", "ZCOOL KuaiLe",
    "Yuanti SC", "YouYuan", "Microsoft YaHei", monospace;
  --font-display: var(--font-pixel);
  /* 标题字重：像素字体笔画细，全站标题统一走粗体。
     系统字体会落到真正的 Bold；像素字体没有粗体时浏览器会合成描边，
     正好变成更厚实的像素字——比叠偏移阴影更实，也不会出现重影。 */
  --fw-display: 700;
  --font-body: "Zpix", "Fusion Pixel 12px", "Ark Pixel Font", -apple-system, BlinkMacSystemFont,
    "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans SC", sans-serif;

  --container: 1240px;
  --header-h: 66px;
}

/* ---------- 1b. 暗夜主题（暖夜 CRT） ----------
   思路：和日间主题保持同一套色相家族（暖沙灰底 + 糖果强调色），只把明度整体压下去，
   而不是换一套冷调霓虹 —— 原来的青绿/长春花蓝在整页重复后，整页像一张霓虹线框图。
   描边 --edge 压到比面板更暗（与日间"深描边 + 亮面板"的结构同构），
   层次交给硬投影拉开，不再靠一圈亮发丝线撑结构。 */
[data-theme="dark"] {
  color-scheme: dark;

  /* 文字：暖白 → 灰 */
  --ink: #e7e0d0;
  --ink-soft: #b0a898;
  --ink-mute: #877f70;

  /* 描边与硬投影：描边比面板更暗 */
  --edge: #14120e;
  --edge-shadow: #090806;
  --dash: rgba(231, 224, 208, .16);
  /* 暗夜聚焦色：亮红（原 #ffd166 黄） */
  --focus: #e0664f;
  /* 搜索框：暗夜下常驻暗红描边。
     暗夜的 --edge(#14120e) 刻意压到比面板还暗，搜索框又贴在页头底色(--bg #1c1a16)上，
     3px 近黑描边会整条融进背景 —— 输入框是页头唯一的交互控件，不能"看不见"。
     所以暗夜直接给它一条常驻的暗红框（对页头 3.55:1，达 UI 组件 3:1 线）；
     聚焦时换成更亮的红 + 投影加深做二次反馈。 */
  --search-border: #c04a3c;
  --focus-hi: #f07a66;
  /* 导航当前项：低饱和暖黄，不再是荧光薄荷 */
  --active-bg: #d9b45c;
  --active-fg: #1b1915;

  /* 表面：暖深灰分层 */
  --bg: #1c1a16;
  --panel: #26231e;
  --panel-tint: #302c26;
  --panel-info: #2a2722;
  --panel-thumb: #312d27;
  --panel-thumb-2: #2b2924;
  --sand: #35312a;

  /* 强调色：与日间同色相，降饱和提亮，暗底上依旧清晰 */
  --yellow: #e0b755;
  --coral: #d97d68;
  --sky: #5ea5c2;
  --mint: #6db287;
  --peach: #d4909a;
  --lavender: #9b8fd2;
  --on-accent: #1b1915;
  --nav-hover: rgba(224, 183, 85, .16);
  --grid-a: rgba(231, 224, 208, .028);
}

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

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

body {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.6;
  /* 关掉字体抗锯齿：像素风要的是硬边，不是平滑灰边 */
  -webkit-font-smoothing: none;
  /* 马赛克棋盘底：24px 一格的交错方块，只有缝隙里能看见 */
  background-color: var(--bg);
  background-image:
    linear-gradient(45deg, var(--grid-a) 25%, transparent 25%),
    linear-gradient(-45deg, var(--grid-a) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--grid-a) 75%),
    linear-gradient(-45deg, transparent 75%, var(--grid-a) 75%);
  background-size: 24px 24px;
  background-position: 0 0, 0 12px, 12px -12px, -12px 0;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }

:focus-visible {
  outline: 3px solid var(--coral);
  outline-offset: 2px;
  border-radius: 0;
}

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

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- 2. 背景涂鸦（像素精灵） ---------- */
.doodles {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.doodles__item {
  position: absolute;
  display: block;
  opacity: var(--o, .07);
  color: var(--ink);
  /* 精灵形状由 CSS mask 引用 assets/sprite/*.svg（全站只下载一次），
     颜色交给 currentColor，日间/暗夜自动跟随。 */
  width: var(--s, 48px);
  height: var(--s, 48px);
  background-color: currentColor;
  -webkit-mask-image: var(--m);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 100% 100%;
  mask-image: var(--m);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 100% 100%;
}
@media (max-width: 1023px) { .doodles { display: none; } }

/* ---------- 2b. 暗夜背景 ----------
   暖深底 + 两团很淡的光晕（暖黄 / 冷蓝），再叠一层 24px 像素网格。
   原来叠了三团（青绿/暖黄/靛蓝）+ 一层线性渐变，叠在一起是一块发脏的深蓝灰。 */
[data-theme="dark"] body {
  background:
    radial-gradient(circle at 10% 6%, rgba(224, 183, 85, .075), transparent 26rem),
    radial-gradient(circle at 86% 0%, rgba(94, 165, 194, .055), transparent 24rem),
    linear-gradient(165deg, #201d18 0%, #241f19 52%, #1b1915 100%);
  background-attachment: fixed;
}
[data-theme="dark"] body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(231, 224, 208, .038) 1px, transparent 1px),
    linear-gradient(90deg, rgba(231, 224, 208, .038) 1px, transparent 1px);
  background-size: 24px 24px;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .55), transparent 78%);
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .55), transparent 78%);
}
/* 涂鸦在暗夜下变成暖琥珀色像素块 */
[data-theme="dark"] .doodles__item { opacity: calc(var(--o, .07) + .03); color: #c8a05a; }

/* 暗夜下的图片处理：
   - 占位截图是「平面 UI 示意图」，大面积近白。直接压在深底上就是一块刺眼的白斑，
     用 invert + hue-rotate(180°) 把它翻成可信的暗色界面（深底 + 浅描边 + 保留色相）。
     ⚠ 只对【占位图】反色（.shots-item--ph）：真实截图是照片/软件界面，
     反色之后颜色全错，看着像坏图 —— 用户换成真图就必须好看。
   - 真实截图改盖「蒙版」：软件界面几乎都是白底，整块压在深底上就是一片大白斑。
     蒙版用暖深色 + multiply 混合 —— 白底被压成暗暖灰、黑字仍然是黑的，
     颜色关系不反转，既不刺眼，也不会看着像坏图。
   - 占位图标是像素画，保留原色相、只压暗降饱和即可，不要反转（会破坏像素画的可辨识度）。
   - 二维码绝不能反转：反色二维码很多扫码器认不出来，而且需要白色静区。 */
[data-theme="dark"] .card__icon img,
[data-theme="dark"] .pick__thumb img { filter: brightness(.74) saturate(.86); }
[data-theme="dark"] .shots-item--ph img { filter: invert(1) hue-rotate(180deg) brightness(.94) contrast(.92); }
/* 真实截图的蒙版：multiply 混合下，这个色值就是「白底最终变成什么色」。
   #a89f8e ≈ 白底保留 66% —— 比早期的 #4f4941/#6b6459 明显亮，
   在深色底上不至于刺眼，同时仍压得出「这是白底截图」的层次。
   isolation 把混合范围锁在这个框里，不会去影响页面底色。 */
[data-theme="dark"] .shots-item:not(.shots-item--ph) { isolation: isolate; }
[data-theme="dark"] .shots-item:not(.shots-item--ph)::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #a89f8e;
  mix-blend-mode: multiply;
  pointer-events: none;
}
/* 二维码：保留浅底静区 */
[data-theme="dark"] .qr-row img { background: #fffdf6; }

.site-shell { position: relative; z-index: 1; }

/* ---------- 3. 顶栏 ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--bg);
  border-bottom: 4px solid var(--edge);
}
.site-header__inner {
  display: flex;
  align-items: center;
  gap: 18px;
  height: var(--header-h);
}
.brand {
  display: inline-flex;
  align-items: center;
  /* 「哆」和「哆哆农场」之间留开一点，别贴在一起 */
  gap: 20px;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: var(--fw-display);
  color: var(--ink);
  white-space: nowrap;
}
/* 「哆」黄色 logo 方章本身就是暗夜模式开关 */
.brand__mark {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 48px;
  height: 40px;
  padding: 0;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: var(--fw-display);
  color: var(--on-accent);
  background: var(--yellow);
  border: 3px solid var(--edge);
  border-radius: 0;
  box-shadow: 4px 4px 0 var(--edge-shadow);
  transition: transform .12s steps(2, end), box-shadow .12s steps(2, end);
}
.brand__mark:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--edge-shadow); }
.brand__mark:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--edge-shadow); }
/* 角标小方章：白天月亮、暗夜太阳，提示这个方章可以点 */
.brand__mark-badge {
  position: absolute;
  right: -6px;
  bottom: -6px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  background: var(--panel);
  border: 3px solid var(--edge);
  border-radius: 0;
}
.brand__mark-badge svg {
  width: 12px;
  height: 12px;
  fill: currentColor;
  color: var(--ink);
  shape-rendering: crispEdges;
}
.brand__mark-badge .icon-sun { display: none; }
[data-theme="dark"] .brand__mark-badge .icon-moon { display: none; }
[data-theme="dark"] .brand__mark-badge .icon-sun { display: block; }
.brand__name {
  color: var(--ink);
}
.site-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: var(--fw-display);
}
.site-nav a {
  flex: 0 0 auto;
  white-space: nowrap;
  padding: 6px 13px;
  border: 3px solid transparent;
  border-radius: 0;
  transition: background .12s steps(2, end), color .12s steps(2, end);
}
.site-nav a:hover { background: var(--nav-hover); }
.site-nav a.is-active {
  color: var(--active-fg);
  background: var(--active-bg);
}
.site-header__search { margin-left: auto; flex: 0 1 250px; }

/* ---------- 3b. 暗夜模式开关 ----------
   开关就是页头那个「哆」黄色 logo 方章（.brand__mark.theme-toggle），
   右上角不再单独放按钮。 */
.theme-toggle:focus-visible {
  outline: 3px solid var(--coral);
  outline-offset: 3px;
}

.search-form {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 7px 12px;
  background: var(--panel);
  border: var(--line);
  border-color: var(--search-border);
  border-radius: 0;
  box-shadow: var(--shadow-1);
  transition: box-shadow .12s steps(2, end), border-color .12s steps(2, end);
}
.search-form:focus-within {
  border-color: var(--focus);
  box-shadow: 5px 5px 0 var(--edge-shadow);
}
/* 暗夜：暗红框常驻，聚焦时换成更亮的红 + 投影加深（不改边框宽度，避免文字位移） */
[data-theme="dark"] .search-form:focus-within {
  border-color: var(--focus-hi);
  box-shadow: 6px 6px 0 var(--edge-shadow);
}
/* 暗夜：placeholder 用 --ink-mute 时只有 3.95:1（AA 要 4.5:1），
   提到 --ink-soft 变成 6.63:1，提示字才真正读得清。 */
[data-theme="dark"] .search-form input::placeholder { color: var(--ink-soft); }
.search-form__icon {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--ink-soft);
  shape-rendering: crispEdges;
}
.search-form input {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  padding: 0;
  color: var(--ink);
  font-size: 12.5px;
  background: transparent;
  border: 0;
  outline: 0;
}
.search-form input::placeholder { color: var(--ink-mute); }

/* ---------- 5. 目录主区 ---------- */
.catalog-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 296px;
  gap: 24px;
  align-items: start;
  padding: 18px 0 24px;
}

.catalog-panel {
  background: var(--panel);
  border: var(--line);
  border-radius: 0;
  box-shadow: var(--shadow-3);
  overflow: hidden;
}
.catalog-panel__head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 13px 16px;
  background: var(--panel-tint);
  border-bottom: var(--line);
}
.catalog-count {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: var(--fw-display);
  color: var(--ink);
}
.catalog-count b { font-weight: var(--fw-display); }
.catalog-note {
  margin-left: auto;
  font-size: 12.5px;
  letter-spacing: .04em;
  color: var(--ink-soft);
}
.catalog-crumb {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: var(--ink-soft);
}
.catalog-crumb a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- 6. 软件卡片 ---------- */
.catalog-cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  padding: 20px;
}
.card {
  --sticky: var(--yellow);
  position: relative;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  padding: 18px 20px;
  color: var(--ink);
  background: color-mix(in srgb, var(--sticky) 22%, var(--panel));
  border: var(--line);
  border-radius: 0;
  box-shadow: var(--shadow-1);
  transition: transform .12s steps(2, end), box-shadow .12s steps(2, end);
}
/* 卡片底色在暗夜下只带一点色调（原来 12% 会把霓虹强调色搅成一摊浑水） */
[data-theme="dark"] .card { background: color-mix(in srgb, var(--sticky) 9%, var(--panel)); }
/* 暗夜下普通标签要比卡片亮一档才分得开；
   分类标签（--cat / .is-cat）继续用强调色底，不能被这两条规则盖掉。 */
[data-theme="dark"] .card__chip:not(.card__chip--cat) { background: #3b362e; }
[data-theme="dark"] .detail-meta span:not(.is-cat) { background: #3b362e; }
/* 卡片左上角的像素标签：方方正正贴在边框上 */
.card::before {
  content: "";
  position: absolute;
  left: 14px;
  top: -10px;
  width: 48px;
  height: 10px;
  background: var(--sticky);
  border: 3px solid var(--edge);
  pointer-events: none;
}
.card:hover {
  transform: translate(-3px, -3px);
  box-shadow: 6px 6px 0 var(--edge-shadow);
}
.card__icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  overflow: hidden;
  background: var(--sticky);
  border: 3px solid var(--edge);
  border-radius: 0;
}
/* 小图标做像素化放大，边缘保持硬块；大图（封面 / 截图）不处理 */
.card__icon img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  image-rendering: pixelated;
}
.card__main { min-width: 0; }
.card__title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: -.01em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card__hook {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.65;
  color: var(--ink-soft);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 11px;
}
.card__chip {
  padding: 3px 10px;
  font-size: 11.5px;
  color: var(--ink);
  background: var(--panel);
  border: 2px solid var(--edge);
  border-radius: 0;
}
.card__chip--cat {
  color: var(--on-accent);
  background: var(--sticky);
  font-weight: 600;
}

.catalog-empty {
  padding: 46px 16px;
  text-align: center;
  color: var(--ink-soft);
}
.catalog-empty strong {
  display: block;
  margin-bottom: 6px;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: var(--fw-display);
  color: var(--ink);
}

/* ---------- 7. 侧栏 ---------- */
.catalog-sidebar {
  position: sticky;
  top: 88px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.side-panel {
  padding: 13px;
  background: var(--panel);
  border: var(--line);
  border-radius: 0;
  box-shadow: var(--shadow-2);
}
.side-panel--lib {
  background: var(--panel-info);
  /* 左右略收一点，给「本站说明」整行声明留出宽度 */
  padding: 13px 10px;
}
.side-panel--lib b {
  display: block;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: var(--fw-display);
}
.side-panel--lib__text {
  margin: 0;
  font-size: 12px;
  color: var(--ink-soft);
}
.keep-together { white-space: nowrap; }
.side-panel__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 7px;
  margin-bottom: 6px;
  border-bottom: 3px solid var(--dash);
}
.side-panel__head h2 {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: var(--fw-display);
}
.side-panel__head span { font-size: 11px; color: var(--ink-mute); }

.pick {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 9px;
  padding: 8px 0;
}
/* 用相邻兄弟选择器画分隔线：只有紧跟在另一条 pick 后面的条目才带上边框。
   （不能用 :first-of-type——占位条目是 <div>，而栏目标题也是 <div>，首条会匹配失败。） */
.pick + .pick { border-top: 2px dashed var(--dash); }
.pick__thumb {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  overflow: hidden;
  background: var(--panel-thumb);
  border: 3px solid var(--edge);
  border-radius: 0;
  box-shadow: 3px 3px 0 var(--edge-shadow);
}
.pick__thumb img {
  width: 34px;
  height: 34px;
  object-fit: contain;
  image-rendering: pixelated;
}
.pick__thumb svg { width: 22px; height: 22px; color: var(--ink); shape-rendering: crispEdges; }
.pick__body { min-width: 0; }
.pick__title {
  font-size: 12.5px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pick__meta { margin-top: 3px; font-size: 11px; color: var(--ink-mute); }

/* 友情链接栏 */
.side-panel--links .pick__thumb { background: var(--panel-thumb-2); }
.pick--empty { cursor: default; }
.pick--empty .pick__title { color: var(--ink-soft); }
.pick--empty .pick__meta { color: var(--ink-mute); }
a.pick:hover .pick__title { text-decoration: underline; text-underline-offset: 2px; }

.side-panel--qr { padding: 0; }
.qr-row { display: flex; align-items: center; gap: 10px; padding: 10px 11px; }
.qr-row img {
  width: 78px;
  height: 78px;
  object-fit: contain;
  background: var(--panel);
  border: 3px solid var(--edge);
  border-radius: 0;
}
.qr-row p { font-size: 12px; line-height: 1.6; color: var(--ink-soft); }
.qr-row b { color: var(--ink); }

/* ---------- 8. 分页 ---------- */
.pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 0 4px;
}
.pager a,
.pager span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  min-height: 36px;
  padding: 4px 10px;
  border: var(--line);
  border-radius: 0;
  font-size: 13px;
}
.pager a {
  background: var(--panel);
  box-shadow: var(--shadow-1);
  transition: transform .12s steps(2, end);
}
.pager a:hover { transform: translate(-2px, -2px); }
.pager .is-current {
  color: var(--on-accent);
  background: var(--sky);
  font-family: var(--font-display);
  font-weight: var(--fw-display);
}
.pager .is-disabled { color: var(--ink-mute); background: transparent; border-style: dashed; }

/* ---------- 9. 页脚 ---------- */
.site-footer {
  margin-top: 24px;
  background: var(--bg);
  border-top: 4px solid var(--edge);
}
.site-footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 26px 0;
  text-align: center;
}
.site-footer__line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 4px 10px;
  margin: 0;
}
/* 版权与站名同一套字体，一行读下来 */
.site-footer__copy,
.site-footer__brand {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: var(--fw-display);
  color: var(--ink);
}
.site-footer__copy { margin: 0; }

/* ---------- 10. 详情页 ---------- */
.detail-main { padding: 18px 0 24px; }
.detail-card {
  --sticky: var(--yellow);
  padding: 22px 24px;
  background: var(--panel);
  border: var(--line);
  border-radius: 0;
  box-shadow: var(--shadow-3);
}
/* 详情页的色调变体 —— 与按钮层 .detail-actions__site--<tone> 用同一套 6 色。
   卡片（列表页）走内联 style="--sticky:var(--xx)"，这里是详情页的等价写法。 */
.detail-card--sky { --sticky: var(--sky); }
.detail-card--peach { --sticky: var(--peach); }
.detail-card--mint { --sticky: var(--mint); }
.detail-card--lavender { --sticky: var(--lavender); }
.detail-card--gold { --sticky: var(--yellow); }
.detail-card--coral { --sticky: var(--coral); }

.detail-card__top {
  position: relative;
  display: flex;
  gap: 18px;
  align-items: flex-start;
}
.detail-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 74px;
  height: 74px;
  overflow: hidden;
  background: var(--sticky);
  border: 3px solid var(--edge);
  border-radius: 0;
  box-shadow: 4px 4px 0 var(--edge-shadow);
}
.detail-icon img {
  width: 54px;
  height: 54px;
  object-fit: contain;
  image-rendering: pixelated;
}
.detail-card__names { min-width: 0; }
.detail-card__names h1 {
  margin: 0;
  font-size: 24px;
  font-weight: var(--fw-display);
  line-height: 1.3;
  letter-spacing: -.01em;
}
.detail-card__names p { margin: 8px 0 0; font-size: 13.5px; color: var(--ink-soft); }
.detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}
.detail-meta span {
  padding: 3px 10px;
  font-size: 11.5px;
  background: var(--panel);
  border: 2px solid var(--edge);
  border-radius: 0;
}
.detail-meta span.is-cat { color: var(--on-accent); background: var(--sticky); font-weight: 600; }

.detail-section { margin-top: 20px; }
.detail-h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: var(--fw-display);
}
/* 标题一律不加文字硬阴影：像素字体的中文笔画本身就有锯齿，
   再叠一层偏移阴影会在浅底上形成「重影」，日间模式尤其明显。
   像素感靠直角边框、硬投影背景和像素精灵来承担。 */
/* 标题前的方块像素点 */
.detail-h2::before {
  content: "";
  width: 12px;
  height: 12px;
  background: var(--sticky, var(--coral));
  border: 3px solid var(--edge);
  border-radius: 0;
}
.detail-text p { margin: 0 0 12px; font-size: 16px; line-height: 1.8; text-indent: 2em; }
.detail-text ul { margin: 0 0 12px; padding-left: 4px; }
.detail-text li {
  position: relative;
  padding-left: 20px;
  margin: 6px 0;
  font-size: 16px;
  line-height: 1.75;
}
/* 列表项前的方块符号 */
.detail-text li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .62em;
  width: 9px;
  height: 9px;
  background: var(--coral);
  border: 2px solid var(--edge);
  border-radius: 0;
}
.detail-text code {
  padding: 2px 7px;
  font-size: 14px;
  background: var(--sand);
  border: 2px solid var(--edge);
  border-radius: 0;
}

.shots-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
/* 截图：纯展示，不可点击、不放大，所以没有 hover 位移 */
.shots-item {
  display: block;
  position: relative;
  width: 100%;
  padding: 0;
  overflow: hidden;
  background: var(--panel);
  border: var(--line);
  border-radius: 0;
  box-shadow: 4px 4px 0 var(--edge-shadow);
}
.shots-item--wide { grid-column: 1 / -1; }
.shots-item img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }

.detail-download {
  padding: 18px 20px;
  background: color-mix(in srgb, var(--panel-tint) 45%, var(--panel));
  border: var(--line);
  border-radius: 0;
  box-shadow: var(--shadow-2);
}
/* 四个按钮等宽但不撑满：固定最小宽度，一行四个紧凑排开 */
.detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.detail-actions__site {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 140px;
  padding: 10px 18px;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: var(--fw-display);
  color: var(--on-accent);
  background: var(--yellow);
  border: 3px solid var(--edge);
  border-radius: 0;
  box-shadow: 4px 4px 0 var(--edge-shadow);
  transition: transform .12s steps(2, end), box-shadow .12s steps(2, end);
}
.detail-actions__site:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--edge-shadow); }
.detail-actions__site--primary { background: var(--yellow); }
.detail-actions__site--sky { background: var(--sky); }
.detail-actions__site--mint { background: var(--mint); }
.detail-actions__site--peach { background: var(--peach); }
.detail-actions__site--lavender { background: var(--lavender); }
.detail-actions__site--gold { background: var(--yellow); }
/* 可选的按钮色（对应 DOWNLOAD_BUTTONS 的 tone）：
   coral 此前只是色板里的变量，没有配套的按钮类。
   背景取同名 CSS 变量，所以日间 / 暗夜会自动各取一档。 */
.detail-actions__site--coral { background: var(--coral); }
/* 下载区提示语：比正文（16px）小一号的提示样式
   margin-top 20px：与上面那排下载按钮拉开距离
   （按钮带 4px 硬投影，12px 太贴，视觉上像粘在一起） */
.detail-download__note {
  margin: 20px 0 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--ink);
}

.detail-back { padding: 18px 0 0; }
.detail-back a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: var(--fw-display);
  background: var(--panel);
  border: var(--line);
  border-radius: 0;
  box-shadow: var(--shadow-1);
}
.detail-back a:hover { transform: translate(-2px, -2px); }

/* ---------- 11. 搜索页 ---------- */
.search-page { padding: 18px 0 24px; }
.search-page__head {
  padding: 16px 18px;
  background: var(--panel-info);
  border: var(--line);
  border-radius: 0;
  box-shadow: var(--shadow-2);
}
.search-page__head h1 {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: var(--fw-display);
}
.search-page__head p { margin: 6px 0 0; font-size: 13px; color: var(--ink-soft); }
.search-page__head mark {
  padding: 0 4px;
  color: var(--on-accent);
  background: var(--yellow);
  border-radius: 0;
}

/* ---------- 12. 提示条 ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  z-index: 140;
  transform: translateX(-50%) translateY(12px);
  padding: 9px 18px;
  font-size: 13px;
  color: var(--on-accent);
  background: var(--yellow);
  border: 3px solid var(--edge);
  border-radius: 0;
  box-shadow: 4px 4px 0 var(--edge-shadow);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s steps(2, end), transform .2s steps(2, end);
}
.toast.is-on { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- 14. 响应式 ---------- */
@media (max-width: 1099px) {
  .site-header__inner { flex-wrap: wrap; gap: 12px; height: auto; padding: 10px 0; }
  .site-nav {
    order: 3;
    width: 100%;
    overflow-x: auto;
    /* 横向滚动时隐藏滚动条，保持像素界面干净 */
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .site-nav::-webkit-scrollbar { height: 0; }
  .site-header__search { flex: 1 1 240px; margin-left: 0; }
  .catalog-layout { grid-template-columns: 1fr; }
  .catalog-sidebar { position: static; }
}
@media (max-width: 640px) {
  .container { padding: 0 14px; }
  .brand { font-size: 18px; }
  .brand__mark { width: 40px; height: 34px; font-size: 16px; }
  .brand { gap: 14px; }
  .brand__mark-badge { width: 18px; height: 18px; right: -5px; bottom: -5px; }
  .brand__mark-badge svg { width: 10px; height: 10px; }
  .card { grid-template-columns: 46px minmax(0, 1fr); gap: 11px; padding: 12px 11px; }
  .card::before { left: 10px; top: -9px; width: 38px; height: 9px; }
  .card__icon { width: 46px; height: 46px; }
  .card__icon img { width: 34px; height: 34px; }
  .detail-card__top { flex-wrap: wrap; }
  .detail-card__names h1 { font-size: 19px; }
  .shots-grid { grid-template-columns: 1fr; }
}

/* 窄屏：两行两列铺满，四个框依然一样大 */
@media (max-width: 760px) {
  .detail-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .detail-actions__site { min-width: 0; padding: 10px 12px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}