/* 识趣网 v2 设计系统 —— 冷灰白 + 普鲁士蓝
   ---------------------------------------------------------------
   与 style.css 的关系：本文件在其后加载，**只负责视觉层**。
   style.css 保留 V2EX 式的结构与历史类名（.box/.cell/.item 等不动），
   v2.css 通过「覆盖 CSS 变量 + 覆盖具体类的视觉属性」改变外观，
   全站一次性换肤，不必逐页重写结构。

   设计来源：站长提供的《识趣-社区模板》。相对原稿的取舍：
   1. 原稿是 1440px 固定画布 + JS 等比缩放（原型展示技巧），这里改成
      流式响应式布局，保留既有 375px 移动端适配；
   2. 原稿外链 Google Fonts（国内访问不稳），这里改用系统字体栈；
   3. 原稿只有浅色，这里补齐暗色主题，不丢现有主题切换功能；
   4. 原稿的圆角极小（2px），这里沿用 —— 与原稿的「纸感 / 报刊感」一致。
*/

/* ===== 1. 设计令牌 ===== */
:root {
  --sans-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "HarmonyOS Sans SC", "MiSans", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  --mono-font: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", "Courier New", monospace;

  /* 底色：页面浅灰 → 卡片纯白 → 交互浅灰，三层足够 */
  --bg-page: #f7f7f5;
  --box-background-color: #ffffff;
  --box-background-alt-color: #f2f2f0;
  --box-background-hover-color: #f5f5f3;

  /* 文字：墨黑正文 → 次级灰 → 弱灰 */
  --box-foreground-color: #121212;
  --color-gray: #5a5a5a;
  --color-fade: #9a9a9a;
  --color-graphite: #121212;
  --color-snow: #d8d8d5;

  /* 线条：卡片描边比内部分割线略深一档 */
  --box-border-color: #ececea;
  --divider: #f0f0ee;
  --divider2: #e8e8e6;

  /* 主色：普鲁士蓝 */
  --accent: #326891;
  --accent-deep: #24506f;
  --accent-soft: #e9f0f6;
  --link-color: #326891;
  --link-blue: #0067c0;
  --link-visited-color: #7a7a7a;
  --link-hover-color: #24506f;

  /* 分类色板：与原稿的分类 chip 一一对应 */
  --c-blue: #326891;
  --c-orange: #c7593e;
  --c-green: #1e7a46;
  --c-purple: #6b4e93;
  --c-gold: #c29b40;
  --c-teal: #1e6e64;
  --c-slate: #5a6b7a;
  --c-wine: #5a2e3a;
  --c-red: #b22222;

  --teal: #1e6e64;
  --teal-soft: #e1f5ee;
  --green: #1e7a46;
  --red: #b22222;
  --amber: #c29b40;
  --amber-soft: #faeeda;
  --orange: #c7593e;
  --hot-bg: #fbeee8;
  --like-bg: #e9f0f6;

  --field: #f2f2f0;
  --badge: #f0f0ee;
  --input-border: #e0e0e0;

  --box-border-radius: 6px;
  --shadows: none;
  --ring: 0 0 0 3px rgba(50, 104, 145, .16);

  /* 原稿标题用无衬线 600，不是印刷体衬线 */
  --serif-font: var(--sans-font);
}

/* 暗色：冷灰黑 + 亮蓝，保对比不刺眼 */
[data-theme="dark"] {
  --bg-page: #121212;
  --box-background-color: #1b1b1a;
  --box-background-alt-color: #242423;
  --box-background-hover-color: #2a2a28;
  --box-foreground-color: #e8e8e6;
  --color-gray: #a8a8a5;
  --color-fade: #787875;
  --color-graphite: #e8e8e6;
  --color-snow: #3a3a38;
  --box-border-color: #2e2e2c;
  --divider: #242423;
  --divider2: #2e2e2c;
  --accent: #6fa8dc;
  --accent-deep: #8fbee6;
  --accent-soft: #1c2a36;
  --link-color: #6fa8dc;
  --link-blue: #7fb6e8;
  --link-visited-color: #8a8a88;
  --link-hover-color: #8fbee6;
  --teal: #6bc0b0;
  --teal-soft: #172b28;
  --green: #7cbb8e;
  --red: #e07060;
  --amber: #d9b45e;
  --amber-soft: #332a17;
  --orange: #e08a6c;
  --hot-bg: #3a241c;
  --like-bg: #1c2a36;
  --field: #242423;
  --badge: #2a2a28;
  --input-border: #3a3a38;
  --ring: 0 0 0 3px rgba(111, 168, 220, .2);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-page: #121212;
    --box-background-color: #1b1b1a;
    --box-background-alt-color: #242423;
    --box-background-hover-color: #2a2a28;
    --box-foreground-color: #e8e8e6;
    --color-gray: #a8a8a5;
    --color-fade: #787875;
    --color-graphite: #e8e8e6;
    --color-snow: #3a3a38;
    --box-border-color: #2e2e2c;
    --divider: #242423;
    --divider2: #2e2e2c;
    --accent: #6fa8dc;
    --accent-deep: #8fbee6;
    --accent-soft: #1c2a36;
    --link-color: #6fa8dc;
    --link-blue: #7fb6e8;
    --link-visited-color: #8a8a88;
    --link-hover-color: #8fbee6;
    --teal: #6bc0b0;
    --teal-soft: #172b28;
    --green: #7cbb8e;
    --red: #e07060;
    --amber: #d9b45e;
    --amber-soft: #332a17;
    --orange: #e08a6c;
    --hot-bg: #3a241c;
    --like-bg: #1c2a36;
    --field: #242423;
    --badge: #2a2a28;
    --input-border: #3a3a38;
    --ring: 0 0 0 3px rgba(111, 168, 220, .2);
  }
}

/* ===== 2. 基础排版 ===== */
body {
  font-family: var(--sans-font);
  font-size: 14px;
  line-height: 1.6;
  background-color: var(--bg-page);
  color: var(--box-foreground-color);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5 {
  font-family: var(--sans-font);
  font-weight: 600;
  line-height: 1.45;
}

code, pre, kbd {
  font-family: var(--mono-font);
}

/* 数字等宽对齐：统计数字、回复数不会因字宽跳动 */
.stat-num, .count-badge, .count_livid, .s-stat b, #Bottom .small, .rank-no {
  font-variant-numeric: tabular-nums;
}

::selection { background: var(--accent-soft); }

/* ===== 3. 布局容器：内容区 1200px（站长 2026-09-20 指定；含左右各 24px 内边距，可用宽 1152） ===== */
.content {
  min-width: 0;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
}
#Main {
  margin: 0 364px 0 0;
  padding: 0;
  text-align: left;
}
#Rightbar {
  width: 340px;
  float: right;
  margin-right: 0;
  text-align: left;
}
#Wrapper { padding: 24px 0 40px; background-color: transparent; text-align: left; }

/* ===== 4. 顶部导航 ===== */
#Top {
  height: 56px;
  padding: 0;
  background-color: var(--box-background-color);
  border-bottom: 1px solid var(--box-border-color);
  position: sticky;
  top: 0;
  z-index: 30;
}
#Top .content { height: 100%; }
.site-nav {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 28px;
}

/* 品牌区：logo + 站名 + 副标题 */
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
  /* 品牌区是整块可点的 <a>，全局 a:hover 的下划线在这里不要出现（站长 2026-09-20） */
  text-decoration: none;
}
.brand:hover,
.brand:focus-visible {
  text-decoration: none;
}
/* 站标（2026-09-20 重做）：原先裁切 logo.png 横图当方块，滤镜调色两次，
   换成内联「趣」字方块 —— 品牌主色普鲁士蓝固定不随明暗主题变（深蓝底白字
   两套主题下对比度都 ≥ 5:1），favicon.svg 与这里同一设计。 */
.logo-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: none;
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  /* 不用 --accent：暗色主题下它会变亮蓝，白字对比度掉到 2.5:1；
     品牌色保持恒定也符合「logo 不随主题变」的惯例 */
  background-color: #326891;
  border-radius: 6px;
  user-select: none;
}
.brand-name { font-size: 18px; font-weight: 600; color: var(--box-foreground-color); }

/* 主导航：纯文本链接，当前项蓝色加粗（无下划线，下划线只留给 #Tabs） */
.site-nav .nav-links {
  display: flex;
  align-items: center;
  gap: 24px;
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
}
.site-nav .nav-links a {
  font-size: 14px;
  font-weight: 400;
  color: var(--color-gray);
  white-space: nowrap;
}
.site-nav .nav-links a:hover { color: var(--accent); text-decoration: none; }
.site-nav .nav-links a._current,
.site-nav .nav-links a.nav_active { color: var(--accent); font-weight: 500; }

