/* 时光图册 · 站点样式（零依赖，亮/暗自适应）
   设计令牌一律来自 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; }

/* 视觉隐藏，但屏幕阅读器与搜索引擎仍能读到。
   首页原本没有任何 <h1>（模块标题都是 h2）—— 补一个隐藏的主标题。 */
.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;
}

: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; }

/* 顶栏搜索：胶囊（输入 + 图标），焦点时展宽。
   2026-09-22 用户要求「顶部搜索框加个小搜索图标」→ 定口径「不用变很窄，
   就原长度留一点给搜索图标就行」→ 随又要求「搜索按钮放到右侧」。
   ⚠️ 总宽沿用改造前的原数值（200px / 焦点 236px；窄屏 132 / 158），
   图标占右侧约 28px（margin-left 8 + 20 图标），输入区宽度与之前一致。
   ⚠️ 边框/底色挂在 .search 上（而不是 input 上），图标才能和输入框同处一个胶囊内。
   展宽用 :focus-within —— 焦点在 input 上时整颗胶囊变宽。 */
.search {
  position: relative; display: flex; align-items: center;
  width: 200px; height: 34px; padding: 0 7px 0 12px;
  border: 1px solid rgba(255, 255, 255, .16); border-radius: var(--radius);
  background: rgba(255, 255, 255, .06);
  transition: width .2s ease, border-color .18s ease;
}
.search:focus-within { width: 236px; border-color: var(--brand); }
.search-btn {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; margin-left: 8px; padding: 0;
  border: 0; background: none; color: #8f8f8f; cursor: pointer;
  transition: color .15s ease;
}
.search-btn svg { display: block; width: 15px; height: 15px; }
.search-btn:hover { color: #fff; }
.search input {
  flex: 1 1 auto; min-width: 0; width: 100%; height: 100%; padding: 0;
  border: 0; background: none; color: #eaeaea; font-size: 13px;
}
.search input:focus { outline: none; }
.search input::placeholder { color: #7d7d7d; }

/* 搜索页（/search/）—— 2026-09-22 新增。
   顶栏搜索框改为跳转本页做**全站**搜索（旧版只过滤当前页卡片，站内 99% 图集搜不到）。
   复用已有的 .card-grid-arch / .pagination / .page-link / .search-empty，只加这两个。 */
.search-stat { margin: 0 0 18px; text-align: center; color: var(--text-soft); font-size: 13.5px; }

.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); }

/* 文章页底部友情链接横幅（图片 2000×425，见 static/img/friend-tuhai66-2000.webp）。
   独占正文卡末尾一行，铺满主列宽度；图自带底色 → 亮/暗主题都不用改。 */
.post-friend {
  display: block; margin: 20px 0 0; border-radius: var(--radius);
  overflow: hidden; transition: opacity .18s ease;
}
.post-friend:hover { opacity: .88; }
.post-friend img { display: block; width: 100%; height: auto; }

.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 的 18px）+ 加粗，但不带左侧色条。
   ⚠️ 选择器必须写到 `.prose p.tut-lead`：`.prose p`（0,1,1）会压掉 `.tut-lead`（0,1,0）
   的 color，只剩灰体（与 .tut-strong 同样的坑）。提到 (0,2,1) 才拿到与小节标题一致的 --text。 */
.prose p.tut-lead { margin: 0 0 14px; font-size: 18px; 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; }
  /* 2026-09-22 用户反馈「登录后手机端导航栏被积分挤爆，日夜主题按钮溢出屏幕」。
     ⚠️ 根因：基类的 .header-actions { flex: none }（第 79 行）**不许收缩**，登录后
     顶栏内容变宽就只能整块溢出，把 #themeToggle 推出可视区。
     用户已定口径：**导航栏只显示用户名**（积分/等级不再展示），长度仍不可控
     （实测 13 字用户名在 375px 就能把按钮顶出去）。
     这里只做两件事：①允许收缩 ②用省略号截断。**绝不加 flex-wrap** ——
     换行会把顶栏整体撑高一截（用户已明确不要）。 */
  .header-actions { flex: 0 1 auto; min-width: 0; }
  .search { flex: none; width: 132px; }
  .search:focus-within { width: 158px; }
  .user-bar { min-width: 0; }
  .user-bar a { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .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;
  touch-action: none; /* 触摸交给灯箱处理（滑动切图） */
}
.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; }
}