/* 时光图册 · 站点样式（零依赖，亮/暗自适应）
   设计令牌一律来自 static/css/theme.css —— 由 build.py 从 src/config.py 的 THEME 生成。
   换色只改 src/config.py 的 THEME，本文件不含硬编码品牌色。

   结构尺寸照 www.thh19.com 1440 视口实测：
     wrapper        max-width 100%（封顶 1600），桌面端左右 0 padding（满幅）
     行间距         24px；模块头 22px + 下间距 16px
     卡片           gap 16（卡片 margin-right/bottom 16）
     列表行         3 列 × 2 行，卡 469×125，左图 140×104（padding-top 74%），padding 10
     六列网格       6 列 × 1 行，卡 227×287，图 padding-top 75%
     大图行         4 列 × 1 行，卡 348×281，图 padding-top 60%
     紧凑竖版       6 列 × 1 行，卡 164×343，图 padding-top 125%
     竖版行         6 列 × 2 行，卡 227×478，图 padding-top 150%
     侧栏           360px，与主列间距 16（只跟 AI 专区 / 会员投稿两行并排）
   命名与 src/components.py 的 class 一一对应。 */

/* ============ 本文件内的少量派生量 ============ */
:root {
  --brand-ink: #ffffff;
  --shadow-sm: 0 2px 8px rgba(98, 124, 153, .14);
  --card-gap: 16px;
  --row-gap: 24px;
  --aside: 360px;
}

html[data-theme="dark"] {
  --brand-ink: #ffffff;
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, .5);
}

/* ============ 基础 ============ */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.7 var(--font);
  transition: background-color .2s ease, color .2s ease;
}

img { max-width: 100%; display: block; border: 0; }
a { color: inherit; }
h1, h2, h3, h4 { line-height: 1.4; font-weight: 600; }
button { font: inherit; }
p { margin: 0 0 10px; }

/* 满幅：桌面端不留左右 padding（实测 wrapper padding 0） */
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--brand); color: var(--brand-ink);
  padding: 9px 16px; border-radius: 0 0 var(--radius) 0; text-decoration: none;
}
.skip-link:focus { left: 0; }

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

/* ============ 头部：黑色顶条 + 白色导航条（64 + 55 = 119px） ============ */
.site-header { position: sticky; top: 0; z-index: 50; }
.site-header.is-scrolled .nav-bar { box-shadow: 0 1px 6px rgba(98, 124, 153, .16); }

.topbar { background: var(--topbar-bg); color: var(--topbar-text); }
.topbar-inner { display: flex; align-items: center; gap: 18px; min-height: var(--header-h); }

.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; flex: none; }
.brand-mark {
  width: 34px; height: 34px; border-radius: var(--radius);
  background: var(--brand); color: var(--brand-ink);
  display: grid; place-items: center;
  font-weight: 700; font-size: 17px; letter-spacing: 1px;
}
.brand-text strong { display: block; font-size: 17px; font-weight: 600; letter-spacing: .5px; color: #fff; }
.brand-text small { display: block; font-size: 12px; line-height: 1.25; color: var(--topbar-text); }

.header-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; flex: none; }