.site-nav .tools {
  flex: none;
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 14px;
  margin-left: 0;
}
.site-nav .tools .top {
  padding: 4px 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--box-foreground-color);
  border-radius: 4px;
}
.site-nav .tools .top:hover { color: var(--accent); background: none; text-decoration: none; }
.site-nav .tools .btn-register {
  background: var(--accent);
  color: #fff;
  font-weight: 500;
  padding: 8px 18px;
  border-radius: 4px;
}
.site-nav .tools .btn-register:hover { background: var(--accent-deep); color: #fff; }

/* 顶部导航：趣处分类下拉（后台可配置，kind=topics）。
   nav-links 改为 overflow:visible，否则绝对定位的菜单会被裁切（见上方 .nav-links 规则）。 */
.site-nav .nav-links { overflow: visible; }
.site-nav .nav-dropdown { position: relative; display: inline-flex; }
.site-nav .nav-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  color: var(--color-gray);
  white-space: nowrap;
}
.site-nav .nav-dropdown-toggle:hover,
.site-nav .nav-dropdown-toggle._current,
.site-nav .nav-dropdown-toggle[aria-expanded="true"] { color: var(--accent); }
.site-nav .nav-dropdown-toggle .caret { font-size: 10px; opacity: .7; line-height: 1; }

.site-nav .nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  min-width: 168px;
  padding: 6px;
  background: var(--box-background-color);
  border: 1px solid var(--box-border-color);
  border-radius: 6px;
  z-index: 40;
  display: none;
}
/* 命中桥：菜单与按钮之间有 12px 间隙，鼠标从按钮移到菜单会经过这段「无人区」，
   触发 mouseleave → 菜单一闪就没了（这就是站长说的「点击不稳定」的手感来源）。
   伪元素填满间隙并归属于菜单，鼠标经过时仍在悬停子树内。 */
.site-nav .nav-dropdown-menu::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 0;
  right: 0;
  height: 12px;
}
/* 展开条件（2026-09-20）：is-open = 点击切换的权威状态（JS 同步 aria-expanded），
   is-hover = 桌面悬停。两者都由 JS 管；键盘用户按 Enter/Space 触发 click，同样走 is-open。
   ⚠️ 这里**不要**再用 `:focus-within` —— 点开后按钮一直是焦点态，会把「再点收起」顶掉
   （实测：is-open 已变 false，菜单仍然显示）。仅靠 :hover 也不行（触摸屏点不开）。 */
.site-nav .nav-dropdown.is-open .nav-dropdown-menu,
.site-nav .nav-dropdown.is-hover .nav-dropdown-menu { display: block; }
.site-nav .nav-dropdown-menu .nav-dropdown-item {
  display: block;
  padding: 8px 10px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--color-gray);
  border-radius: 4px;
  white-space: nowrap;
}
.site-nav .nav-dropdown-menu .nav-dropdown-item:hover {
  background: var(--box-background-hover-color);
  color: var(--accent);
  text-decoration: none;
}

/* 发布下拉：图标按钮放在 .tools 里（不在 .nav-links 内），沿用上面同一套
   .site-nav .nav-dropdown* 规则（2026-09-20 把选择器从 .nav-links 放宽到 .site-nav，
   就是为了这一处不用把整套规则抄第二遍）。区别于「趣处」下拉的只有两点：
   菜单右对齐（按钮贴着顶栏右边缘，左对齐会溢出）、按钮是图标而非文字。 */
.site-nav .tools .nav-dropdown-menu { left: auto; right: 0; }
.site-nav .tools .nav-dropdown-toggle {
  width: 28px;
  height: 26px;
  justify-content: center;
  color: var(--accent);
  background-color: var(--accent-soft);
  border: 1px solid var(--accent);
  border-radius: 4px;
}
.site-nav .tools .nav-dropdown-toggle .ico { width: 16px; height: 16px; }
.site-nav .tools .nav-dropdown-toggle:hover,
.site-nav .tools .nav-dropdown-toggle[aria-expanded="true"] { background-color: var(--accent-soft); }

/* 视觉隐藏但保留给读屏器 / 自动化测试的文本 */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* 搜索框 */
#search-container {
  width: 250px;
  height: 36px;
  flex: 0 1 auto;
  min-width: 140px;
  /* 标语移出顶栏后，改由搜索框吃掉剩余空间，把搜索与工具区推到右侧 */
  margin-left: auto;
  padding-left: 36px;
  background-color: var(--field);
  border: 1px solid transparent;
  border-radius: 4px;
}
#search-container::before {
  left: 8px; top: 6px; width: 20px; height: 20px;
  background-size: 15px 15px;
  opacity: .5;
}
#search-container.active { border-color: var(--accent); background-color: var(--box-background-color); }
#search-container.active::before { opacity: .85; }
#search-container #search {
  font-size: 13px;
  height: 100%;
  padding: 0 12px 0 0;
  color: var(--box-foreground-color);
}
#search-container #search::placeholder { color: var(--color-fade); }

/* ===== 内联 SVG 图标（partials/_icon.html）=====
   容器统一 inline-flex：SVG 是 inline 元素，直接放进 span 会带基线空隙、高度对不齐。
   图标本身是 1em，尺寸仍由容器的 font-size 决定（tabbar 19px / 发布卡 24px）。 */
.tabbar-icon,
.submit-choice-icon,
.scroll-top {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.scroll-top .ico { width: 1.2em; height: 1.2em; }

/* 草稿箱「删除」这类行内文字按钮：去掉按钮外观，只留链接色 */
.linklike {
  padding: 0;
  font: inherit;
  color: var(--accent);
  background: none;
  border: 0;
  cursor: pointer;
}

/* 独立页（无右侧栏）：/submit 这类「一次只做一件事」的页面清掉侧栏、正文居中。
   只在宽屏生效 —— ≤1000px 时布局本就是单列，这里的 margin 会盖掉响应式规则。 */
@media (min-width: 1001px) {
  body.no-sidebar #Rightbar { display: none; }
  body.no-sidebar #Main {
    margin: 0 auto;
    max-width: 760px;
  }
}

/* 搜索建议下拉（search-suggest.js 填充）。
   定位：容器 height 36px，下拉贴在其下方 4px，宽度跟容器一致（不撑破 250px）。
   不用 box-shadow（全站禁用投影），靠 1px 边框 + 层级区分。 */
.search-suggest {
  position: absolute;
  z-index: 60;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  min-width: 100%;
  max-height: 320px;
  overflow-y: auto;
  box-sizing: border-box;
  padding: 4px;
  background-color: var(--box-background-color);
  border: 1px solid var(--box-border-color);
  border-radius: var(--box-border-radius);
  text-align: left;
}
.search-suggest[hidden] { display: none; }
.search-suggest .ss-loading {
  padding: 8px 10px;
  font-size: 12px;
  color: var(--color-fade);
}
.search-suggest .ss-item {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 7px 10px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--box-foreground-color);
  text-decoration: none;
  border-radius: 4px;
}
.search-suggest .ss-item:hover,
.search-suggest .ss-item.is-active {
  background-color: var(--accent-soft);
  color: var(--accent);
  text-decoration: none;
}
.search-suggest .ss-type {
  flex: 0 0 auto;
  font-size: 11px;
  color: var(--color-fade);
}
.search-suggest .ss-item.is-active .ss-type { color: var(--accent); }
.search-suggest .ss-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tools .theme-toggle { font-size: 15px; padding: 4px 6px; border-radius: 4px; }

/* ===== 5. Tab 栏：下划线式（原稿） ===== */
#Tabs {
  display: flex;
  align-items: stretch;
  gap: 28px;
  padding: 0 20px;
  height: 40px;
  border-bottom: 1px solid var(--divider2);
  background-color: transparent;
}
/* 注意：模板里选中态写的是 class="tab_current"（不是 "tab tab_current"），
   两条选择器都要覆盖，否则 .tab 的基础样式（含 position:relative）不会生效，
   下划线的绝对定位会跑到别的祖先上。 */
#Tabs .tab,
#Tabs .tab_current {
  display: flex;
  align-items: center;
  font-size: 14px;
  line-height: 1;
  padding: 0;
  margin: 0;
  color: var(--color-gray);
  background: none;
  border-radius: 0;
  position: relative;
  white-space: nowrap;
}
#Tabs .tab:hover, #Tabs .tab_current:hover {
  color: var(--accent);
  background: none;
  text-decoration: none;
}
#Tabs .tab._current,
#Tabs .tab_current {
  color: var(--accent);
  font-weight: 500;
  background: none;
}
#Tabs .tab._current::after,
#Tabs .tab_current::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  background: var(--accent);
  border-radius: 5px 5px 0 0;
}

/* 列表页右上角的「分享资源」主入口（站长 2026-09-20）。
   遵循站内约定：accent-soft 软底 + accent 字 + accent 描边，hover 只加深不反转
   —— 实底 + 白字在暗色主题下白字仅 2.53:1（见 #SecondaryTabs .gray 处的说明）。
   margin-left:auto 把它推到 tabs 行右侧；flex:none 防止移动端被压缩。 */
#Tabs .tabs-share {
  margin-left: auto;
  align-self: center;
  flex: none;
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 12px;
  font-size: 13px;
  line-height: 1;
  border: 1px solid var(--accent);
  border-radius: 4px;
  background: var(--accent-soft);
  color: var(--accent);
  white-space: nowrap;
}
#Tabs .tabs-share:hover {
  background: var(--accent-soft);
  color: var(--accent-deep);
  text-decoration: none;
}


/* 分类标题（进入某个分类后的说明条） */
.category-heading { font-size: 16px; font-weight: 600; margin: 0; }
.category-desc { display: block; margin-top: 6px; }

/* 二级筛选（分类） */
#SecondaryTabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 12px 20px;
  background-color: transparent;
  border-bottom: 1px solid var(--divider);
}
#SecondaryTabs a {
  padding: 4px 10px;
  font-size: 12px;
  border-radius: 4px;
  color: var(--link-blue);
  background: var(--field);
}
#SecondaryTabs a:hover { background: var(--box-background-hover-color); color: var(--link-blue); text-decoration: none; }
/* 选中态：软底 + 主色字，而不是实底白字。实底 `--accent` 在暗色下是亮蓝 #6fa8dc，
   白字只有 2.53:1（设计审查报告 P0）。软底方案与侧栏 .action-card / 弹窗按钮统一，
   明暗两套都过 AA。 */
#SecondaryTabs a.gray { background: var(--accent-soft); color: var(--accent); font-weight: 500; }
#SecondaryTabs a.gray:hover { background: var(--accent-soft); color: var(--accent-deep); }
#SecondaryTabs .gray { color: var(--color-fade); }
/* 分类 chip 上的产品数量（参考 Futurepedia / AI工具集：分类要带数量）。
   只降透明度、继承 chip 自身颜色，选中态与普通态都安全，不引入新的对比度问题。 */
#SecondaryTabs .tab-count { font-size: 11px; margin-left: 2px; opacity: .72; }

/* 二级筛选行：相关标签（参考 AI工具集 的二级分类 chip 行）。
   与一级分类行并列但视觉更轻：无底色描边、字号小一档，避免两行抢焦点。 */
#TagFilter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--divider);
}
.tag-filter-label { font-size: 12px; color: var(--color-fade); margin-right: 2px; }
.ftag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  font-size: 12px;
  line-height: 1.6;
  border-radius: 4px;
  border: 1px solid var(--box-border-color);
  color: var(--link-blue);
}
.ftag:hover { background: var(--box-background-hover-color); text-decoration: none; }
.ftag.is-active { background: var(--accent-soft); border-color: var(--accent-soft); color: var(--accent); font-weight: 500; }
.ftag-n { font-size: 11px; opacity: .7; }
.ftag-clear { font-size: 12px; color: var(--color-fade); margin-left: 4px; }
.ftag-clear:hover { color: var(--accent); }

/* ===== 6. 卡片 ===== */
.box {
  background-color: var(--box-background-color);
  border: 1px solid var(--box-border-color);
  border-radius: var(--box-border-radius);
  overflow: hidden;
}
.cell { padding: 13px 20px; border-bottom: 1px solid var(--divider); }
.cell:last-child { border-bottom: 0; }
.inner { padding: 16px 20px; }
.header { padding: 20px 20px 16px; border-bottom: 1px solid var(--divider); }
.box-header { padding: 16px 20px; border-bottom: 1px solid var(--divider); }

/* ===== 6a. 帖子列表行（v2 卡片：42px 圆角方头像 + 分类 chip + 单行标题） ===== */
.topic-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 24px 10px 16px;
  border-bottom: 1px solid var(--divider);
  transition: background-color .12s;
}
.topic-row:last-child { border-bottom: 0; }
.topic-row:hover { background-color: var(--box-background-hover-color); }

/* 置顶行的视觉层级（2026-09-20）：左侧一道主色竖条 + 极淡底色，
   让「置顶」在列表里一眼可辨，不只靠标题前的小徽章。
   竖条用 ::before 绝对定位而不是 box-shadow inset —— 全站禁用投影；
   也不改 padding / 行高，避免把量好的行高重新撑开。 */
.topic-row.is-pinned { position: relative; background-color: var(--accent-soft); }
.topic-row.is-pinned::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background-color: var(--accent);
}
.topic-row.is-pinned:hover { background-color: var(--accent-soft); }

.row-avatar { flex: none; line-height: 0; align-self: flex-start; }
.row-avatar .avatar-letter { border-radius: 4px; }
.avatar-letter {
  border-radius: 4px;
  box-shadow: none;
  font-weight: 600;
}
.avatar-anon { background: var(--field); color: var(--color-gray); }
/* 自定义头像：与字母方块同一语言（4px 圆角方形）。
   style.css 里 .avatar-img 是 border-radius: 50%（圆），这里覆盖成方块，
   否则列表里「有头像=圆、无头像=方」两种形状混排。 */
.avatar-img {
  border-radius: 4px;
  object-fit: cover;
  display: block;
  background: var(--field);
  flex: none;
}

.row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }

.title-line {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  line-height: 1.5;
}
.title-line .badge { flex: none; }
/* 列表「含图片」标识（2026-09-23）：标题右侧的小图标，弱灰、不抢标题；
   仅当帖子带图（照片字段或正文插图）时由 _card.html 渲染。 */
.title-media {
  flex: none;
  display: inline-flex;
  align-items: center;
  color: var(--color-fade);
  font-size: 13px;
  line-height: 1;
}
.chip { font-size: 11px; font-weight: 500; white-space: nowrap; flex: none; line-height: 1.5; }
/* 分类名两侧的方括号是装饰，用伪元素生成，不进 DOM 文本 */
.chip::before { content: "["; }
.chip::after { content: "]"; }
a.chip:hover { text-decoration: underline; }
.hot-tag {
  background: var(--hot-bg);
  color: var(--orange);
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 4px;
  flex: none;
}
.topic-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--box-foreground-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  line-height: 1.5;
}
/* 已读帖弱化（2026-09-23）：从详情页返回列表后，点过的标题自动减灰，
   一屏里能更快分出「还没看过的」。
   注意：:visited 只能安全改颜色（字重/背景会被浏览器忽略），所以只调色；
   且必须写在 :hover 之前 —— 两者优先级相同，靠后者覆盖，保证悬停仍高亮。 */
.topic-title:visited { color: var(--link-visited-color); }
.topic-title:hover { color: var(--accent); text-decoration: none; }

.meta {
  font-size: 12px;
  color: var(--color-fade);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.5;
}
.meta a { color: var(--color-fade); }
.meta a:hover { color: var(--accent); text-decoration: none; }
.meta .dot { margin: 0 2px; }
.meta .meta-tag { color: var(--color-gray); }