.search input {
  height: 34px; width: 200px; padding: 0 13px;
  border: 1px solid rgba(255, 255, 255, .16); border-radius: var(--radius);
  background: rgba(255, 255, 255, .06); color: #eaeaea; font-size: 13px;
  transition: width .2s ease, border-color .18s ease;
}
.search input::placeholder { color: #7d7d7d; }
.search input:focus { width: 236px; border-color: var(--brand); outline: none; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 34px; padding: 0 15px; border: 0;
  border-radius: var(--radius); font-size: 13px; font-weight: 600;
  text-decoration: none; cursor: pointer;
  transition: background-color .18s ease, color .18s ease, opacity .18s ease;
}
.btn-primary { background: var(--brand); color: var(--brand-ink); }
.btn-primary:hover { background: var(--brand-dark); }
.btn-ghost {
  width: 34px; padding: 0;
  background: transparent; border: 1px solid rgba(255, 255, 255, .18); color: var(--topbar-text);
}
.btn-ghost:hover { border-color: var(--brand); color: #fff; }

.nav-toggle {
  display: none; flex-direction: column; justify-content: center; gap: 4px;
  width: 36px; height: 34px; padding: 0 8px;
  background: transparent; border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--radius); cursor: pointer;
}
.nav-toggle span { display: block; height: 2px; border-radius: 2px; background: var(--topbar-text); }

.nav-bar { background: var(--bg-elev); border-bottom: 1px solid var(--line); }
.nav-bar .wrap { min-height: var(--nav-h); display: flex; align-items: center; }

.site-nav { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; }
.site-nav a {
  padding: 7px 13px; border-radius: var(--radius);
  font-size: 14.5px; color: var(--text); text-decoration: none;
  transition: color .18s ease, background-color .18s ease;
}
.site-nav a:hover { color: var(--brand); background: var(--brand-soft); }
.site-nav a.active { color: var(--brand); background: var(--brand-soft); font-weight: 600; }

/* 解压教程导航项：只加粗（用户 2026-09-21：「不用搞这么特殊，字体加粗或者改变一下字体就行」）。
   ⚠️ 不换字体族 —— 站点没有自带字体文件，中文靠系统字体栈，
      硬换 serif/楷体在安卓/苹果/Windows 上各行其是。加粗是最稳的「不一样」。 */
.site-nav a.nav-tut { font-weight: 700; }

/* ============ chip / tag ============ */
.chip {
  display: inline-block; padding: 2px 8px; border-radius: var(--radius-sm);
  font-size: 12px; line-height: 1.7;
  background: var(--brand-soft); color: var(--brand);
  text-decoration: none;
}
.tag {
  display: inline-block; padding: 2px 8px; border-radius: var(--radius-sm);
  font-size: 12px; color: var(--text-soft); background: var(--bg-soft);
  text-decoration: none; transition: background-color .18s ease, color .18s ease;
}
.tag:hover { background: var(--brand-soft); color: var(--brand); }

/* ============ 模块区 ============ */
.home-rows { display: block; }

.module { margin-top: var(--row-gap); }

/* 模块头：h2 高 22px，下间距 16px；无边框无竖条 */
.module-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-bottom: var(--card-gap);
}
.modules-title-box { min-width: 0; }
.module-title {
  margin: 0 10px 0 0; padding: 0;
  font-size: 22px; font-weight: 600; line-height: 22px;
  color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* 文章页「相关推荐」标题是纯文本（无内联子元素），行盒严格等于 line-height:22px，
   而中文字形盒更高（微软雅黑≈1.32×、苹方≈1.4×）→ 被 overflow:hidden 裁掉字形下缘。
   2026-09-21：行高提到 1.25 留余量；并直接放开 overflow —— 该标题是静态短文案，不需要
   省略号截断，放开后任何字体都不再裁。选择器只命中 .module-related，首页不受影响。 */
.module-related .module-title { line-height: 1.25; overflow: visible; }
.more { font-size: 13px; color: var(--brand); text-decoration: none; white-space: nowrap; flex: none; }
.more:hover { color: var(--brand-dark); }

/* 模块主标题可点击：外观与纯文字一致，只在悬停时给提示色 */
a.mod-name { color: inherit; text-decoration: none; transition: color .18s ease; }
a.mod-name:hover { color: var(--brand); }

/* 分类胶囊：桌面端与窄屏均不展示（2026-09-20 起全站隐藏，DOM 仍在但不可见；
   曾一度在 ≤860px 显示，但 379px 宽会挤出横向溢出并把标题盒压成宽 0） */
.module-tabs { display: none; gap: 0; margin: 0 0 0 auto; flex: none; }
.module-tabs a { text-decoration: none; }
.module-tabs span {
  display: flex; align-items: center; height: 26px; padding: 0 16px;
  border-radius: 20px; font-size: 12px; color: var(--text-soft);
  background: var(--bg-elev); border: 1px solid var(--line);
}
.module-tabs a:first-child span { background: var(--brand-soft); color: var(--brand); border-color: transparent; }

/* ============ 卡片 ============ */
/* 卡片间距靠 16px gap；列数按行型 */
/* 每种行型都是独立网格：容器 class 只有 card-grid-* 一个（不同时带 card-grid），
   所以每条规则都必须自带 display:grid 与 gap。 */
.card-grid { display: grid; gap: var(--card-gap); grid-template-columns: repeat(4, minmax(0, 1fr)); }
.card-grid6 { display: grid; gap: var(--card-gap); grid-template-columns: repeat(6, minmax(0, 1fr)); }
/* 年费合集：六列正方形卡（缩略图 1:1） */
.card-grid-sq6 { display: grid; gap: var(--card-gap); grid-template-columns: repeat(6, minmax(0, 1fr)); }
.card-grid-list { display: grid; gap: var(--card-gap); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card-grid-vert { display: grid; gap: var(--card-gap); grid-template-columns: repeat(6, minmax(0, 1fr)); }
.card-grid-big { display: grid; gap: var(--card-gap); grid-template-columns: repeat(4, minmax(0, 1fr)); }
.card-grid-ai { display: grid; gap: var(--card-gap); grid-template-columns: repeat(6, minmax(0, 1fr)); }
.card-grid-arch { display: grid; gap: var(--card-gap); grid-template-columns: repeat(4, minmax(0, 1fr)); }

.card {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--bg-elev); border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  transition: box-shadow .2s ease;
}
.card:hover { box-shadow: var(--shadow-pop); }
.card.is-hidden { display: none; }

.card-thumb { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--bg-soft); }
.card-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.card:hover .card-thumb img { transform: scale(1.04); }