.count-badge {
  background: var(--badge);
  border-radius: 4px;
  padding: 4px 10px;
  font-size: 12px;
  line-height: 1.5;
  color: #666;
  flex: none;
}
.count-badge:hover { color: var(--accent); text-decoration: none; }
.count-badge.zero, .count-badge.is-zero { color: #999; background: var(--field); }
.count-badge.zero:hover { color: var(--accent); }

/* 注：列表缩略图原本在卡片正文下方另有一块 `.card-thumb`（140×86），
   2026-09-19 起缩略图移进左侧 `.row-avatar`（`.res-thumb`），同一张图不再出现两次，
   该块与它的两条窄屏规则一并删除。 */

/* 徽章体系 */
.badge {
  padding: 2px 6px;
  font-size: 11px;
  line-height: 1.5;
  border-radius: 4px;
  background: var(--badge);
  color: var(--color-gray);
  white-space: nowrap;
}
.badge-pin { background: var(--accent-soft); color: var(--accent); }
.badge-featured { background: var(--amber-soft); color: var(--amber); }
.badge-warn { background: var(--hot-bg); color: var(--orange); }

/* 标签 chip */
.tag {
  display: inline-block;
  padding: 4px 10px;
  margin: 0 4px 0 0;
  font-size: 12px;
  border: 1px solid transparent;
  background: var(--field);
  color: var(--color-gray);
  border-radius: 4px;
}
.tag:hover { background: var(--accent); color: #fff; border-color: var(--accent); text-decoration: none; }
.tag.is-active { background: var(--accent); color: #fff; }

/* 网盘资源卡：网盘类型徽章 + 提取码复制 */
.res-attr.res-netdisk { background: var(--accent-soft); color: var(--accent); }
.copy-code { display: inline-flex; align-items: center; gap: 4px; }
.copy-code b { font-weight: 600; letter-spacing: .5px; }
.code-copy {
  border: 0;
  background: var(--field);
  color: var(--color-gray);
  font: inherit;
  font-size: 11px;
  line-height: 1;
  padding: 2px 6px;
  border-radius: 4px;
  cursor: pointer;
}
.code-copy:hover { color: var(--accent); }

/* 「回复可见提取码」：列表卡上的锁态入口 + 详情页的提示条 */
a.code-locked { color: var(--color-gray); text-decoration: none; }
a.code-locked:hover { color: var(--accent); }
.code-locked-hint {
  padding: 10px 20px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--color-gray);
  background: var(--box-background-alt-color);
  border-top: 1px solid var(--divider);
}
.code-locked-hint a { color: var(--accent); }

/* 网盘资源行紧凑化（2026-09-20 站长要求）。
   这一行没有缩略图，行高容易被右侧竖排动作条撑高（实测行高 143px 而文字仅 68px），
   于是把动作条改横排、并收紧内边距与间距。 */
.resource-row { padding: 9px 20px 9px 16px; }
.resource-row .row-main { gap: 4px; }
.resource-row .row-actions { flex-direction: row; align-items: center; gap: 10px; min-width: 0; }
.resource-row .upvote-btn { min-width: 40px; padding: 4px; }
.resource-row .res-comment-count { min-width: 34px; min-height: 30px; padding: 2px 4px; }

/* ===== 6b. 兼容：旧式 .item 表格行（产品列表 / 搜索结果仍在用） ===== */
.item.cell, .cell.item { padding: 10px 20px 10px 16px; }
.item table, .item tbody, .item tr { display: block; }
.item tr {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
}
.item td { display: block; width: auto !important; padding: 0 !important; }
.item td:first-child { flex: none; }
.item td:nth-child(2) { display: none; }
.item td:nth-child(3) { flex: 1; min-width: 0; }
.item td:last-child { flex: none; margin-left: auto; }
.item td:last-child, .item td:last-child a { text-align: right; }
.item .item_title {
  display: block;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
}
.item .item_title a { color: var(--box-foreground-color); }
.item .item_title a:hover { color: var(--accent); text-decoration: none; }
.item .topic_info {
  display: block;
  font-size: 12px;
  color: var(--color-fade);
  line-height: 1.5;
}
.item .topic_info a { color: var(--color-fade); }
.item .topic_info a:hover { color: var(--accent); text-decoration: none; }
.item .topic_info strong { font-weight: 400; color: var(--color-gray); }
.item .topic_info .votes { display: none; }
.item .node { color: var(--color-fade); background: none; border: 0; padding: 0; }
.item .count_livid {
  display: inline-block;
  min-width: 32px;
  padding: 4px 10px;
  font-size: 12px;
  color: #666;
  background: var(--badge);
  border-radius: 4px;
  text-align: center;
}
.item .count_livid:hover { color: var(--accent); text-decoration: none; }

/* 分页 */
.pagination {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 10px;
  padding: 16px 24px;
  font-size: 13px;
}
.pagination a, .pagination span { color: var(--link-blue); }
.pagination a:hover { text-decoration: underline; }
/* 分页里的「上一页 / 下一页」用文字链，不用实心按钮（原稿风格） */
.pagination .button, .pagination .super.button {
  background: none;
  border: 0;
  padding: 4px 2px;
  color: var(--link-blue);
  font-size: 13px;
}
.pagination .button:hover, .pagination .super.button:hover {
  color: var(--accent-deep);
  background: none;
  border: 0;
  text-decoration: underline;
}
.pagination .current, .pagination .page-current, .pagination strong {
  color: var(--box-foreground-color);
  font-weight: 500;
}
.pagination .page-current {
  min-width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: #fff;
  border-radius: 4px;
}
.pagination .disabled, .pagination .page-prev.is-disabled { color: var(--color-fade); }

/* 空态 */
.empty { padding: 32px 20px; font-size: 13px; color: var(--color-fade); }

/* ===== 6c. 产品列表行（v2.1，2026-09-19）：与帖子卡刻意区分 =====
   参考新趣集 / Futurepedia / AI工具集的产品发现范式：产品卡要一眼答出
   「这是什么产品 · 要不要用 · 去哪用」。所以在帖子卡的多行结构上再补
   一行简介与一行属性（定价 / 类型 / 门槛），并在标题行右侧给直达官网入口。
   行高靠 flex gap 控制，卡片整体比帖子卡高，纵向留白从 10px 提到 12px。 */
.product-row { padding-top: 12px; padding-bottom: 12px; }

/* 注：`.res-mark`（42×42 产品首字方块）与这里的一版 `.res-thumb` 已废弃 ——
   左侧改成「撑满行高的封面图 + 同尺寸占位块」，见下方 §6c 的 `.row-thumb`。 */

.res-visit {
  flex: none;
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  line-height: 1;
  padding: 3px 6px;
  border: 1px solid var(--box-border-color);
  border-radius: 4px;
  color: var(--color-fade);
}
.res-visit:hover { color: var(--accent); border-color: var(--accent); text-decoration: none; }

/* 列表行左侧的头像位（帖子与产品共用）：默认纵向居中排布 */
.row-avatar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

/* 产品卡左侧：产品缩略图（排名徽章已于 2026-09-19 移除）。
   缩略图**固定 1:1 方形**（宽高一致），纵向居中于内容列 —— 列表所有卡片的图比例统一，
   不会出现有的被行高拉成竖条、有的压成扁条。只有 `.product-row` 这样处理，
   帖子卡的 `.row-avatar` 仍是居中固定头像。 */
.product-row .row-avatar {
  align-self: center;
  align-items: center;
  flex: none;
}
.row-thumb {
  display: block;
  width: 88px;
  height: 88px;
  flex: none;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--box-border-color);
  background: var(--field);
  box-sizing: border-box;
}
.res-thumb {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 无图时的占位块：与缩略图同尺寸，纯色底 + 产品首字居中 */
.res-thumb-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 26px;
  font-weight: 600;
  line-height: 1;
}

/* 产品卡右侧动作条：点赞 + 评论数（参考新趣集卡片右侧） */
.row-actions {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 48px;
}
.res-upvote { margin: 0; line-height: 1; }
.upvote-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 44px;
  padding: 6px 4px;
  font-size: 12px;
  line-height: 1.2;
  color: var(--color-gray);
  background: transparent;
  border: 1px solid var(--box-border-color);
  border-radius: 4px;
  cursor: pointer;
}
.upvote-btn:hover { color: var(--accent); border-color: var(--accent); }
.upvote-btn.is-liked {
  color: var(--accent);
  background: var(--accent-soft);
  border-color: var(--accent);
}
.upvote-arrow { font-size: 10px; }
.upvote-count { font-weight: 600; font-variant-numeric: tabular-nums; }
.res-comment-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 40px;
  min-height: 40px;
  padding: 4px 6px;
  font-size: 11px;
  color: var(--color-gray);
  text-decoration: none;
}
.res-comment-count:hover { color: var(--accent); text-decoration: none; }
.res-comment-count.zero { opacity: .6; }

/* 一句话简介：产品卡信息量最大的一行，最多两行，超出截断 */
.res-summary {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-gray);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.res-attrs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.res-attr {
  font-size: 11px;
  line-height: 1.5;
  padding: 1px 7px;
  border-radius: 4px;
  white-space: nowrap;
  background: var(--field);
  color: var(--color-gray);
}
/* 定价用语义色：配色对与 .message-* 同源，明暗两套的对比度都已验证过 */
.res-price-free { background: var(--teal-soft); color: var(--green); }
.res-price-freemium { background: var(--accent-soft); color: var(--accent); }
.res-price-paid { background: var(--amber-soft); color: var(--amber); }

/* ===== 7. 侧栏 ===== */
#Rightbar .box { margin-bottom: 20px; }
#Rightbar .box:last-child { margin-bottom: 0; }
#Rightbar > .box > .inner { display: flex; flex-direction: column; gap: 12px; }
#Rightbar .inner > .sep10, #Rightbar .inner > .sep5 { display: none; }

.side-title {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--box-foreground-color);
}
#Rightbar .fade { font-size: 14px; font-weight: 600; color: var(--box-foreground-color); }

/* 7a. 侧栏品牌卡：站点主张 + 标语 + 两个动作入口
   （标语「慢一点，发现身边的有趣」原本在顶栏做蓝底胶囊，现移入此处做 pull-quote） */
#Rightbar > .box.brand-card > .inner { gap: 0; }
.brand-card-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--box-foreground-color);
}
.brand-card-sub {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--color-gray);
}
/* 7a-2. 侧栏第一卡（2026-09-20 站长要求）：未登录 = 登录表单，已登录 = 「我的」概览。
   原先这里是「品牌标语 + 三个发布入口」，发布入口已上移到顶栏加号下拉，
   侧栏这块改成「登录后才能干的事」。
   登录按钮沿用软底规则（accent-soft 底 + accent 字）—— .btn-primary 是实底白字，
   暗色主题下 accent 变亮蓝，白字只有 2.53:1，不能用在侧栏这种长期露出的位置。 */
.side-login-form { display: flex; flex-direction: column; gap: 8px; }
.side-login-form input {
  padding: 6px 10px;
  font-size: 13px;
  color: var(--box-foreground-color);
  background-color: var(--field);
  border: 1px solid var(--box-border-color);
  border-radius: 4px;
}
.side-login-form input:focus { outline: none; border-color: var(--accent); }
.side-login-btn {
  justify-content: center;
  color: var(--accent);
  background-color: var(--accent-soft);
  border-color: var(--accent);
}
.side-login-btn:hover { color: var(--accent-deep); background-color: var(--accent-soft); border-color: var(--accent-deep); }
.side-login-links { display: flex; justify-content: space-between; font-size: 12px; }
.side-login-oauth { justify-content: center; font-size: 12px; }

.side-me-head { display: flex; align-items: center; gap: 10px; }
.side-me-avatar { flex: 0 0 auto; border-radius: 4px; }
.side-me-id { display: flex; flex-direction: column; min-width: 0; }
.side-me-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--box-foreground-color);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.side-me-name:hover { color: var(--accent); text-decoration: none; }
.side-me-sub { font-size: 12px; color: var(--color-fade); }
.side-me-bio {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--color-gray);
  word-break: break-word;
}
.side-me-tags { margin-top: -4px; }
.side-me .stat-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
}
.side-me .stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 6px 2px;
  border-radius: 4px;
}
.side-me .stat-item:hover { background-color: var(--box-background-hover-color); text-decoration: none; }
.side-me .stat-item b { font-size: 15px; font-weight: 600; color: var(--box-foreground-color); }
.side-me .stat-item span { font-size: 11px; color: var(--color-fade); }
.side-me .stat-item:hover b { color: var(--accent); }
.side-me-links { font-size: 12px; }

.brand-motto {
  margin: 14px 0 0;
  padding: 9px 12px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--accent);
  background: var(--accent-soft);
  border-left: 2px solid var(--accent);
  border-radius: 0 5px 5px 0;
}

/* 两个入口：竖排等宽卡片，主次靠底色与描边区分，各带一行用途说明。
   主色卡用 accent-soft 底 + accent 文字而非纯色填充 —— 纯色填充在暗色下
   accent 会变成亮蓝，白字对比度掉到 ~2.5:1；这样两套主题都安全。 */
/* 发布内容选择页（/submit）：三项等宽排一行。
   style.css 的 `flex: 1 1 240px` 在 ~700px 容器里放不下三项（3×240 + 2×12 = 744）→ 第三项会单独折行。
   这里改成按剩余空间等分：≥平板宽度一行三列，窄屏（<2×176+gap）仍自动折行。 */
.submit-choices .submit-choice { flex: 1 1 0; min-width: 176px; }

.brand-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
}
.action-card {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 14px;
  background: var(--box-background-color);
  border: 1px solid var(--box-border-color);
  border-radius: 4px;
  transition: border-color .12s;
}
.action-card:hover { border-color: var(--accent); text-decoration: none; }
.action-card-title {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--box-foreground-color);
}
.action-card-desc { font-size: 12px; line-height: 1.5; color: var(--color-fade); }
.action-card:hover .action-card-title { color: var(--accent); }
.action-card.primary { background: var(--accent-soft); border-color: var(--accent); }
.action-card.primary .action-card-title { color: var(--accent); }
.action-card.primary .action-card-desc { color: var(--accent); opacity: .72; }
.action-card.primary:hover { border-color: var(--accent-deep); }

/* 分类 chip 组 */
.chip-group { display: flex; flex-wrap: wrap; gap: 8px; }
.item_node, .node-chip {
  display: inline-block;
  padding: 5px 10px;
  font-size: 12px;
  color: var(--link-blue);
  background: var(--field);
  border: 0;
  border-radius: 4px;
}
.item_node:hover, .node-chip:hover {
  background: var(--box-background-hover-color);
  color: var(--link-blue);
  text-decoration: none;
}

/* 今日热榜 */
.rank-list { display: flex; flex-direction: column; gap: 10px; }
.rank-item { display: flex; gap: 12px; }
.rank-no {
  width: 16px;
  flex: none;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-fade);
}
.rank-item.top .rank-no { color: var(--orange); }
.rank-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rank-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--accent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rank-title:hover { text-decoration: underline; }
.rank-meta { font-size: 11px; color: var(--color-fade); }
.view-all { font-size: 12px; color: var(--accent); }
.view-all:hover { text-decoration: underline; }

/* 兼容：热榜若退化为 table 结构 */
.rank-list .cell { border: 0; padding: 0; }
.rank-list .cell table, .rank-list .cell tbody, .rank-list .cell tr {
  display: flex; align-items: flex-start; gap: 12px;
}
.rank-list .cell td { display: block; width: auto !important; padding: 0; }
.rank-list .cell td:first-child { flex: none; width: 16px !important; }
.rank-list .item_hot_topic_title,
.rank-list .item_hot_topic_title a {
  font-size: 13px;
  font-weight: 500;
  color: var(--accent);
  line-height: 1.5;
}
.rank-list .item_hot_topic_title a:hover { text-decoration: underline; }

/* ===== 8. 详情页 ===== */
.breadcrumb { padding: 16px 28px 0; font-size: 12px; color: var(--color-fade); }
.breadcrumb a { color: var(--color-fade); }
.breadcrumb a:hover { color: var(--accent); text-decoration: none; }
.breadcrumb .chevron { margin: 0 6px; }

.topic-heading {
  font-size: 20px;
  line-height: 1.5;
  font-weight: 600;
  color: var(--box-foreground-color);
  margin: 10px 28px 0;
}
.header h1, .box-header h1, .box-header h2 { font-size: 20px; line-height: 1.5; margin: 0; }
.topic-heading a { color: var(--box-foreground-color); }
.topic-heading a:hover { color: var(--accent); text-decoration: none; }

/* 产品详情的专属字段 */
.resource-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.resource-verdicts { margin-top: 14px; }
.resource-pros, .resource-cons {
  margin: 0 0 8px;
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--color-gray);
}
.resource-pros strong { color: var(--green); }
.resource-cons strong { color: var(--orange); }
.ext-link { color: var(--link-blue); white-space: nowrap; }

.author-row { display: flex; align-items: center; gap: 12px; padding: 16px 28px 0; }
.author-row .avatar-letter { border-radius: 4px; }
.author-meta { font-size: 13px; color: var(--color-gray); line-height: 1.6; }
.author-meta a { color: var(--color-gray); }
.author-meta a:hover { color: var(--accent); }

.hr { height: 1px; background: var(--divider); margin: 16px 0 0; }

/* 操作按钮行（点赞 / 收藏 / 分享） */
.action-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 16px 28px 20px;
}
/* ===== 内联 SVG 图标（2026-09-20）=====
   清单指出「缺少关键功能图标」：举报此前是纯文字、收藏用 ☆ 字符，与其它图形语言不统一。
   这里补一组**内联 SVG**（不引外部图标库：站点没有构建流程，CDN 还会拖首屏）：
   1em 见方 + currentColor，随字号与明暗主题自动适配，无需额外着色。 */
.ico {
  width: 1em;
  height: 1em;
  flex: none;
  vertical-align: -0.125em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ===== 微交互（2026-09-20）=====
   可点元素统一过渡 + 按下轻微缩放，补齐「点了没反馈」。
   ⚠️ 遵循站长既有约定：**不加投影**（box-shadow 一律不用于按钮/卡片）、不用毛玻璃与渐变。
   缩放只给按钮类，不给导航链接与列表行（避免文字抖动）。 */
.act-btn, .like-btn, .bookmark-btn, .upvote-btn, .btn, .super.button, .super.normal.button,
.link-btn, .tabs-share, .action-card, .submit-choice, .tabbar-item {
  transition: background-color .15s ease, color .15s ease, border-color .15s ease,
              transform .1s ease, filter .15s ease;
}
.act-btn:active, .like-btn:active, .bookmark-btn:active, .upvote-btn:active,
.btn:active, .super.button:active, .super.normal.button:active,
.tabs-share:active, .action-card:active, .submit-choice:active {
  transform: scale(.97);
}

.act-btn, .like-btn, .bookmark-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  font-size: 13px;
  font-family: inherit;
  color: var(--color-gray);
  background: var(--field);
  border: 0;
  border-radius: 4px;
  cursor: pointer;
  line-height: 1.4;
}
.act-btn:hover, .like-btn:hover, .bookmark-btn:hover {
  filter: brightness(.96);
  text-decoration: none;
}
.like-btn.is-liked, .act-btn.is-liked {
  background: var(--like-bg);
  color: var(--accent);
  font-weight: 500;
}
.bookmark-btn.is-bookmarked {
  background: var(--like-bg);
  color: var(--accent);
  font-weight: 500;
}
/* 已收藏 → 图标填充（状态由 JS 在 .bookmark-btn 上切 is-bookmarked，这里跟着走，模板无需判断） */
.bookmark-btn.is-bookmarked .ico { fill: currentColor; }
.like-heart { font-size: 11px; }

/* 旧式 .votes 容器（兼容其它模板） */
.votes { display: inline-flex; align-items: center; gap: 10px; }

.detail-actions-secondary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 12px;
  color: var(--color-gray);
}
.detail-tools, .detail-tools a, .detail-tools .link-btn {
  font-size: 12px;
  color: var(--color-gray);
}

/* 正文 */
.detail-body { padding: 20px 28px 24px; }
.topic_content { font-size: 14px; line-height: 24px; color: var(--box-foreground-color); }
.topic_content > p { margin: 0 0 12px; }
.topic_content > p:first-child { margin-top: 0; }
.markdown_body { line-height: 1.85; word-wrap: break-word; overflow-wrap: anywhere; }
.markdown_body p { margin: 0 0 16px; }
.markdown_body p:last-child { margin-bottom: 0; }
.markdown_body h2, .markdown_body h3 { margin: 22px 0 10px; font-size: 16px; }
.markdown_body ul { margin: 0 0 16px; padding-left: 22px; }
.markdown_body li { margin-bottom: 4px; }
.markdown_body blockquote {
  border-left: 3px solid var(--accent);
  background: var(--box-background-alt-color);
  padding: 8px 16px;
  color: var(--color-gray);
  margin: 0 0 16px;
}
.markdown_body code {
  background: var(--field);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 13px;
}
.markdown_body pre {
  background: var(--box-background-alt-color);
  border: 1px solid var(--box-border-color);
  border-radius: 4px;
  padding: 12px 14px;
  overflow-x: auto;
  margin: 0 0 16px;
  font-size: 13px;
  line-height: 1.6;
}
.markdown_body pre code { background: none; padding: 0; }
.markdown_body a { color: var(--link-blue); }
.markdown_body a:hover { text-decoration: underline; }
/* 正文插图（2026-09-20 render_markdown 支持 ![](url) 后才有）：
   与编辑器里的显示一致 —— 不超容器、保持比例。 */