/* 竖版卡比例由所在行型决定 */
.card-grid-vert .card-thumb { aspect-ratio: 2 / 3; }
.card-grid-arch .card-thumb { aspect-ratio: 2 / 3; }
.card-grid-ai .card-thumb { aspect-ratio: 4 / 5; }
.card-grid-big .card-thumb { aspect-ratio: 5 / 3; }
.card-grid-sq6 .card-thumb { aspect-ratio: 1 / 1; }

/* 列表行：左图 140×104（padding-top 74%），整卡 padding 10，卡高 125 */
.card-list { flex-direction: row; align-items: flex-start; padding: 10px; gap: 16px; }
.card-list .card-thumb { width: 140px; flex: none; aspect-ratio: 140 / 104; align-self: flex-start; }
.card-list .card-body { padding: 0; gap: 3px; }

.card-body { display: flex; flex-direction: column; gap: 4px; flex: 1; padding: 12px 13px 13px; }
.card-title { margin: 0; font-size: 15px; font-weight: 500; line-height: 1.45; }
.card-title a { color: inherit; text-decoration: none; }
.card-title a:hover { color: var(--brand); }
.card-excerpt {
  margin: 0; font-size: 12px; line-height: 1.6; color: var(--text-soft);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.card-tags { display: flex; flex-wrap: wrap; gap: 6px; }

.card-meta {
  display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: auto;
  padding-top: 6px; font-size: 12px; color: var(--text-mute);
}
.card-meta .meta-date { margin-left: auto; }

/* 紧凑行（AI 专区 / 竖版行）字号收一点 */
.card-grid-ai .card-title { font-size: 13px; line-height: 1.4; }
.card-grid-ai .card-body { padding: 9px 10px 10px; gap: 3px; }
.card-grid-ai .card-meta { font-size: 11.5px; padding-top: 4px; }
.card-grid-vert .card-body { padding: 10px 11px 11px; }
.card-grid-vert .card-title { font-size: 14px; }
.card-grid-vert .card-meta { font-size: 11.5px; }

/* 归档页（分类 / 机构 / 标签 / 最新发布）：竖版长方形卡，与首页人像摄影行同形态。
   主栏 1064px 下 5 列 → 卡宽 200、缩略图 200×300。标题截 2 行，否则长标题把行高拉歪。 */
.card-grid-arch .card-body { padding: 10px 11px 11px; gap: 4px; }
.card-grid-arch .card-title {
  font-size: 14px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.card-grid-arch .card-meta { font-size: 11.5px; padding-top: 5px; }

/* 六列网格行：卡内只留 标题 + 两行摘要 + 一行元信息，对齐 thh19 实测卡高 287 */
.card-grid6 .card-body { padding: 11px 12px 12px; gap: 5px; }
/* 标题统一截 2 行，否则长标题会把卡高从 287 顶到 380 */
.card-grid6 .card-title {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.card-grid6 .card-tags { display: none; }
.card-grid6 .card-meta { padding-top: 5px; }

/* 正方形行（年费合集）：只看标题 + 一行元信息，缩略图 1:1 */
.card-grid-sq6 .card-body { padding: 11px 12px 12px; gap: 5px; }
.card-grid-sq6 .card-title {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.card-grid-sq6 .card-tags { display: none; }
.card-grid-sq6 .card-meta { padding-top: 5px; }

/* 大图行：卡 348×281、图 5:3 */
.card-grid-big .card-body { padding: 11px 12px 12px; }
.card-grid-big .card-tags { display: none; }

/* ============ 主体 + 侧栏 ============ */
/* 只有带侧栏的行（AI 专区 / 会员投稿）用两栏，其余行满幅 */
.row-with-aside {
  display: grid; grid-template-columns: minmax(0, 1fr) var(--aside);
  gap: var(--card-gap); align-items: start; margin-top: var(--row-gap);
}
.row-with-aside > .row-main > .module { margin-top: 0; }

.layout-with-aside {
  display: grid; gap: var(--card-gap); align-items: start;
  grid-template-columns: minmax(0, 1fr) var(--aside);
}

/* 无侧栏页面（解压教程）：单列，正文限宽居中。
   这些页没有热搜/标签/机构可列，侧栏三段会只剩标题 → 干脆不放侧栏。 */
.layout-plain { display: block; }
.layout-plain .prose { max-width: 900px; margin: 0 auto; }

.sidebar {
  display: flex; flex-direction: column; gap: var(--card-gap);
  position: sticky; top: calc(var(--header-h) + var(--nav-h) + 14px);
}

.panel {
  background: var(--bg-elev); border-radius: var(--radius);
  box-shadow: var(--shadow-card); padding: 16px;
}
.panel-title { margin: 0 0 12px; font-size: 16px; font-weight: 600; color: var(--text); }

.hot-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.hot-list li a { display: flex; gap: 10px; text-decoration: none; align-items: center; }
.hot-list img {
  width: 64px; height: 48px; flex: none; border-radius: var(--radius-sm);
  object-fit: cover; background: var(--bg-soft);
}
.hot-list strong {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: 13.5px; font-weight: 500; line-height: 1.45;
}
.hot-list a:hover strong { color: var(--brand); }
.hot-list em { display: block; margin-top: 2px; font-style: normal; font-size: 12px; color: var(--text-mute); }

.tag-cloud { display: flex; flex-wrap: wrap; gap: 7px; }

.stat-list { list-style: none; margin: 0; padding: 0; font-size: 13.5px; }
.stat-list li {
  display: flex; justify-content: space-between; align-items: center;
  padding: 7px 0; border-bottom: 1px solid var(--line);
}
.stat-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.stat-list a { text-decoration: none; color: var(--text); }
.stat-list a:hover { color: var(--brand); }
.stat-list span { color: var(--text-mute); }

/* ============ 分页 ============ */
.pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 26px; }
.page-link {
  min-width: 34px; height: 34px; padding: 0 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius-sm);
  color: var(--text-soft); font-size: 13px; text-decoration: none;
  transition: .18s ease;
}
.page-link:hover { border-color: var(--brand); color: var(--brand); }
.page-link.is-current { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); font-weight: 600; }

/* ============ 面包屑 / 页头 ============ */
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 18px 0 0; font-size: 13px; color: var(--text-mute); }
.breadcrumb a { color: var(--text-soft); text-decoration: none; }
.breadcrumb a:hover { color: var(--brand); }
.breadcrumb .sep { color: var(--text-mute); }