.markdown_body img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 0 16px;
  border-radius: 4px;
}
.detail-image { margin: 16px 0 0; }
.detail-image img { max-width: 100%; border-radius: 4px; display: block; }

/* 评论区 */
.comments .cell { border-bottom: 1px solid var(--divider); }
.replies-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 16px 28px 0;
}
.replies-head h2, .replies-head h3 { font-size: 15px; font-weight: 600; margin: 0; }
.replies-head .gray, .replies-head .sort-link { font-size: 12px; color: var(--color-fade); }

.reply { display: flex; gap: 12px; padding: 14px 28px 0; }
.reply-avatar { flex: none; }
/* 头像尺寸收进 CSS（原为模板内联），AJAX 插入的新评论与首屏共用一份 markup */
.reply .reply-avatar { width: 36px; height: 36px; font-size: 17px; }
.reply-nested .reply-avatar { width: 30px; height: 30px; font-size: 14px; }
.reply-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.reply-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--color-fade);
}
.reply-head strong a, .reply-head a { color: var(--color-gray); font-size: 13px; }
.reply-head a:hover { color: var(--accent); }
.op-badge {
  background: var(--like-bg);
  color: var(--accent);
  font-size: 10px;
  font-weight: 500;
  padding: 1px 6px;
  border-radius: 4px;
}
.reply-body { font-size: 14px; line-height: 24px; color: var(--box-foreground-color); }
.reply-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--link-blue);
}
.reply-actions .link-btn, .reply-actions .mini-like {
  font-size: 12px;
  color: var(--link-blue);
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
}
.reply-actions .link-btn:hover, .reply-actions .mini-like:hover { text-decoration: underline; }
.mini-like.is-liked { color: var(--accent); font-weight: 500; }
.ago, .no { color: var(--color-fade); }

/* 评论行（保留表格结构时的兜底样式） */
.comments .cell table, .comments .cell tbody { display: block; width: 100%; }
.comments .cell tr { display: flex; gap: 12px; }
.comments .cell td { display: block; width: auto !important; }
.comments .cell td:first-child { flex: none; }
.comments .cell .fr { float: right; }

/* 评论输入区：.reply-input 提供外边距，.comment-form 自身不再加内边距
   （resource 详情页把 .comment-form 直接放在 .inner 里，也依赖这一点） */
.reply-input { display: flex; flex-direction: column; gap: 12px; padding: 16px 28px 20px; }
.comment-form { display: flex; flex-direction: column; gap: 12px; padding: 0; margin: 0; }
.comment-form textarea, .reply-input textarea, .input-box {
  width: 100%;
  box-sizing: border-box;
  min-height: 88px;
  border: 1px solid var(--input-border);
  border-radius: 4px;
  padding: 12px;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.7;
  background-color: var(--bg-page);
  color: var(--box-foreground-color);
  resize: vertical;
}
.comment-form textarea:focus, .reply-input textarea:focus {
  border-color: var(--accent);
  background-color: var(--box-background-color);
  box-shadow: var(--ring);
  outline: 0;
}
.input-bottom, .form-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.input-hint { font-size: 12px; color: var(--color-fade); }
.submit-btn {
  background: var(--accent);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  padding: 8px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
}
.submit-btn:hover { background: var(--accent-deep); }
.comment-empty, .comment-guest, .comment-guest-box { color: var(--color-fade); font-size: 13px; }
.comment-guest-box strong { display: block; font-size: 14px; color: var(--box-foreground-color); margin-bottom: 6px; }

/* 相关话题（侧栏） */
.related { display: flex; flex-direction: column; gap: 12px; }
.related a { font-size: 13px; line-height: 20px; font-weight: 500; color: var(--accent); display: block; }
.related a:hover { text-decoration: underline; }
.norm { display: flex; flex-direction: column; gap: 8px; }
.norm-title { font-size: 13px; font-weight: 600; color: var(--box-foreground-color); }
.norm-body { font-size: 12px; line-height: 20px; color: var(--color-gray); }
.norm-body a { color: var(--accent); }

/* 详情页补充：v2 一条式布局下的细节 */
.author-card .avatar-letter,
.reply .avatar-letter { border-radius: 4px; }
.author-name:hover { color: var(--accent); text-decoration: none; }
.detail-link { margin: 16px 0 0; font-size: 13px; }
.detail-link a { color: var(--link-blue); word-break: break-all; }
.detail-owner-actions { padding-top: 0; }
.reply-nested { padding-left: 76px; }
.reply-nested .reply-body { font-size: 13.5px; }

/* 搜索结果分节标题与搜索表单 */
.search-heading { font-size: 15px; font-weight: 600; margin: 0; }
.search-form { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.search-form input[type="text"] { flex: 1; min-width: 200px; }
.search-empty-more { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* 作者卡 */
.author-card { display: flex; flex-direction: column; gap: 10px; }
.big-avatar { flex: none; }
.author-name { font-size: 16px; font-weight: 600; color: var(--box-foreground-color); }
.author-bio { font-size: 13px; line-height: 20px; color: var(--color-gray); }
.author-stats { font-size: 12px; color: var(--color-fade); }
.follow-btn {
  margin-top: 4px;
  background: var(--accent);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  padding: 8px 0;
  border-radius: 4px;
  text-align: center;
  border: none;
  cursor: pointer;
  font-family: inherit;
  width: 100%;
}
.follow-btn:hover { background: var(--accent-deep); color: #fff; text-decoration: none; }

/* ===== 8a. 产品详情（v2.4，2026-09-19） =====
   与帖子详情完全同构：头部（缩略图 + 标题 / 简介 / 属性 + 访问官网）→ 作者行
   → 正文 → 点赞/收藏 → 评论。
   v2.2 照新趣集堆的 Hero 三栏、侧栏「产品信息」卡、点赞用户头像、分享按钮、
   相似推荐卡片网格已全部移除（信息重复，模板比帖子详情重一倍）。
   只保留产品特有的三处：① 一句话简介 ② 属性 chip（定价/类型/门槛）
   ③ 头部右侧的「访问官网」。侧栏与帖子一样是「作者卡 + 相关条目 + 规范」。
   v2.4 头部重排：缩略图移到标题左边、CTA 移到标题右边，读法与列表卡一致
   （图 + 标题 + ↗）。同一张图不再在正文底部重复一遍，改由灯箱看原图。
   CTA 仍是「accent-soft 底 + accent 字 + accent 描边」：实底 `--accent` 在暗色是亮蓝
   #6fa8dc，白字压上去只有 2.53:1；软底两套主题都过 AA。 */

/* 头部三栏：缩略图（定宽） / 标题区（自适应，吃掉剩余宽度） / CTA（定宽） */
.prod-head { display: flex; align-items: flex-start; gap: 14px; padding: 18px 28px 0; }
.prod-head-thumb { flex: none; }
.prod-thumb {
  display: block;
  width: 120px;
  height: 120px;
  box-sizing: border-box;
  border-radius: 4px;
  border: 1px solid var(--box-border-color);
  background: var(--field);
  object-fit: cover;
}
/* 无图时的首字占位块：与有图同尺寸，头部不会因缺图而错位 */
.prod-thumb-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 48px;
  font-weight: 600;
  line-height: 1;
}
/* flex-basis 用 0 而不是 auto：否则基准尺寸按内容算，窄屏会把整块挤到缩略图下面
   （标题就不在缩略图右边了）。给 0 + min-width:0 才能稳定吃掉剩余宽度。 */
.prod-head-main { flex: 1 1 0; min-width: 0; }
/* 标题进了 flex 容器，原来的左右 28px 外边距由 .prod-head 的 padding 统一给 */
.prod-head-main .topic-heading { margin: 0; }
.prod-lead { margin: 6px 0 0; font-size: 15px; line-height: 1.6; color: var(--color-gray); }

/* 属性行：与列表卡片同一套 `.res-attr*`，这里只需要上间距 */
.prod-attrs { margin: 8px 0 0; }

/* ===== Markdown 编辑器（static/js/markdown-editor.js） =====
   脚本把 textarea 包进 .md-editor，前面插工具栏、后面插预览区。
   边框画在外层 .md-editor 上，textarea 自己去掉边框 —— 否则两层边框嵌套很难看。 */
.md-editor {
  border: 1px solid var(--box-border-color);
  border-radius: var(--box-border-radius);
  background-color: var(--field);
  overflow: hidden;
  position: relative; /* 字数统计 .md-counter 定位在编辑区右下角 */
}
.md-editor textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  resize: vertical;
}
.md-editor textarea[hidden] { display: none; }
.md-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  padding: 5px 6px;
  border-bottom: 1px solid var(--box-border-color);
}
.md-spacer { flex: 1 1 auto; }
.md-btn {
  min-width: 28px;
  height: 26px;
  padding: 0 7px;
  font: inherit;
  font-size: 13px;
  line-height: 1;
  color: var(--color-gray);
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color .15s, color .15s;
}
.md-btn:hover { color: var(--accent); background-color: var(--accent-soft); }
.md-btn:active { transform: scale(.97); }
/* 状态按钮的激活态（当前光标处于该格式）：与选中态 tab 同款软底，不用实底 */
.md-btn.is-active { color: var(--accent); background-color: var(--accent-soft); }
.md-sep { width: 1px; height: 18px; margin: 0 4px; background-color: var(--box-border-color); }
/* 字数统计：contenteditable 不吃 maxlength，这里按落库 Markdown 的长度提示 */
.md-counter {
  position: absolute;
  right: 12px;
  bottom: 6px;
  font-size: 11px;
  color: var(--color-fade);
  pointer-events: none;
}
.md-counter.is-over { color: var(--red); }
/* 富文本编辑区（contenteditable）：复用 .markdown_body 的排版，做到所见即所得 ——
   编辑区里的段落 / 列表 / 引用的间距与详情页正文一致。 */