.page-head { margin: 12px 0 20px; }
.page-head h1 { margin: 0; font-size: 24px; font-weight: 600; }
.page-head p { margin: 8px 0 0; font-size: 13.5px; color: var(--text-mute); }

/* 页头下方的机构名胶囊（栏目归档页）—— 可点击跳机构页 */
.org-chips {
  display: flex; flex-wrap: wrap; gap: 7px;
  margin: 12px 0 0; padding-top: 11px;
  border-top: 1px solid var(--line);
}
.org-chip {
  display: inline-block; padding: 3px 10px; border-radius: 20px;
  font-size: 12.5px; color: var(--text-soft); background: var(--bg-soft);
  text-decoration: none;
  transition: background-color .18s ease, color .18s ease;
}
.org-chip:hover { background: var(--brand-soft); color: var(--brand); }
.org-chip-more { cursor: default; color: var(--text-mute); }

/* 归档页也走满幅：面包屑/页头在 wrap 内，内容区自带 wrap */
main.wrap > .layout-with-aside { margin-top: 0; }

/* ============ 文章页 ============ */
.post {
  background: var(--bg-elev); border-radius: var(--radius);
  box-shadow: var(--shadow-card); padding: 28px;
}
.post-head h1 { margin: 0 0 12px; font-size: 26px; font-weight: 600; }
.post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: 13px; color: var(--text-mute); }
/* 机构名 = 可点的蓝色胶囊（与栏目胶囊同一外观），悬停加深提示可点 */
.post-meta .chip { transition: background-color .18s ease, color .18s ease; }
.post-meta .chip:hover { background: var(--brand); color: #fff; }

.post-content { font-size: 15.5px; line-height: 1.85; color: var(--text-soft); margin-top: 18px; }
.post-content p:last-child { margin-bottom: 0; }

/* 详情页预览图：桌面 4 列等分铺满一行（1064 下每张 246px），画框统一 2:3
   —— 口径对齐首页/栏目卡片（.card-thumb 的 2:3 + object-fit:cover），
   竖图/横图都填满同一画框；比例不合的按中心裁剪，不留白 */
.post-gallery {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px; margin: 20px 0;
}
.post-gallery img {
  width: 100%; aspect-ratio: 2 / 3; object-fit: cover;
  display: block; background: var(--bg-soft); border-radius: var(--radius-sm);
}

/* 详情页正文（年费合集这类素材：合辑说明 + 目录清单），位于预览图下方 */
.post-body {
  font-size: 15px; line-height: 1.9; color: var(--text-soft);
  margin: 0 0 20px; word-break: break-word;
}
.post-body p { margin: 0 0 14px; }
.post-body p:last-child { margin-bottom: 0; }

.pan-box { background: var(--bg-soft); box-shadow: none; }
.pan-count { color: var(--text-soft); font-size: 13.5px; margin: 0 0 10px; }
.pan-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.pan-chips .chip { background: var(--bg-elev); }

/* ---- 网盘下载付费模块 ---- */
.pan-tip { margin: 0 0 12px; font-size: 14px; line-height: 1.75; color: var(--text); }
.pan-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.pan-actions .btn { margin: 0; }
.btn-outline {
  background: var(--bg-elev); color: var(--brand);
  border: 1px solid var(--brand);
}
.btn-outline:hover { background: var(--brand-soft); }
.btn-sm { height: 30px; padding: 0 12px; font-size: 12.5px; }
.pan-state { font-size: 13.5px; margin: 0 0 10px; }
.pan-state .ok { color: #1a9d4b; font-weight: 600; }
.pan-state .warn { color: #d08b00; font-weight: 600; }
.pan-points { color: var(--brand); font-weight: 700; }
/* 提取码 / 解压密码：可点击复制的小胶囊（用户 2026-09-21 要求）
   ⚠️ button 自带 UA 样式，必须显式清 border/background/font，否则比 <b> 高一截、带灰底 */
.pan-code {
  display: inline-block; padding: 2px 9px; margin: 0 1px;
  border: 1px dashed var(--brand); border-radius: 999px;
  background: var(--brand-soft); color: var(--brand);
  font: inherit; font-size: 13px; font-weight: 700; line-height: 1.5;
  cursor: pointer; vertical-align: baseline;
  transition: background-color .18s ease, color .18s ease;
}
.pan-code:hover { background: var(--brand); color: var(--brand-ink); }
.pan-code:active { opacity: .8; }
.pan-ok { margin: 0 0 12px; padding: 11px 13px; border-radius: var(--radius); background: var(--bg-elev); border-left: 3px solid var(--brand); }

/* ---- 多网盘链接（年费合集常见，一条一行）---- */
.pan-count-line { margin: 0 0 10px; font-size: 13.5px; color: var(--text-soft); }
.pan-rows { display: flex; flex-direction: column; gap: 10px; margin: 0 0 12px; }
.pan-row {
  padding: 11px 13px; border-radius: var(--radius); background: var(--bg-elev);
  border-left: 3px solid var(--brand);
}
.pan-row-head { display: flex; align-items: center; gap: 8px; margin: 0 0 5px; }
.pan-row-name { font-size: 14.5px; font-weight: 600; color: var(--text); }
.pan-row-type {
  font-size: 11.5px; color: var(--text-soft); background: var(--bg);
  padding: 1px 7px; border-radius: 999px;
}
.pan-row-meta { font-size: 13.5px; color: var(--text); margin: 0 0 8px; word-break: break-all; }
.pan-row-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.pan-row-btns .btn { margin: 0; }
.pan-ok p { margin: 0 0 6px; font-size: 14px; }
.pan-ok p:last-child { margin-bottom: 0; }
.pan-msg { margin: 10px 0 0; font-size: 13.5px; min-height: 18px; }
.pan-msg.err { color: #d9534f; }
.user-bar { display: flex; align-items: center; gap: 10px; font-size: 13px; color: rgba(255, 255, 255, .82); }
.user-bar a { color: #fff; text-decoration: none; }
.user-bar .pt { color: #ffd166; font-weight: 700; }

.post-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 20px; }

.post-nav {
  display: flex; justify-content: space-between; gap: 12px;
  margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--line);
  font-size: 13.5px;
}
.post-nav a { color: var(--text-soft); text-decoration: none; }
.post-nav a:hover { color: var(--brand); }

.prose {
  background: var(--bg-elev); border-radius: var(--radius);
  box-shadow: var(--shadow-card); padding: 28px;
  font-size: 15px; line-height: 1.85;
}
.prose h2 { font-size: 18px; margin: 24px 0 10px; }
.prose h2:first-child { margin-top: 0; }
.prose p { margin: 0 0 14px; color: var(--text-soft); }
.prose ul, .prose ol { margin: 0 0 14px; padding-left: 20px; color: var(--text-soft); }
/* 自定义页面正文里的插图（后台「插入图片」，独占一行；不加圆角/描边，避免喧宾夺主） */
.prose-img { display: block; width: 100%; height: auto; margin: 0 0 14px; }

/* ============ 解压教程（/tutorial/） ============
   正文照 thh19 源页：红字警告 + 加粗提示 + 编号小节 + 步骤图（550×977 手机截图）。
   图源页是 550px 宽，桌面端限宽居中，避免拉满后模糊。 */
.tut-warn {
  margin: 0 0 14px; padding: 12px 16px; border-radius: var(--radius);
  background: rgba(255, 51, 85, .07); border: 1px solid rgba(255, 51, 85, .22);
  color: #c02030; font-weight: 600;
}
html[data-theme="dark"] .tut-warn {
  background: rgba(255, 51, 85, .12); border-color: rgba(255, 51, 85, .3); color: #ff7c8c;
}
.tut-strong { font-weight: 600; color: var(--text); }
.tut-sec {
  margin: 30px 0 14px; font-size: 19px; font-weight: 600;
  padding-left: 12px; border-left: 4px solid var(--brand);
}
.tut-step { margin: 22px 0 8px; font-size: 16px; font-weight: 600; }
.tut-shot { margin: 0 0 18px; }
.tut-shot img {
  display: block; width: 100%; max-width: 340px; height: auto;
  margin: 0 auto; border: 1px solid var(--line); border-radius: var(--radius);
}
.tut-dl {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 4px 0 18px; padding: 10px 20px;
  background: var(--brand); color: var(--brand-ink) !important;
  border-radius: var(--radius); font-weight: 600; text-decoration: none;
}
.tut-dl:hover { background: var(--brand-dark); }
.tut-dl-note { margin: -10px 0 18px; font-size: 13px; color: var(--text-mute); }
.tut-hr { margin: 26px 0; border: 0; border-top: 1px solid var(--line); }

/* ============ 页脚 ============ */
.site-footer {
  margin-top: 48px; padding: 28px 0 22px;
  background: var(--bg-elev); border-top: 1px solid var(--line);
}
.footer-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.footer-brand strong { font-size: 15px; }
.footer-brand p { margin: 4px 0 0; font-size: 12.5px; color: var(--text-mute); }
.footer-links { display: flex; flex-wrap: wrap; gap: 15px; margin-left: auto; }
.footer-links a { font-size: 13px; color: var(--text-soft); text-decoration: none; }
.footer-links a:hover { color: var(--brand); }
.copyright { width: 100%; margin: 2px 0 0; padding-top: 12px; border-top: 1px solid var(--line); font-size: 12px; color: var(--text-mute); }

.to-top {
  position: fixed; right: 20px; bottom: 20px; z-index: 60;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--bg-elev); border: 1px solid var(--line); box-shadow: var(--shadow-sm);
  color: var(--text-soft); cursor: pointer; font-size: 15px;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: .2s ease;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { color: var(--brand); border-color: var(--brand); }

/* 搜索无结果提示（JS 注入） */
.search-empty {
  margin: 8px 0 0; padding: 14px 16px;
  background: var(--bg-elev); border: 1px dashed var(--line); border-radius: var(--radius);
  font-size: 13.5px; color: var(--text-mute); text-align: center;
}

/* ============ 主题色呈现 ============ */
/* 上一版把主色只用在 hover 与 12 个分类胶囊上，全站只剩 3 个蓝色块 ——
   1228 张白卡一压，主色等于不存在，看起来就是「没换色」。
   这里把蓝落到常驻可见处：导航选中、模块标题分隔符、更多链接、分页、
   侧栏标题、页脚压条、正文链。底色仍是 thh19 的白/灰，蓝是「读得出来」的点缀。 */
.module-title .mod-sep { margin: 0 6px; color: var(--brand); font-weight: 400; }
.module-title .mod-desc { font-size: 13px; font-weight: 400; color: var(--text-mute); }

/* 侧栏标题：左侧 3px 蓝条 */
.panel-title { position: relative; padding-left: 11px; }
.panel-title::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 15px; border-radius: 2px; background: var(--brand);
}

/* 页头标题：左侧蓝条 + 底部细分隔线 */
.page-head h1 { position: relative; padding-left: 13px; }
.page-head h1::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 4px; height: 20px; border-radius: 2px; background: var(--brand);
}

/* 正文内链 */
.post-content a, .prose a { color: var(--brand); }

/* 面包屑末项（当前页） */
.breadcrumb .sep + span, .breadcrumb > :last-child { color: var(--text); }

/* 页脚压条 */
.site-footer { border-top: 2px solid var(--brand); }

/* 响应式：窄屏下模块描述太长就隐掉，保留主名 */

/* ============ 响应式 ============ */
/* 桌面满幅：≥1280 时去掉左右 padding（实测 1440 视口下卡片贴边） */
@media (min-width: 1280px) {
  .wrap { padding: 0; }
}

@media (max-width: 1120px) {
  .row-with-aside, .layout-with-aside { grid-template-columns: minmax(0, 1fr) 320px; }
  :root { --aside: 320px; }
  .card-grid6 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .card-grid-sq6 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .card-grid-vert { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .card-grid-arch { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .card-grid-big { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1000px) {
  .row-with-aside, .layout-with-aside { grid-template-columns: 1fr; }
  .sidebar { position: static; }
  .card-grid, .card-grid-list, .card-grid6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .card-grid-sq6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .card-grid-vert { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .card-grid-arch { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .nav-toggle { display: inline-flex; }
  .nav-bar .wrap { min-height: 0; }
  .site-nav {
    flex-direction: column; align-items: stretch;
    max-height: 0; overflow: hidden; gap: 0; width: 100%;
    transition: max-height .28s ease;
  }
  .site-nav.is-open { max-height: 460px; padding-bottom: 10px; }
  .site-nav a { padding: 10px 8px; border-radius: 0; border-bottom: 1px solid var(--line); }
  .topbar-inner { flex-wrap: wrap; padding: 10px 0; gap: 12px; }
  .search input { width: 132px; }
  .search input:focus { width: 158px; }
  .topbar .btn-primary { display: none; }
  .module-title { font-size: 18px; }
  .module-title .mod-desc { display: none; }
  .module-title .mod-sep { display: none; }
  /* 2026-09-20 用户要求：模块标题下不展示分类胶囊 → 窄屏也不再显示（与桌面端一致，不再覆盖 display） */
  .card-grid-big, .card-grid-list, .card-grid6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card-grid-sq6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card-grid-arch { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* 2026-09-20 用户「平板也按手机那样两栏排」：621–860（平板竖屏/手机横屏）单独一段。 */
@media (min-width: 621px) and (max-width: 860px) {
  /* 此处原为 621–860 的首屏两栏排列规则（首屏功能 2026-09-20 已整块移除，分断点空位保留）。 */
}

@media (max-width: 620px) {
  .wrap { padding: 0 14px; }
  .card-list { flex-direction: column; padding: 0; gap: 0; }
  .card-list .card-thumb { width: 100%; aspect-ratio: 4 / 3; }
  .card-list .card-body { padding: 9px 10px 11px; }
  .module { margin-top: 26px; }
  .module-title { font-size: 17px; }
  .card-grid, .card-grid-vert, .card-grid-big, .card-grid-ai, .card-grid6, .card-grid-arch, .card-grid-sq6 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .card-grid-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .card-body { padding: 9px 10px 11px; }
  .card-excerpt { display: none; }
  .post, .prose { padding: 18px; }
  .post-head h1 { font-size: 21px; }
  .post-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .footer-links { margin-left: 0; }
}

/* ---- 正文图片灯箱（点开看原图） ---- */
.post-gallery img { cursor: zoom-in; }

html.lightbox-open { overflow: hidden; }
.lightbox {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, .92); padding: 0 56px;
}
.lightbox[hidden] { display: none; }
.lightbox-img {
  max-width: 100%; max-height: 100vh; width: auto; height: auto;
  object-fit: contain; border-radius: var(--radius-sm);
}
.lightbox-close, .lightbox-prev, .lightbox-next {
  position: absolute; z-index: 1; cursor: pointer;
  background: rgba(255, 255, 255, .12); color: #fff; border: 0;
  font-size: 22px; line-height: 1; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.lightbox-close {
  top: 14px; right: 14px; width: 40px; height: 40px; font-size: 20px;
}
.lightbox-prev, .lightbox-next { top: 50%; margin-top: -24px; width: 48px; height: 48px; }
.lightbox-prev { left: 8px; }
.lightbox-next { right: 8px; }
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover { background: rgba(255, 255, 255, .26); }
.lightbox-count {
  position: absolute; bottom: 16px; left: 0; right: 0;
  text-align: center; color: rgba(255, 255, 255, .78); font-size: 13px;
}

@media (max-width: 640px) {
  .lightbox { padding: 0 8px; }
  .lightbox-prev, .lightbox-next { width: 40px; height: 40px; margin-top: -20px; }
  .lightbox-prev { left: 2px; }
  .lightbox-next { right: 2px; }
}

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