.md-rich {
  min-height: 200px;
  padding: 12px 14px 26px; /* 底部留出字数统计的位置 */
  font-size: 14px;
  color: var(--box-foreground-color);
  background-color: var(--box-background-color);
  outline: none;
  overflow-wrap: break-word;
}
.md-rich:empty::before {
  content: attr(data-placeholder);
  color: var(--color-fade);
}
.md-rich img { max-width: 100%; height: auto; border-radius: 4px; }
/* 拖放图片进来时的落点提示：软底 + 主色虚线，不用投影 */
.md-editor.is-dropping { border-color: var(--accent); }
.md-editor.is-dropping .md-rich { background-color: var(--accent-soft); }
.md-uploading {
  padding: 2px 8px;
  font-size: 12px;
  color: var(--accent);
  background-color: var(--accent-soft);
  border-radius: 4px;
}
/* 源码模式：同一个 textarea 直接编辑 Markdown（工具链故障时也能手写） */
.md-editor .md-source { min-height: 200px; }
.md-source-toggle { border-color: var(--box-border-color); font-size: 12px; }
.md-source-toggle[aria-pressed="true"] {
  color: var(--accent);
  background-color: var(--accent-soft);
  border-color: var(--accent);
}
.md-hint { margin: 6px 2px 0; }

/* 提交页「自动抓取网站截图」：勾选框与标签同行，紧跟在截图上传框下方 */
.field-check { margin-top: -6px; }
.field-check label {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 0;
  font-size: 13px;
  color: var(--box-foreground-color);
  cursor: pointer;
}
.field-check input[type="checkbox"] { margin: 3px 0 0; flex: none; }

/* 发布 / 编辑页：分类与类型全列表单选（RadioSelect）平铺成 chip，不用下拉框。
   Django 的 RadioSelect 在当前版本渲染为 <div id="id_xxx"><div><label><input>... 结构。 */
.field div[id^="id_category"],
.field div[id^="id_resource_type"] {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 2px 0 0;
}
.field div[id^="id_category"] > div,
.field div[id^="id_resource_type"] > div {
  margin: 0;
}
.field div[id^="id_category"] label,
.field div[id^="id_resource_type"] label {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 6px 12px;
  border: 1px solid var(--box-border-color);
  border-radius: 4px;
  background: var(--box-background-color);
  font-size: 13px;
  line-height: 1.4;
  color: var(--box-foreground-color);
  white-space: nowrap;
  cursor: pointer;
}
.field div[id^="id_category"] label:hover,
.field div[id^="id_resource_type"] label:hover {
  border-color: var(--accent);
}
.field div[id^="id_category"] label:has(input:checked),
.field div[id^="id_resource_type"] label:has(input:checked) {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 500;
}
.field div[id^="id_category"] input[type="radio"],
.field div[id^="id_resource_type"] input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* 头部右侧的「访问官网」：产品详情唯一的主动作 */
.prod-head-cta {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  padding-top: 2px;
}
.prod-visit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  border-radius: 4px;
  border: 1px solid var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
  white-space: nowrap;
}
/* hover 只加深描边与文字色，不做实底反转：`--accent-deep` 在暗色反而是亮蓝 #8fbee6，
   白字压上去约 1.7:1，会重犯同一个错。 */
.prod-visit:hover { background: var(--accent-soft); color: var(--accent-deep); border-color: var(--accent-deep); text-decoration: none; }

/* 访问次数：CTA 下方的次要信息，不外链、不抢注意力 */
.prod-visit-count { font-size: 13px; color: var(--color-fade); }

.super.button, .button, button.button {
  border-radius: 4px;
  border: 1px solid var(--box-border-color);
  background: var(--box-background-color);
  color: var(--box-foreground-color);
  font-size: 13px;
  line-height: 1.4;
  padding: 8px 16px;
  font-family: inherit;
  cursor: pointer;
}
.super.button:hover, .button:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.super.normal.button {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 500;
}
.super.normal.button:hover { background: var(--accent-deep); border-color: var(--accent-deep); color: #fff; }
.link-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--link-blue);
  font-size: 12px;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
}
.link-btn:hover { text-decoration: underline; }

.field label, .form-row label { font-size: 13px; color: var(--color-gray); margin-bottom: 6px; display: block; }
.field input[type="text"], .field input[type="email"], .field input[type="password"],
.field input[type="url"], .field input[type="search"], .field textarea, .field select,
input[type="text"], input[type="search"], input[type="url"], input[type="email"],
input[type="password"], input[type="number"], textarea, select {
  border: 1px solid var(--input-border);
  border-radius: 4px;
  padding: 9px 12px;
  font-size: 14px;
  font-family: inherit;
  background: var(--box-background-color);
  color: var(--box-foreground-color);
  box-sizing: border-box;
}
.field input:focus, .field textarea:focus, .field select:focus,
input[type="text"]:focus, input[type="search"]:focus, input[type="email"]:focus,
input[type="password"]:focus, textarea:focus, select:focus {
  border-color: var(--accent);
  box-shadow: var(--ring);
  outline: 0;
}
.help { color: var(--color-fade); }
.error, .errorlist { color: var(--red); }
.errorlist { list-style: none; padding: 0; margin: 6px 0 0; font-size: 12px; }

/* ===== 10. 首屏 hero ===== */
.hero .hero-title { font-size: 19px; font-weight: 600; margin: 4px 0 8px; line-height: 1.5; }
.hero-sub { font-size: 14px; color: var(--color-gray); margin: 0 0 14px; line-height: 1.7; }
.hero-steps { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 16px; }
.hero-step { font-size: 13px; color: var(--color-gray); }
.hero-step strong { color: var(--accent); margin-right: 4px; }
.hero-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* ===== 11. 页脚 ===== */
#Bottom {
  border-top: 1px solid var(--box-border-color);
  background-color: var(--box-background-color);
  padding: 20px 0;
  text-align: left;
}
#Bottom .content { min-width: 0; max-width: 1200px; padding: 0 24px; }
#Bottom .inner { padding: 0; font-size: 13px; line-height: 1.7; color: var(--color-gray); }
#Bottom strong { font-weight: 400; }
#Bottom .snow { color: var(--color-snow); }
#Bottom .dark, #Bottom a { color: var(--color-gray); }
#Bottom a:hover { color: var(--accent); text-decoration: none; }
#Bottom .small { font-size: 12px; }
#Bottom .fade { color: var(--color-fade); }

/* ===== 12. Toast / 回到顶部 / 灯箱 ===== */
.message { border-radius: 4px; font-size: 13px; padding: 10px 14px; border: 1px solid transparent; }
.message-info { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-soft); }
.message-success { background: var(--teal-soft); color: var(--green); }
.message-warning { background: var(--amber-soft); color: var(--amber); }
.message-error { background: var(--hot-bg); color: var(--red); }
.messages { list-style: none; padding: 0; margin: 0 0 12px; display: flex; flex-direction: column; gap: 8px; }
.scroll-top { border-radius: 4px; }
.lightbox img { border-radius: 4px; }
.notif-badge { background: var(--red); }
.notif-badge.is-empty { background: var(--color-snow); color: var(--color-gray); }

/* ===== 12a. 弹窗登录（原生 <dialog>） =====
   与全站一致：2px 圆角、描边代替投影、无渐变。
   宽度对齐独立登录页（422px 内宽 = 420 + 左右各 1px 描边），换主题只跟着 token 走。 */
.login-modal {
  width: min(422px, calc(100vw - 32px));
  padding: 0;
  border: 1px solid var(--box-border-color);
  border-radius: 4px;
  background: var(--box-background-color);
  color: var(--box-foreground-color);
  box-shadow: none;
  margin: auto;
}
.login-modal::backdrop { background: rgba(18, 18, 18, .48); }
.login-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px 12px 20px;
  border-bottom: 1px solid var(--box-border-color);
}
.login-modal-head h2 { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.4; }
.login-modal-x {
  flex: none;
  border: 0;
  background: none;
  cursor: pointer;
  font: inherit;
  font-size: 18px;
  line-height: 1;
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--color-fade);
}
.login-modal-x:hover { color: var(--accent); }
.login-modal-body { padding: 18px 20px 20px; }
.login-modal-body .field:last-of-type { margin-bottom: 0; }
.login-modal-body .form-actions { margin-top: 16px; }
.login-modal-body .small { margin: 0; }

/* ===== 13. 移动端底部导航 ===== */
.tabbar { border-top: 1px solid var(--box-border-color); background: var(--box-background-color); }
.tabbar-item.is-active { color: var(--accent); }

/* ===== 14. 暗色微调 ===== */
/* 分类 chip 的颜色来自模板过滤器（固定 hex），暗色下整体提亮一档 */
[data-theme="dark"] .chip { filter: brightness(1.6) saturate(.9); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .chip { filter: brightness(1.6) saturate(.9); }
}

/* ===== 16. 用户中心 & 表单 ===== */
/* 头部：左侧头像 + 右侧名称/简介/操作，统一紧凑布局（去掉模板里的内联 style） */
.profile-head { display: flex; gap: 14px; align-items: flex-start; }
.profile-head .avatar-img, .profile-head .avatar-letter { flex: none; display: block; border-radius: 6px; }
.profile-head-body { min-width: 0; flex: 1 1 auto; }
.profile-head-body h1 { margin: 0 0 4px; font-size: 20px; font-weight: 600; line-height: 1.3; }
.profile-meta { color: var(--color-gray); font-size: 13px; line-height: 1.7; }
.profile-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }

/* 统计条：替代原来挤在一行的灰色 span */
.profile-stats { display: flex; flex-wrap: wrap; gap: 4px 20px; padding: 11px 16px; border-bottom: 1px solid var(--box-border-color); color: var(--color-gray); font-size: 13px; }
.profile-stats b { color: var(--box-foreground-color); font-weight: 600; }

/* 次级入口导航：编辑资料 / 公开主页 / 草稿 / 足迹 等 */
.profile-nav { display: flex; flex-wrap: wrap; gap: 4px 16px; padding: 11px 16px; border-bottom: 1px solid var(--box-border-color); font-size: 13px; }
.profile-nav a { color: var(--link-blue); }
.profile-nav a:hover { color: var(--accent); text-decoration: none; }

/* 内容切换条：去掉模板里的内联 border-bottom */
.profile-tabs { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px; border-bottom: 1px solid var(--box-border-color); }
.profile-tabs .tab, .profile-tabs .tab_current { margin: 8px 0; }

/* 工具页标题（草稿箱 / 我的足迹 等） */
.page-title { margin: 0 0 4px; font-size: 20px; font-weight: 600; line-height: 1.3; }

/* 内联表单：去掉模板里的 style="display:inline;" */
.inline-form { display: inline; }

/* 通知未读态：浅色底（配合既有的加粗），不做投影 */
.cell.notif-unread { background: var(--accent-soft); }

/* 表单页：字段间距与提示条 */
.form-page .box-inner { padding: 16px; }
.form-page .field { margin-bottom: 14px; }
.form-hint { margin: 0 0 14px; padding: 10px 12px; border: 1px solid var(--box-border-color); border-radius: 4px; background: var(--box-background-alt-color); color: var(--color-gray); font-size: 13px; line-height: 1.6; }
.form-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 4px; }
.form-actions .btn, .form-actions .button, .form-actions .link-btn { margin: 0; }

/* 用户中心窄屏：收窄头像与留白 */
@media (max-width: 560px) {
  .profile-head { gap: 10px; }
  .profile-stats, .profile-nav { gap: 4px 12px; padding-left: 14px; padding-right: 14px; }
  .profile-head-body h1, .page-title { font-size: 18px; }
}

/* ===== 17. 图片缺失占位（附件删除后，帖子/评论里的引用兜底，app.js 替换） ===== */
.img-missing {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-height: 96px;
  padding: 8px 12px;
  box-sizing: border-box;
  border: 1px dashed var(--divider2);
  border-radius: 6px;
  background: var(--box-background-alt-color);
  color: var(--color-fade);
  font-size: 13px;
  line-height: 1.4;
  user-select: none;
}
.img-missing svg { flex: none; opacity: .8; }
/* 头像等小图：仅图标、无文字，尺寸由 JS 按原图写死 */
.img-missing--icon {
  display: inline-flex;
  width: auto;
  min-height: 0;
  padding: 0;
  border-radius: 4px;
  overflow: hidden;
}
.img-missing--icon svg { width: 45%; height: 45%; }

/* ===== 15. 响应式 ===== */
/* 1180 以下：两级导航挤不下，收起导航链接（侧栏仍保持两栏） */
@media (max-width: 1180px) {
  .site-nav .nav-links { display: none; }
}

/* 1024 以下：正文与侧栏改为单列堆叠。
   桌面端靠 float 实现「侧栏先行、右浮动」，DOM 里 #Rightbar 在 #Main 之前；
   窄屏下必须用 flex order 把正文提到前面，否则一进站先看到侧栏。 */
@media (max-width: 1024px) {
  .content { padding: 0 16px; }
  #Wrapper > .content { display: flex; flex-direction: column; }
  #Wrapper > .content > #Leftbar { display: none; }
  #Wrapper > .content > .c { display: none; }
  #Main { order: 1; margin: 0; }
  #Rightbar { order: 2; width: 100%; float: none; margin: 24px 0 0; }
}

@media (max-width: 720px) {
  #search-container { width: 180px; }
  .site-nav { gap: 16px; }
  .site-nav .tools { gap: 12px; }
}

@media (max-width: 560px) {
  #Top { height: 52px; }
  #Top .content { padding: 0 12px; }
  .brand { gap: 8px; }
  .brand #Logo { width: 28px; height: 28px; background-size: auto 28px; }
  .brand-name { font-size: 16px; }
  /* 窄屏收起顶部搜索框（底部导航栏保留「搜索」入口） */
  #search-container { display: none; }
  .site-nav { gap: 10px; }
  .site-nav .tools { gap: 8px; font-size: 13px; flex: none; margin-left: auto; }
  .site-nav .tools .top { padding: 4px 6px; }
  .site-nav .tools .btn-register { padding: 6px 12px; }
  .site-nav .tools .theme-toggle { padding: 4px; }
  .content { padding: 0 12px; }
  #Wrapper { padding: 12px 0 24px; }
  #Tabs { padding: 0 12px; gap: 20px; height: 42px; }
  #SecondaryTabs { padding: 10px 12px; }
  #TagFilter { padding: 10px 12px; }
  .cell { padding: 12px 14px; }
  .inner { padding: 14px; }
  .header { padding: 16px 14px 12px; }
  .topic-row { padding: 10px 14px 10px 12px; gap: 10px; }
  .row-avatar .avatar-letter { width: 38px !important; height: 38px !important; font-size: 17px !important; }
  /* 产品缩略图在窄屏收窄为 64×64 方形，比例与桌面一致（1:1） */
  .row-thumb { width: 64px; height: 64px; }
  .res-thumb-fallback { font-size: 22px; }
   .topic-heading, .header h1, .box-header h1 { font-size: 18px; }
  .breadcrumb, .author-row { padding-left: 14px; padding-right: 14px; }
  /* 产品详情头部：窄屏收窄留白、缩略图扩到 84px（比列表卡大），CTA 换行到标题下方并左对齐
     （`.topic-heading` 的 14px 左右外边距是给帖子详情的，头部里由 .prod-head 统一给） */
  .prod-head { padding: 14px 14px 0; gap: 12px; flex-wrap: wrap; }
  .prod-thumb { width: 84px; height: 84px; }
  .prod-thumb-fallback { font-size: 32px; }
  .prod-head-cta { flex-basis: 100%; align-items: flex-start; padding-top: 2px; }
  .prod-head .topic-heading, .prod-head .prod-lead, .prod-head .prod-attrs {
    margin-left: 0; margin-right: 0;
  }
  .detail-body { padding: 16px 14px 20px; }
  .action-row, .replies-head, .reply, .reply-input, .comment-form {
    padding-left: 14px; padding-right: 14px;
  }
  .reply { gap: 10px; }
  .reply-nested { padding-left: 46px; }
  #Bottom { padding: 18px 0; }
  #Bottom .content { padding: 0 12px; }
  /* 产品卡右侧动作条在窄屏收窄 */
  .row-actions { min-width: 40px; gap: 4px; }
  .upvote-btn { min-width: 36px; padding: 4px 2px; }
  .res-comment-count { font-size: 10px; }
  .rank-no { font-size: 10px; }
}

@media (max-width: 400px) {
  .count-badge { padding: 3px 7px; font-size: 11px; }
  .title-line { gap: 6px; }
  .row-actions { display: none; }  /* 超窄屏隐藏右侧动作条，避免标题空间被挤 */
}