/* ============================================================
   website 主题 · 站点适配层（website-site.css）

   定位与 kimi-site.css 完全一致：
   - website.css 是 shiqu-website/css/common.css 的逐字节复制，
     只描述「原型版面」本身，不允许在这里改写它的规则；
   - 本文件只做一件事：把**全站共用片段**（partials/*）在经典
     皮肤下用到的类名，适配到这套原型样式上，让它们不裸奔。

   共用片段是全站功能的一部分（评论 / 翻页 / 表单 / 头像 / 公告 /
   反馈弹窗），改它们的模板会牵动所有主题，所以这里统一用 CSS 收口。

   配色口径与原型一致：纸面 #fafafa、卡面 #fff、描边 #eee、
   主色 #000、正文 #333、次级 #888/#999、链接 #1565c0、强调 #e65100。
   ============================================================ */

/* ===== 1. 头像（partials/_avatar.html 输出 .avatar-img / .avatar-letter） ===== */
.avatar { overflow: hidden; }
.avatar-img,
.avatar-letter {
  display: block;
  border-radius: 50%;
  object-fit: cover;
}
.avatar-letter {
  color: #fff;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.avatar-anon { background: #bbb !important; }
.nav-avatar { width: 28px; height: 28px; font-size: 12px; }

/* ===== 2. 公告条 / 邮箱提醒（.site-notice） ===== */
.site-notice {
  background: #fff8e1;
  border-bottom: 1px solid #ffe082;
  color: #6d4c1b;
  font-size: 13px;
  padding: 9px 20px;
  text-align: center;
  line-height: 1.6;
}
.site-notice a { color: #e65100; }
.site-notice b { color: #000; }

/* 卡内提示条（注册结果 / 邮件发送失败等）：与 .site-notice 同色系，但不是整页横幅，
   所以自己带圆角、不带 border-bottom。经典皮肤的 .message-warning / .message-error
   在 website 皮肤里没有对应样式，别直接用。 */
.message { font-size: 13px; line-height: 1.7; padding: 10px 14px; border-radius: 8px; margin-bottom: 12px; }
.message-warning { background: #fff8e1; border: 1px solid #ffe082; color: #6d4c1b; }
.message-warning a { color: #e65100; }
.message-error { background: #ffebee; border: 1px solid #ffcdd2; color: #b71c1c; }
.message b { color: #000; }

/* ===== 3. Django messages（base.html 的 .wmsg） ===== */
.wmsg { max-width: 1200px; margin: 16px auto 0; padding: 0 20px; }
.wmsg-item {
  background: #fff;
  border: 1px solid #eee;
  border-left: 3px solid #000;
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 8px;
  font-size: 13px;
  color: #333;
}

/* ===== 4. 通用文本工具（共用片段大量使用） ===== */
.gray { color: #888; }
.small { font-size: 12px; }
.fade { color: #aaa; }
.muted { color: #888; font-size: 13px; }
.empty { padding: 24px 0; text-align: center; font-size: 13px; color: #999; }
.empty a { color: #1565c0; }
.inline-form { display: inline; }
.link-btn {
  background: none;
  border: none;
  padding: 0;
  color: #999;
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
}
.link-btn:hover { color: #1565c0; }
.dot { color: #ccc; }

/* ===== 5. 徽章（列表卡 / 详情页标题行） ===== */
.badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 3px;
  background: #f5f5f5;
  color: #666;
  font-size: 10px;
  font-weight: 500;
  vertical-align: middle;
  white-space: nowrap;
}
.badge-pin { background: #000; color: #fff; }
.badge-featured { background: #e65100; color: #fff; }
.badge-warn { background: #fff3e0; color: #e65100; }
.badge-help { background: #fff3e0; color: #e65100; }
.badge-recommend { background: #e3f2fd; color: #1565c0; }
.badge-solved { background: #e8f5e9; color: #2e7d32; }
.badge-best { background: #e8f5e9; color: #2e7d32; }
.badge-divine { background: #f3e5f5; color: #7b1fa2; }
.hot-tag { background: #e65100; color: #fff; padding: 1px 5px; border-radius: 3px; font-size: 10px; }
.chip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  background: #f5f5f5;
  font-size: 11px;
  color: #666;
}
.title-media { color: #999; }
.title-media svg { width: 13px; height: 13px; vertical-align: -2px; }

/* ===== 6. 卡片与区块（.box 是共用片段的容器基类） ===== */
.box {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 10px;
  margin-bottom: 16px;
  overflow: hidden;
}
.box-header { padding: 18px 20px 0; }
.box-header h1 { font-size: 18px; font-weight: bold; }
.box-inner { padding: 20px; }
.cell { padding: 14px 16px; border-bottom: 1px solid #f5f5f5; }
.cell:last-child { border-bottom: none; }
.hr { height: 1px; background: #f0f0f0; margin: 16px 0; }
.sep5 { height: 5px; }
.sep10 { height: 10px; }
.sep20 { height: 20px; }

/* ===== 7. 详情页结构（面包屑 / 作者行 / 正文 / 操作行） ===== */
.crumb { font-size: 12px; color: #999; padding: 16px 20px 0; line-height: 1.8; }
.crumb a { color: #999; }
.crumb a:hover { color: #1565c0; }
.crumb .chevron { margin: 0 6px; color: #ccc; }
.detail-tools { float: right; }
.detail-tools .link-btn { margin-left: 12px; }
/* 标题与面包屑 / 作者行 / 正文 / 操作栏同列对齐：详情卡已 padding:24px，这些元素都贴内容边，
   标题不再另加水平内边距（早年的 20px 是经典布局 box-header 的口径，website 卡片版会多缩进一截）。 */
.dtitle { font-size: 21px; font-weight: bold; line-height: 1.4; margin: 0; }
.detail > .badge { margin-left: 20px; }
.author-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px 16px;
  font-size: 13px;
  color: #999;
}
.author-meta { line-height: 1.7; }
.author-meta a { color: #333; font-weight: 500; }
.author-meta a:hover { color: #1565c0; }
.ip-region { color: #999; }
.copy-link { cursor: pointer; }
.copy-link:hover { color: #1565c0; }

/* Markdown 正文（website.css 是原型样式，不含 .markdown_body 排版） */
.detail-body { padding: 0 20px 20px; }
.markdown_body { font-size: 15px; line-height: 1.8; color: #333; word-break: break-word; }
.markdown_body p { margin: 0 0 12px; }
.markdown_body h1, .markdown_body h2, .markdown_body h3 { font-size: 16px; font-weight: bold; margin: 18px 0 10px; }
.markdown_body h1 { font-size: 19px; }
.markdown_body h2 { font-size: 17px; }
.markdown_body ul, .markdown_body ol { padding-left: 22px; margin: 0 0 12px; }
.markdown_body li { margin-bottom: 4px; }
.markdown_body a { color: #1565c0; }
.markdown_body blockquote {
  margin: 0 0 12px;
  padding: 8px 14px;
  border-left: 3px solid #e0e0e0;
  background: #fafafa;
  color: #666;
}
.markdown_body code {
  background: #f5f5f5;
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 13px;
}
.markdown_body pre {
  background: #f7f7f7;
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 12px 14px;
  overflow-x: auto;
  margin: 0 0 12px;
}
.markdown_body pre code { background: none; padding: 0; }
.markdown_body img { max-width: 100%; height: auto; border-radius: 8px; }
.markdown_body table { border-collapse: collapse; margin-bottom: 12px; }
.markdown_body th, .markdown_body td { border: 1px solid #eee; padding: 6px 10px; font-size: 14px; }
.detail-image img { max-width: 100%; border-radius: 8px; }
.detail-link a { color: #1565c0; }

/* 产品头（缩略图 + 标题 + 访问官网） */
.prod-head {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 20px 4px;
}
.prod-head-main { flex: 1; min-width: 0; }
.prod-lead { font-size: 13px; color: #888; margin: 6px 0 0; line-height: 1.6; }
.prod-thumb {
  width: 80px; height: 80px;
  border-radius: 12px;
  background: #f5f5f5;
  display: flex; align-items: center; justify-content: center;
  font-size: 32px; color: #fff; font-weight: bold;
  object-fit: cover;
}
.prod-head-cta { text-align: right; flex-shrink: 0; }
.prod-visit {
  display: inline-block;
  background: #000; color: #fff;
  padding: 8px 20px; border-radius: 8px;
  font-size: 13px; white-space: nowrap;
}
.prod-visit-count { display: block; font-size: 12px; color: #999; margin-top: 6px; }
.res-attrs { margin-top: 10px; }
.res-attr {
  display: inline-block;
  background: #000; color: #fff;
  padding: 7px 16px; border-radius: 8px; font-size: 13px;
}

/* 综合评价 */
.verdict-card {
  background: #f9f9f9;
  border-radius: 10px;
  padding: 16px;
  margin: 4px 0 16px;
}
.verdict-head { font-weight: bold; font-size: 14px; margin-bottom: 10px; }
.verdict-row { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: #555; margin-bottom: 6px; }
.verdict-row:last-child { margin-bottom: 0; }
.v-ico {
  background: #fff; border: 1px solid #eee;
  border-radius: 4px; padding: 0 5px; font-size: 11px; color: #888;
}
.v-label { font-weight: 500; color: #333; }

/* 回复可见 */
.gated-block { background: #f9f9f9; border-radius: 10px; padding: 16px; margin: 16px 0; }
.gated-title { font-weight: bold; font-size: 14px; margin-bottom: 10px; }
.code-locked-hint {
  background: #e8eaf6;
  border-radius: 10px;
  padding: 14px 16px;
  margin: 16px 0;
  font-size: 13px;
  color: #5c6bc0;
  line-height: 1.6;
}
.code-locked-hint a { color: #3f51b5; text-decoration: underline; }

/* 操作行（点赞 / 收藏 / 标签 / 作者操作） */
.action-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 20px 16px;
  flex-wrap: wrap;
}
.act-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: #f5f5f5;
  border: none;
  border-radius: 20px;
  font-size: 13px;
  cursor: pointer;
  color: #666;
  font-family: inherit;
  transition: all 0.2s;
}
.act-btn:hover { background: #e8e8e8; color: #333; }
.like-btn.is-liked { background: #e3f2fd; color: #1565c0; }
.bookmark-btn.is-bookmarked { background: #fff8e1; color: #f57c00; }
.act-btn svg { width: 14px; height: 14px; }
.like-heart { font-size: 11px; }
.action-tags { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.detail-owner-actions { padding-top: 0; }
.super.button, .button {
  display: inline-block;
  background: #000; color: #fff;
  padding: 8px 20px; border-radius: 8px;
  font-size: 13px; border: none; cursor: pointer;
  font-family: inherit;
}
.super.button:hover, .button:hover { background: #222; }

/* ===== 8. 评论区（partials/_comments.html + _comment_item.html） ===== */
.replies-head { padding: 4px 20px 0; }
.replies-head h2 { font-size: 16px; font-weight: bold; }
.reply {
  display: flex;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid #f5f5f5;
}
.reply:last-of-type { border-bottom: none; }
.reply-avatar { flex-shrink: 0; }
.reply-main { flex: 1; min-width: 0; }
.reply-head {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 13px;
  margin-bottom: 4px;
}
.reply-head strong a { color: #1565c0; font-weight: 500; }
.reply-head .ago,
.reply-head .ip-region { color: #999; font-size: 12px; }
.reply-head .no { color: #bbb; font-size: 11px; margin-left: auto; }
.reply-head .op-badge { background: #e65100; color: #fff; font-size: 10px; padding: 1px 6px; border-radius: 3px; }
.reply-body { font-size: 14px; line-height: 1.7; color: #333; }
.reply-body p { margin: 0 0 6px; }
.reply-body p:last-child { margin-bottom: 0; }
.reply-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 6px;
  font-size: 12px;
  color: #999;
}
.mini-like, .mini-divine {
  background: none;
  border: none;
  padding: 0;
  font-size: 12px;
  color: #999;
  cursor: pointer;
  font-family: inherit;
}
.mini-like:hover, .mini-divine:hover { color: #e65100; }
.mini-like.is-liked { color: #e65100; }
.mini-divine.is-voted { color: #7b1fa2; }

/* 楼中楼：原型是「左描边 + 缩进」的二级回复区 */
.reply-panel { padding: 0 20px; }
.reply-nested {
  padding: 10px 0 10px 16px;
  border-left: 2px solid #eee;
  border-bottom: none;
}
.reply-nested .reply-avatar { width: 28px; height: 28px; font-size: 12px; }
.reply-list { margin-left: 16px; border-left: 2px solid #eee; }
.reply-list .reply { padding: 10px 0 10px 14px; border-bottom: none; }

/* 评论输入（原型 .comment-input 容器式输入框：描边在外框、textarea 无内边框、底部操作条浅底） */
.reply-input { padding: 16px 20px 20px; }

/* 兜底：未走容器式美化的表单（正常不会出现，保留以防回退）仍给 textarea 独立描边 */
.comment-form:not(.comment-input) textarea,
.comment-form:not(.comment-input) input[type="text"] {
  width: 100%;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 14px;
  font-family: inherit;
  resize: vertical;
  min-height: 80px;
  outline: none;
  box-sizing: border-box;
  background: #fff;
}
.comment-form:not(.comment-input) textarea:focus { border-color: #1565c0; }

/* 容器式输入框：form 自身即外框（website.css 已定义 .comment-input 基础容器），
   这里补 textarea 去内边框 + 聚焦反馈；底部操作条 .comment-input-bar 复用原型浅底样式。 */
.comment-input textarea,
.comment-input input[type="text"] {
  width: 100%;
  border: none;
  display: block;
  padding: 16px;
  font-size: 14px;
  font-family: inherit;
  resize: none;
  min-height: 92px;
  outline: none;
  background: #fff;
  box-sizing: border-box;
}
.comment-input:focus-within { border-color: #bbb; }
/* 底部操作条贴在容器下沿（去掉 .input-bottom 默认的上间距），错误提示插入其上方 */
.comment-input .input-bottom { margin-top: 0; }

/* 回复 @某人 提示条：输入框上方的一枚浅色小胶囊（interactions.js 靠 hidden 切换显隐） */
.reply-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #1565c0;
  background: #e3f2fd;
  border-radius: 8px;
  padding: 6px 12px;
  margin: 0 0 10px;
}
.reply-hint strong { font-weight: 600; }
.reply-hint .link-btn { margin-left: 2px; }

.input-bottom { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.input-hint { font-size: 12px; color: #999; flex: 1; }
.submit-btn {
  background: #000; color: #fff;
  border: none;
  padding: 9px 22px;
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
  display: inline-block;
  transition: background 0.2s;
}
.submit-btn:hover { background: #222; }
.comment-guest-box {
  background: #f9f9f9;
  border-radius: 10px;
  padding: 16px;
  font-size: 13px;
  color: #666;
}
.comment-guest-box strong { display: block; font-size: 14px; margin-bottom: 6px; color: #333; }
.comment-guest-box .submit-btn { margin-top: 10px; margin-right: 10px; }
.comment-empty { text-align: left; }

/* 楼中楼「回复 (n)」折叠开关 + 「再展开 N 条回复」按钮（后者由 interactions.js 现场创建，
   类名固定 .reply-more，必须有样式兜住，否则渲染成浏览器默认按钮） */
.reply-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  padding: 8px 0;
  margin: 8px 0 2px;
  font-size: 12px;
  color: #1565c0;
  cursor: pointer;
  font-family: inherit;
}
/* 楼中楼展开图标（与移动端 <summary> 标记同款）：chevron 折叠朝右、展开旋转 90° 朝下，
   旋转挂 aria-expanded——首屏模板与 interactions.js 现建面板都靠 setPanelExpanded 维护它。 */
.reply-toggle-icon { display: inline-flex; align-items: center; transition: transform 0.2s; }
.reply-toggle-icon .ifi { width: 12px; height: 12px; }
.reply-toggle[aria-expanded="true"] .reply-toggle-icon { transform: rotate(90deg); }
.reply-more {
  display: block;
  width: 100%;
  text-align: left;
  background: #f7f7f7;
  border: none;
  border-radius: 8px;
  padding: 8px 12px;
  margin-top: 8px;
  font-size: 12px;
  color: #1565c0;
  cursor: pointer;
  font-family: inherit;
}
.reply-more:hover { background: #eef4fb; }

/* ===== 9. 翻页（partials/_pagination.html） ===== */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 20px 16px;
  border-bottom: none;
  font-size: 13px;
}
.pagination a,
.pagination span {
  padding: 6px 12px;
  border-radius: 4px;
  color: #666;
}
.pagination a:hover { background: #f5f5f5; }
.page-current { background: #000; color: #fff; }
.page-prev, .page-next { color: #666; }
.is-disabled { color: #ccc; }
.page-gap { color: #ccc; }

/* ===== 10. 表单（_form_fields.html / _content_form.html / 登录 / 设置） ===== */
.form-page { max-width: 720px; margin: 0 auto; }
/* 404 页「也许你在找」链接：website 全局 a 为 color:inherit，这里显式给链接色 */
.notfound-links a { color: #1565c0; }
.notfound-links a:hover { text-decoration: underline; }
.field { margin-bottom: 16px; }
.field label {
  display: block;
  font-size: 13px;
  color: #666;
  margin-bottom: 6px;
}
.field input[type="text"],
.field input[type="email"],
.field input[type="password"],
.field input[type="tel"],
.field input[type="url"],
.field input[type="number"],
.field select,
.field textarea {
  width: 100%;
  max-width: 480px;
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 14px;
  outline: none;
  box-sizing: border-box;
  font-family: inherit;
  background: #fff;
  color: #333;
}
.field textarea { height: 80px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: #1565c0; }
.field input[disabled] { background: #f5f5f5; color: #999; }
.field-check { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.field-check input { width: auto; }
.field.has-error input,
.field.has-error textarea,
.field.has-error select { border-color: #c62828; }
.help { font-size: 11px; color: #999; margin-top: 4px; }
.error { font-size: 12px; color: #c62828; margin-top: 4px; }
.form-hint { font-size: 12px; color: #888; margin-bottom: 16px; line-height: 1.6; }
.form-actions { display: flex; align-items: center; gap: 10px; margin-top: 20px; flex-wrap: wrap; }
.btn {
  display: inline-block;
  padding: 9px 22px;
  border-radius: 8px;
  font-size: 13px;
  border: none;
  cursor: pointer;
  font-family: inherit;
  text-align: center;
}
.btn-primary { background: #000; color: #fff; }
.btn-primary:hover { background: #222; }
.btn-ghost { background: #fff; color: #333; border: 1px solid #ddd; }
.btn-ghost:hover { border-color: #bbb; }
.btn-soft { background: #000; color: #fff; padding: 9px 22px; border-radius: 8px; border: none; cursor: pointer; font-family: inherit; font-size: 13px; }
.btn-ghost2 { background: #fff; color: #333; border: 1px solid #ddd; padding: 6px 14px; border-radius: 6px; font-size: 12px; cursor: pointer; font-family: inherit; }
.linklike { background: none; border: none; padding: 0; color: #1565c0; cursor: pointer; font-family: inherit; }

/* ===== 11. 提建议弹窗（partials/_feedback_button.html） ===== */
.feedback-dialog {
  border: none;
  border-radius: 12px;
  padding: 0;
  width: 420px;
  max-width: 92vw;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
}
.feedback-dialog::backdrop { background: rgba(0, 0, 0, 0.35); }
.feedback-dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #f0f0f0;
}
.feedback-dialog-head h2 { font-size: 16px; font-weight: bold; }
.feedback-dialog-x {
  background: none; border: none; font-size: 20px;
  color: #999; cursor: pointer; line-height: 1; padding: 0 4px;
}
.feedback-dialog-body { padding: 20px; }
.feedback-hint { font-size: 12px; color: #888; margin-bottom: 14px; }
.feedback-fab { display: none; }

/* ===== 12. 举报入口 / 上下篇导航 ===== */
.sp-report { color: #bbb; }
.sp-report:hover { color: #c62828; }
.seq-nav { display: flex; justify-content: space-between; gap: 12px; padding: 0 20px 4px; font-size: 12px; color: #999; }
.seq-nav a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seq-nav a:hover { color: #1565c0; }

/* ===== 13. 侧栏补充（原型 .side-card 之外的共用片段） ===== */
.side-title { font-size: 14px; font-weight: bold; margin-bottom: 10px; }
.related a, .names a { display: block; font-size: 13px; line-height: 2; color: #333; }
.related a:hover, .names a:hover { color: #1565c0; }
.norm-body, .norm-title { font-size: 12px; color: #999; line-height: 1.6; }
.norm-title { font-weight: bold; color: #666; margin-bottom: 6px; }
.author-card { text-align: center; padding: 20px; }
.author-card .avatar-img,
.author-card .avatar-letter { margin: 0 auto 10px; }
.author-name { display: block; font-weight: bold; font-size: 15px; color: #333; }
.author-bio { display: block; font-size: 12px; color: #999; margin: 4px 0; }
.author-stats { display: block; font-size: 12px; color: #999; margin-bottom: 14px; }
.follow-btn, .btn-outline {
  display: inline-block;
  background: #fff; color: #333;
  border: 1px solid #ddd;
  padding: 8px 16px; border-radius: 8px;
  font-size: 13px; cursor: pointer;
  font-family: inherit;
}
.follow-btn:hover, .btn-outline:hover { border-color: #bbb; }

/* ===== 14. 设置页 / 通知中心（共用片段 .setnav / .ntabs） ===== */
.setnav { padding: 8px 0; }
.setnav .sn {
  display: block;
  padding: 10px 16px;
  font-size: 14px;
  color: #666;
}
.setnav .sn.current { font-weight: bold; background: #f5f5f5; color: #000; }
.setnav .sn:hover { background: #fafafa; }
.ntabs { display: flex; gap: 20px; border-bottom: 1px solid #eee; padding: 0 20px; font-size: 14px; }
.ntabs a { padding: 12px 0; color: #666; }
.ntabs a.on { font-weight: bold; color: #000; box-shadow: inset 0 -2px 0 #000; }
.ntabs .unread { background: #e65100; color: #fff; font-size: 10px; padding: 1px 6px; border-radius: 8px; margin-left: 4px; }
.notif-head {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 12px 20px; font-size: 12px; color: #999;
  border-bottom: 1px solid #f5f5f5;
}
.nlist { padding: 0; }
.ngroup { padding: 12px 20px 6px; font-size: 12px; color: #999; background: #fafafa; }
.notif-item { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid #f5f5f5; }
.notif-item.unread { background: #fffdf7; }
.notif-ico {
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #f5f5f5; color: #888; font-size: 13px; flex-shrink: 0;
}
.notif-ico.like { background: #fff3e0; color: #e65100; }
.notif-ico.reply { background: #e3f2fd; color: #1565c0; }
.notif-ico.follow { background: #e8f5e9; color: #2e7d32; }
.notif-body { flex: 1; min-width: 0; font-size: 14px; }
.notif-body .t1 { line-height: 1.6; }
.notif-body .t1 a { color: #1565c0; font-weight: 600; }
.notif-body .t2 { font-size: 12px; color: #999; margin-top: 4px; }
.notif-dot { width: 8px; height: 8px; border-radius: 50%; background: #e65100; flex-shrink: 0; }

/* ===== 15. 简单列表（profile / user_page 的 .simple-list） ===== */
.simple-list { list-style: none; padding: 0; margin: 0; }
.simple-item {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 12px 20px;
  border-bottom: 1px solid #f5f5f5;
  font-size: 14px;
}
.simple-item:last-child { border-bottom: none; }
.simple-item.is-muted { opacity: 0.55; }
.simple-item a { color: #333; font-weight: 500; }
.simple-item a:hover { color: #1565c0; }
.simple-item .small { margin-left: auto; }

/* ===== 16. 内联 SVG 图标（.ico） =====
   全站图标都是内联 SVG（举报 / 收藏 / 复制链接 / 编辑器工具栏），靠 .ico 收尺寸。
   ⚠️ 这条缺失时 SVG 会按浏览器默认的 300×150 渲染 —— 表现就是「图标错位、撑爆一行」
   （产品 / 资源详情页的举报图标就是这样歪的）。原型 CSS 里没有 .ico，必须在这里补。 */
.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;
}
/* Iconfont 实心图标（.ifi）：内联自 iconfont.cn 合集 cid=54632，
   路径硬编码的 fill="#333333" 已剥离，改由 .ifi 的 fill:currentColor 跟随文字色，
   支持深色模式与链接色。⚠️ 与 .ico 的描边不同，这里是实心填充、无描边。 */
.ifi {
  width: 1em;
  height: 1em;
  flex: none;
  vertical-align: -0.125em;
  fill: currentColor;
  stroke: none;
}
/* 已收藏 / 已点赞这类「实心」态：靠 fill 与描边区分，不改尺寸 */
.is-bookmarked .ico,
.is-liked .ico { fill: currentColor; }
/* 顶栏/菜单图标与同行文字的右间距（2026-10-13 替换原 emoji 顶栏/菜单图标用）。
   .ico 自带 vertical-align 已对齐基线，这里只补右侧留白，避免图标贴字。 */
.mi { margin-right: 6px; }
/* 举报图标与文字基线对齐：图标本身不占行高，靠 flex 居中 */
.sp-report { display: inline-flex; align-items: center; gap: 3px; }

/* ===== 17. Markdown 编辑器（static/js/markdown-editor.js 注入的结构） =====
   脚本把 textarea 包进 .md-editor，前面插工具栏、后面插富文本区。
   边框画在外层，textarea 自己去掉边框 —— 否则两层边框嵌套很难看。
   口径照原型 compose.html：描边 #ddd、圆角 8px、工具栏底色 #fafafa。 */
.md-editor {
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
  position: relative; /* 字数统计 .md-counter 定位在右下角 */
}
.md-editor textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  border: 0;
  border-radius: 0;
  background: transparent;
  resize: vertical;
}
.md-editor textarea[hidden] { display: none; }
.md-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  padding: 8px 12px;
  border-bottom: 1px solid #eee;
  background: #fafafa;
}
.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: #888;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.md-btn:hover { color: #000; background: #f0f0f0; }
.md-btn:active { transform: scale(0.97); }
.md-btn.is-active { color: #000; background: #eee; }
.md-sep { width: 1px; height: 18px; margin: 0 4px; background: #eee; }
.md-counter {
  position: absolute;
  right: 12px;
  bottom: 8px;
  font-size: 11px;
  color: #999;
  pointer-events: none;
}
.md-counter.is-over { color: #e65100; }
.md-rich {
  min-height: 240px;
  padding: 14px 14px 30px; /* 底部留出字数统计的位置 */
  font-size: 14px;
  line-height: 1.7;
  color: #333;
  background: #fff;
  outline: none;
  overflow-wrap: break-word;
}
.md-rich:empty::before { content: attr(data-placeholder); color: #bbb; }
.md-rich img { max-width: 100%; height: auto; border-radius: 4px; }
.md-editor.is-dropping { border-color: #000; }
.md-editor.is-dropping .md-rich { background: #fafafa; }
.md-uploading {
  padding: 2px 8px;
  font-size: 12px;
  color: #e65100;
  background: #fff3e0;
  border-radius: 4px;
}
/* 源码模式：同一个 textarea 直接手写 Markdown（工具链故障时的兜底入口） */
.md-editor .md-source { min-height: 240px; padding: 14px; font-family: inherit; }
.md-source-toggle { border: 1px solid #ddd; border-radius: 6px; font-size: 12px; padding: 3px 8px; background: #fff; cursor: pointer; }
.md-source-toggle[aria-pressed="true"] { color: #fff; background: #000; border-color: #000; }
.md-hint { margin: 6px 2px 0; font-size: 12px; color: #999; }

/* ===== 18. 顶部头像下拉菜单 / 未登录入口 =====   发布按钮的下拉是纯 :hover（原型写法），头像这里额外给一条透明「桥」，
   否则鼠标从头像移到菜单的 8px 间隙里会失焦、菜单闪没。 */
.avatar-wrap { position: relative; display: inline-flex; align-items: center; }
.avatar-wrap::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 8px;
}
.avatar-menu {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 8px;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  min-width: 168px;
  overflow: hidden;
  z-index: 60;
}
.avatar-wrap:hover .avatar-menu,
.avatar-wrap.is-open .avatar-menu { display: block; }
.avatar-menu-head {
  padding: 10px 14px;
  font-size: 12px;
  color: #999;
  border-bottom: 1px solid #f5f5f5;
  white-space: nowrap;
}
.avatar-menu-item {
  display: block;
  padding: 10px 14px;
  font-size: 13px;
  color: #333;
  background: transparent;
  border: 0;
  width: 100%;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
}
.avatar-menu-item:hover { background: #f5f5f5; }
.avatar-menu-item.is-danger { color: #c62828; }
.avatar-menu-item.is-danger:hover { background: #ffebee; }

/* 未登录态：头像位换成「登录 / 注册」两个入口（2026-10-13）。
   原型没有这套，按原型的纸面口径自造：登录是文字链，注册是黑药丸（与 .publish-btn 同形）。
   ⚠️ 别用空 .avatar 占位 —— 那会渲染成一个灰圈，看着像头像加载失败。 */
.auth-btns { display: flex; align-items: center; gap: 8px; flex: none; }
.auth-btns .top-login {
  font-size: 13px;
  color: #666;
  padding: 5px 10px;
  border-radius: 6px;
  white-space: nowrap;
}
.auth-btns .top-login:hover { color: #000; background: #f5f5f5; }
.auth-btns .top-register {
  font-size: 12px;
  color: #fff;
  background: #000;
  padding: 6px 14px;
  border-radius: 6px;
  white-space: nowrap;
}
.auth-btns .top-register:hover { background: #222; }

/* 发布按钮 + 下拉（2026-10-14 站长反馈：下移鼠标下拉一闪就没 + 按钮点不动）。
   原型 website.css 里 .publish-dropdown 有 margin-top:6px 空隙，鼠标从按钮往下移到选项时
   会经过这段「无人区」→ 丢 .publish-wrap:hover → 下拉 display:none 一闪消失。
   ⚠️ 命中桥放在**按钮的 ::after**，不要放 .publish-dropdown::before —— 下拉有 overflow:hidden，
   负 top 的伪元素会被裁掉、根本不命中。按钮 ::after 是 .publish-wrap 悬停子树的一部分，
   经过空隙时 :hover 不丢；空隙上下沿与下拉顶边相接，无第二处断点。 */
.publish-btn { position: relative; text-decoration: none; }
.publish-btn::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 6px; /* 与 .publish-dropdown 的 margin-top:6px 等宽，正好填满空隙 */
}
/* 键盘可达：焦点进入发布区时展开下拉（此处按钮是跳 /submit 的链接、没有点击切换态，
   :focus-within 不会和「点了不收」打架——不同于经典皮肤 is-open 那套，故这里可安全使用）。 */
.publish-wrap:focus-within .publish-dropdown { display: block; }

/* ===== 19. 发布页（发帖 / 分享产品 / 分享资源） =====
   照原型 compose.html：主列是 680px 卡片，控件是 1px #ddd + 8px 圆角的大输入框。 */
.compose-title { font-size: 20px; margin: 0 0 16px; }
.compose .form-hint {
  margin: 0 0 20px;
  font-size: 13px;
  color: #888;
  line-height: 1.7;
}
.field { margin-bottom: 16px; }
.field > label {
  display: block;
  font-size: 13px;
  color: #666;
  margin-bottom: 6px;
}
.field input[type="text"],
.field input[type="url"],
.field input[type="email"],
.field input[type="password"],
.field input[type="number"],
.field select,
.field textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  color: #333;
  background: #fff;
  outline: none;
}
.field input:focus,
.field select:focus,
.field textarea:focus { border-color: #999; }
/* 编辑器自己带边框（.md-editor），里面的 textarea 不能再画一层 */
.field .md-editor textarea { border: 0; }
.field input[type="file"] {
  width: 100%;
  box-sizing: border-box;
  font-size: 13px;
  color: #666;
  padding: 8px 0;
}
.field .help { margin: 6px 0 0; font-size: 12px; color: #999; line-height: 1.6; }
.field .error { margin: 6px 0 0; font-size: 12px; color: #c62828; }
.field.has-error > label { color: #c62828; }
/* 复选框行：原型「发布设置」里那种「勾选框 + 说明」同行 */
.field-check { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: #666; }
.field-check input { margin: 2px 0 0; }
.field-check label { display: inline; }
/* 分类：下拉 / 单选都平铺成原型那种圆角芯片 */
.cat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.cat-chips li { margin: 0; }
.cat-chips label {
  display: inline-block;
  margin: 0;
  padding: 6px 14px;
  border-radius: 16px;
  font-size: 13px;
  color: #333;
  background: #f5f5f5;
  cursor: pointer;
  user-select: none;
}
.cat-chips label:hover { background: #ebebeb; }
.cat-chips label.is-on { background: #000; color: #fff; }
.cat-chips input[type="radio"],
.cat-chips input[type="checkbox"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
/* 分类下拉被 JS 转成芯片后，原 select 保留参与提交但不可见 */
.field-cat select.is-chipped {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}
/* 「求助 / 求推荐」单选：与分类同一套芯片外形，去掉默认列表符号 */
.help-type-choices { list-style: none; padding: 0; margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.help-type-choices li { margin: 0; }
.help-type-choices label {
  display: inline-block;
  margin: 0;
  padding: 6px 14px;
  border-radius: 16px;
  font-size: 13px;
  background: #f5f5f5;
  cursor: pointer;
}
.help-type-choices label:has(input:checked) { background: #000; color: #fff; }
/* 底部操作条：发布 / 存草稿 靠左，取消靠右（原型版式） */
.compose-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
}
.compose-actions .spacer { flex: 1 1 auto; }
.compose-actions .cancel { font-size: 13px; color: #999; }
.compose-actions .cancel:hover { color: #333; }
/* 本机草稿恢复提示条（static/js/ux.js 动态插入，模板里没有，样式必须预置） */
.draft-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: 0 0 16px; padding: 10px 12px;
  background: #fff8e1; border: 1px solid #ffe0b2; border-left: 3px solid #e65100;
  border-radius: 8px; font-size: 13px; color: #795548;
}
.draft-clear {
  font: inherit; font-size: 12px; cursor: pointer; flex: none;
  background: #fff; color: #888; border: 1px solid #ddd; border-radius: 6px; padding: 4px 10px;
}
.draft-clear:hover { color: #c62828; border-color: #c62828; }

/* ===== 20. 登录 / 注册单卡（原型 login.html 的 420px 居中卡） =====
   手机号与验证码并入卡内（不再另起一块挂 border-top），靠这组分段控件切换。 */
.login-mode {
  display: flex;
  gap: 4px;
  margin: 0 0 18px;
  padding: 3px;
  background: #f5f5f5;
  border-radius: 8px;
}
.login-mode-btn {
  flex: 1;
  padding: 7px 0;
  font: inherit;
  font-size: 13px;
  color: #888;
  background: transparent;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}
.login-mode-btn.is-on { background: #fff; color: #000; font-weight: bold; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06); }
.login-pane.is-hidden { display: none; }
/* 获取验证码按钮与验证码输入框同行，不能被 .field 的 width:100% 拉到换行 */
.field .js-send-code { flex: none; white-space: nowrap; }
.sms-msg { margin: 6px 0 0; font-size: 12px; color: #e65100; }

/* ===== 21. 文档型单页（关于 / 社区规范 / 隐私说明 / App 下载） =====
   2026-10-13 起正文由后台「单页内容」维护，是 render_markdown 输出的 HTML：
   `## 标题` → <h2>、`- 列表` → <ul>、`> 引用` → <blockquote>。
   所以这里按**标签名**收口（.doc-body h2），不再依赖模板里手写的 .doc-h2。
   口径：卡面 #fff、正文 14px/1.9、小标题带 1px 底边。 */
.doc-lede { font-size: 13px; color: #888; margin: 0 0 20px; }
.doc-body p { font-size: 14px; line-height: 1.9; color: #444; margin: 0 0 10px; }
.doc-body ul,
.doc-body ol { margin: 0 0 12px; padding-left: 20px; font-size: 14px; line-height: 1.9; color: #444; }
.doc-body li { margin-bottom: 4px; }
.doc-body a { color: #1565c0; }
.doc-body h2 {
  font-size: 16px;
  margin: 26px 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #f0f0f0;
}
.doc-body h2:first-child { margin-top: 0; }
.doc-body blockquote {
  margin: 0 0 12px;
  padding: 8px 14px;
  border-left: 3px solid #eee;
  background: #fafafa;
  font-size: 13px;
  color: #666;
}
.doc-body pre {
  margin: 0 0 12px;
  padding: 12px 14px;
  background: #fafafa;
  border: 1px solid #eee;
  border-radius: 8px;
  overflow: auto;
  font-size: 13px;
  line-height: 1.7;
}
.doc-body code {
  background: #f5f5f5;
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 13px;
}
.doc-body pre code { background: transparent; padding: 0; }
/* App 下载页的「更新内容」标题仍是模板手写的（走 .doc-h2 + .no 序号） */
.doc-h2 {
  font-size: 16px;
  margin: 26px 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #f0f0f0;
}
.doc-h2 .no { display: inline-block; min-width: 28px; color: #e65100; font-size: 13px; }
.doc-updated { font-size: 12px; color: #999; margin-top: 24px; }
.value-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.value-card {
  flex: 1 1 180px;
  background: #fafafa;
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 14px;
}
.value-card h3 { font-size: 14px; margin: 0 0 6px; }
.value-card p { font-size: 12px; color: #888; line-height: 1.7; margin: 0; }
/* 目录：窄屏时不再 sticky，避免盖住正文 */
.doc-toc { font-size: 13px; line-height: 2.1; }
.doc-toc .t { font-size: 12px; color: #999; margin-bottom: 6px; }
.doc-toc a { display: block; color: #666; }
.doc-toc a:hover { color: #1565c0; }
.doc-toc a.on { color: #000; font-weight: bold; }
/* 日报 / 周报：分区标题沿用原型列表页那种小号灰标题 */
.digest-label { font-size: 13px; font-weight: bold; color: #999; margin: 20px 0 8px; }
.digest-label .tab-count { color: #e65100; font-weight: normal; }
.digest-nav { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 14px; }
.digest-nav .page-prev,
.digest-nav .page-next { font-size: 13px; color: #1565c0; }
.digest-nav .page-current { font-size: 13px; color: #333; font-weight: bold; }
.digest-nav .is-disabled { color: #bbb; }

/* ===== 22. 小屏兜底（原型 CSS 没有断点，这里只做最基本的降级） ===== */
@media (max-width: 900px) {
  .two-col { flex-direction: column; }
  .side-col { width: 100%; }
  .topnav-inner { flex-wrap: wrap; }
  .nav-links { order: 3; }
  .search { order: 4; flex: 1 1 100%; text-align: left; }
  .search input { width: 100%; }
}

/* ===== 23. 搜索建议下拉（search-suggest.js 填充）=====
   2026-10-13 补充：此前网站皮肤不加载 style.css/v2.css，缺 .search-suggest 样式，
   且模板缺 #search-form / #search-container id，导致 JS 顶部直接 return、下拉永不出现。
   现已在 templates/website/base.html 补齐 DOM 契约（#search-container 包住表单与下拉框），
   这里给出与网站「黑白极简」风格一致的样式。
   定位：.search 容器 position:relative，下拉贴在其下方，水平居中、宽度跟随但不撑破视口。 */
.search { position: relative; }
.search-suggest {
  position: absolute;
  z-index: 60;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  width: min(360px, 92vw);
  max-height: 340px;
  overflow-y: auto;
  box-sizing: border-box;
  padding: 4px;
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .10);
  text-align: left;
}
.search-suggest[hidden] { display: none; }
.search-suggest .ss-loading { padding: 8px 10px; font-size: 12px; color: #999; }
.search-suggest .ss-item {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 7px 10px;
  font-size: 13px;
  line-height: 1.4;
  color: #333;
  text-decoration: none;
  border-radius: 12px;
}
.search-suggest .ss-item:hover,
.search-suggest .ss-item.is-active {
  background: #f5f5f5;
  color: #000;
  text-decoration: none;
}
/* 「直接搜索 xxx」：button 元素，需去按钮默认样式，并与上方建议项之间加分隔线 */
.search-suggest .ss-direct {
  width: 100%;
  background: none;
  border: 0;
  border-top: 1px solid #eee;
  border-radius: 0 0 14px 14px;
  margin-top: 2px;
  padding-top: 8px;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.search-suggest .ss-direct .ss-type { color: #999; }
.search-suggest .ss-direct:hover .ss-type,
.search-suggest .ss-direct.is-active .ss-type { color: #000; }
.search-suggest .ss-type {
  flex: 0 0 auto;
  font-size: 11px;
  color: #999;
}
.search-suggest .ss-item.is-active .ss-type { color: #000; }
.search-suggest .ss-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ===== 24. 标签输入（partials/_tag_input.html + static/js/tag-input.js） =====
   原型 compose.html 里没有标签控件，website.css 自然也没有对应规则，
   而共用片段在所有皮肤下都会渲染它 —— 之前在 website 皮肤下是**裸奔**状态
   （输入框没边框、chip 挤成一团、建议项没有可点的样子）。
   这里按原型的控件口径补齐：1px #ddd 描边 + 8px 圆角 + 14px 胶囊 chip。
   注意 .field input[type="text"] 会给框内输入框套满宽描边，下面统一用
   .tag-input 前缀提高优先级压掉。 */
.tag-input { max-width: 100%; }
.tag-input .tag-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #fff;
}
.tag-input .tag-chips:focus-within { border-color: #999; }
.tag-input .tag-chips [data-tag-field] {
  flex: 1 1 140px;
  min-width: 140px;
  width: auto;
  border: 0;
  border-radius: 0;
  padding: 2px 0;
  background: transparent;
  font-size: 14px;
  color: #333;
}
.tag-input .tag-chips [data-tag-field]:focus { border: 0; }
.tag-input .tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px 4px 10px;
  border-radius: 14px;
  background: #f5f5f5;
  color: #333;
  font-size: 13px;
  line-height: 1.4;
}
.tag-input .tag-chip-x {
  border: 0;
  background: none;
  padding: 0 2px;
  font: inherit;
  line-height: 1;
  color: #999;
  cursor: pointer;
}
.tag-input .tag-chip-x:hover { color: #c62828; }
/* ⚠️ 别给 .tag-suggest 设 display：它初始带 hidden 属性，
   一旦这里写了 display，UA 的 [hidden]{display:none} 就被压掉，建议区会一直露着。 */
.tag-input [hidden] { display: none !important; }
.tag-input .tag-suggest {
  margin-top: 8px;
  font-size: 12px;
  color: #999;
}
.tag-input .tag-suggest-list { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.tag-input .tag-suggest-item {
  font: inherit;
  font-size: 12px;
  padding: 4px 10px;
  border: 1px dashed #ddd;
  border-radius: 14px;
  background: #fff;
  color: #666;
  cursor: pointer;
}
.tag-input .tag-suggest-item:hover {
  border-style: solid;
  border-color: #999;
  color: #333;
}
/* 已有标签用实线描边区分（引导复用，不要再造一个近义标签） */
.tag-input .tag-suggest-item.is-existing { border-style: solid; border-color: #ddd; color: #333; }
.tag-input .tag-suggest-flag {
  margin-left: 5px;
  padding: 0 4px;
  border-radius: 3px;
  background: #f5f5f5;
  color: #999;
  font-size: 10px;
}
.tag-input .tag-suggest-hint { margin: 8px 0 0; font-size: 12px; color: #999; }
.tag-input .tag-suggest-hint .tag-suggest-item { margin-left: 6px; }
.tag-input .tag-input-error { margin: 8px 0 0; font-size: 12px; color: #c62828; }
.tag-input .help { margin: 8px 0 0; font-size: 12px; color: #999; line-height: 1.7; }

/* ===== 25. 广告位 + 激活欢迎层（共用片段 partials/_ad_slot.html / _welcome_layer.html） =====
   这两块是**功能**，不是版面装饰：website 皮肤此前没引这两个片段（首页右栏没广告位、
   激活落地页不弹欢迎层），而样式也只写在 v2.css 里。片段补进 website/list.html 后，
   这里按纸面口径（1px #eee 描边 + 8px 圆角 + 灰字）补齐样式。 */
.adslot {
  display: block;
  margin-bottom: 16px;
  border: 1px solid #eee;
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}
.adslot-hit { display: block; transition: opacity .15s ease; }
.adslot-hit:active { opacity: .82; }
.adslot-img { display: block; width: 100%; height: auto; object-fit: contain; }
/* 没上传图片时的虚线占位：运营先开位看排版，图片后补 */
.adslot-ph {
  display: flex; align-items: center; justify-content: center;
  min-height: 120px; padding: 20px;
  color: #bbb; font-size: 13px; letter-spacing: .05em;
  background: #fff;
  border: 1px dashed #eee;
  border-radius: 8px;
}
.adslot-cap {
  margin: 0; padding: 8px 10px;
  font-size: 12px; line-height: 1.5; color: #999;
  border-top: 1px solid #eee;
}

/* 激活成功欢迎层：<dialog> 默认不显示，由片段里的脚本 showModal() 打开，
   所以这里必须自己给尺寸 / 边框 / 居中（margin:auto 是 dialog 居中的标准写法）。 */
.welcome-layer {
  width: min(422px, calc(100vw - 32px));
  padding: 0;
  border: 1px solid #eee;
  border-radius: 8px;
  background: #fff;
  color: #333;
  box-shadow: none;
  margin: auto;
}
.welcome-layer::backdrop { background: rgba(18, 18, 18, .48); }
.welcome-layer-head { display: flex; align-items: center; gap: 10px; padding: 18px 20px 0; }
.welcome-layer-head h2 { margin: 0; font-size: 19px; font-weight: 700; line-height: 1.3; }
.welcome-layer-badge {
  flex: none;
  padding: 2px 10px;
  border: 1px solid #e65100;
  border-radius: 999px;
  background: #fff3e0;
  color: #e65100;
  font-weight: 700;
  font-size: 13px;
}
.welcome-layer-text { margin: 10px 20px 0; font-size: 14px; line-height: 1.7; color: #888; }
.welcome-layer-actions { display: flex; gap: 10px; flex-wrap: wrap; padding: 16px 20px 20px; }
.welcome-layer-actions .btn { margin: 0; }

/* ===== 26. 个人标签 / 作品集（共用片段 partials/_profile_extras.html） =====
   个人中心与公开主页都引这个片段，website 皮肤此前没引（作品集无处可看），
   补引后这里按纸面口径给它样式：片段用的是经典皮肤那套 .inner / .side-title /
   .chip-group / .item_node，本皮肤没有对应规则，不补就是一堆裸文本。 */
.profile-extras.card,
.profile-extras {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 10px;
  padding: 16px 20px;
  margin-bottom: 16px;
}
.profile-extras .side-title {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #333;
  margin-bottom: 8px;
}
.profile-extras .chip-group { display: flex; flex-wrap: wrap; gap: 8px; }
.profile-extras .item_node {
  display: inline-block;
  padding: 5px 10px;
  font-size: 12px;
  color: #1565c0;
  background: #f5f5f5;
  border: 0;
  border-radius: 4px;
  text-decoration: none;
}
.profile-extras .item_node:hover { background: #ebebeb; text-decoration: none; }
.profile-extras .simple-list { margin: 0; }

/* ===== 27. 设置页头像专用块（website/config/settings.html） =====
   与经典皮肤同结构：预览 + 「选择图片」按钮 + 「恢复默认头像」勾选。
   原生 file input 收成不可见（用 label[for] 触发），但**不能** display:none 之外
   再用 visibility —— 测试与可访问性都要求它真实存在于 DOM 且可聚焦触发。 */
.avatar-field { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.avatar-field-preview { flex: none; }
.avatar-field-body { flex: 1 1 auto; min-width: 0; }
.avatar-field-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.avatar-field-actions input[type="file"] {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; border: 0;
  opacity: 0;
  pointer-events: none;
}
.avatar-reset { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: #999; cursor: pointer; }
.avatar-reset input[type="checkbox"] { width: auto; margin: 0; }

/* ===== 28. 设置页 / 通知中心的 columns 骨架 =====
   website.css 是原型复制件，没有经典皮肤那套 .columns / .side / .setnav / .sn，
   而设置页与通知中心是**三列 / 两列**结构（左导航 + 主表单 [+ 右栏统计]），
   共用片段 partials/_notif_nav.html 也按这套类名写。这里补齐布局，不动画面。
   注意：定宽与吸顶写在各自模板的页内 <style>（行为层随页面走），这里只给骨架。 */
.columns { display: flex; gap: 24px; align-items: flex-start; }
.side { flex: none; }
.side-rail { flex: none; }
.setnav { background: #fff; border: 1px solid #eee; border-radius: 10px; padding: 8px 0; }
.setnav .sn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  font-size: 14px;
  color: #666;
  text-decoration: none;
}
.setnav .sn:hover { background: #fafafa; color: #333; }
.setnav .sn.current { font-weight: bold; background: #f5f5f5; color: #000; }
.setnav .sn.sn-danger { color: #e65100; }
.setnav .sn .mi { flex: none; }
/* 通知中心左栏（partials/_notif_nav.html 输出 .scard / .msg-nav / .pref-row）与分组 */
.scard { background: #fff; border: 1px solid #eee; border-radius: 10px; }
.scard .inner { padding: 14px 16px; }
.card-head .t { font-size: 14px; font-weight: 600; color: #333; }
.msg-nav { display: flex; flex-direction: column; margin-top: 8px; }
.msg-nav .mnl {
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 13px;
  color: #666;
  text-decoration: none;
}
.msg-nav .mnl:hover { background: #fafafa; color: #333; }
.msg-nav .mnl.current { background: #f5f5f5; color: #000; font-weight: bold; }
.msg-nav .mnl .c {
  margin-left: 6px; padding: 0 6px; border-radius: 8px;
  background: #e65100; color: #fff; font-size: 10px;
}
.pref-row { display: flex; align-items: flex-start; gap: 8px; padding: 8px 0; cursor: default; }
.pref-row input[type="checkbox"] { width: auto; margin: 2px 0 0; }
.pref-row .tx { font-size: 12px; color: #666; line-height: 1.6; }
.pref-row .tx b { display: block; color: #333; font-size: 13px; }
.btn-soft {
  display: inline-block; padding: 6px 10px; border-radius: 6px;
  background: #f5f5f5; color: #666; font-size: 12px; text-decoration: none;
}
.btn-soft:hover { background: #ebebeb; color: #333; }
/* 通知分组（.ngroup 标题 + .nlist 容器） */
.ngroup { font-size: 12px; color: #999; padding: 12px 0 6px; }
.nlist { border-top: 1px solid #f0f0f0; }

/* §29 标签页订阅按钮（config/tag.html 复用经典契约 class .sub-btn / .is-on） */
.sub-btn { transition: background-color .15s ease, color .15s ease; }
.sub-btn:hover { background: rgba(50, 104, 145, .08); }
.sub-btn.is-on {
  background: rgba(50, 104, 145, .1);
  border-color: #326891;
  color: #326891;
  font-weight: 600;
}

/* ===== 30. 发布选择页（website/config/submit.html 三选卡） ===== */
.submit-page { max-width: 680px; margin: 48px auto; padding: 0 20px; }
.submit-page-title { font-size: 22px; font-weight: bold; margin-bottom: 6px; color: #000; }
.submit-page-desc { font-size: 13px; color: #888; line-height: 1.6; margin-bottom: 24px; }
.submit-choices { display: flex; flex-direction: column; gap: 12px; }
.submit-choice {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  border: 1px solid #eee;
  border-radius: 12px;
  background: #fff;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.submit-choice:hover,
.submit-choice:focus-visible {
  border-color: #000;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  transform: translateY(-1px);
  outline: none;
}
.submit-choice-icon {
  flex: none;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f5f5;
  border-radius: 10px;
  color: #000;
}
.submit-choice-icon .ifi { width: 22px; height: 22px; }
.submit-choice:hover .submit-choice-icon { background: #000; color: #fff; }
.submit-choice-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.submit-choice-body strong { font-size: 15px; font-weight: 600; color: #000; }
.submit-choice-desc { font-size: 12px; color: #888; line-height: 1.5; }
.submit-choice-arrow { flex: none; color: #ccc; display: inline-flex; }
.submit-choice-arrow .ifi { width: 18px; height: 18px; }
.submit-choice:hover .submit-choice-arrow { color: #000; }

/* ===== 31. 等级页（interactions/level.html 的 level-* 进度 / 经验 / 阶梯） ===== */
/* 经典模板在 website 基底下 box/form-page 已有样式，但 level-* 一套类没有适配，
   进度条会塌成看不见、徽章变纯文本、阶梯表无框——这里补齐（黑白极简口径）。 */
.level-line { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.level-badge {
  flex: none;
  background: #000;
  color: #fff;
  font-size: 13px;
  font-weight: bold;
  padding: 4px 12px;
  border-radius: 8px;
}
.level-progress {
  flex: 1;
  min-width: 120px;
  height: 8px;
  background: #f0f0f0;
  border-radius: 999px;
  overflow: hidden;
}
.level-progress-fill {
  display: block;
  height: 100%;
  background: #000;
  border-radius: 999px;
  transition: width 0.3s ease;
}
.level-num { flex: none; font-size: 13px; color: #666; font-weight: 600; min-width: 42px; text-align: right; }

/* 经验获取规则列表 */
.level-xp-list { list-style: none; margin: 0 0 12px; padding: 0; }
.level-xp-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid #f5f5f5;
  font-size: 13px;
  color: #333;
}
.level-xp-list li:last-child { border-bottom: none; }
.level-xp-num { color: #e65100; font-weight: 600; font-variant-numeric: tabular-nums; }

/* 升级阶梯表 */
.level-ladder { width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: 12px; }
.level-ladder th,
.level-ladder td { padding: 9px 12px; text-align: left; border-bottom: 1px solid #f0f0f0; }
.level-ladder th { font-size: 12px; color: #999; font-weight: 500; background: #fafafa; }
.level-ladder td { color: #333; }
.level-ladder tbody tr:last-child td { border-bottom: none; }
.level-ladder tr.is-current td { background: #fff8e1; font-weight: 600; }
.level-ladder tr.is-current td:first-child { color: #e65100; }

/* ===== 32. 举报表单（website/reports/form.html） ===== */
.report-page { max-width: 640px; margin: 48px auto; padding: 0 20px; }
.report-page-title { font-size: 22px; font-weight: bold; color: #000; margin-bottom: 6px; }
.report-page-desc { font-size: 13px; color: #888; line-height: 1.6; margin-bottom: 20px; }

/* 被举报内容预览盒 */
.report-target-box {
  background: #f9f9f9;
  border: 1px solid #eee;
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 24px;
}
.report-target-label { font-size: 12px; color: #999; margin-bottom: 6px; }
.report-target-title { display: block; font-size: 14px; color: #000; margin-bottom: 4px; }
.report-target-snippet { font-size: 13px; color: #666; line-height: 1.6; }

/* 表单字段 */
.report-field { margin-bottom: 20px; }
.report-label { display: block; font-size: 13px; color: #333; font-weight: 500; margin-bottom: 8px; }
.report-field textarea {
  width: 100%;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 14px;
  font-family: inherit;
  resize: vertical;
  min-height: 72px;
  outline: none;
  box-sizing: border-box;
  background: #fff;
}
.report-field textarea:focus { border-color: #bbb; }

/* 举报原因：可点选 radio-pill（input 隐藏，样式落在 span 上） */
.report-reasons { display: flex; flex-wrap: wrap; gap: 8px; }
.radio-pill { cursor: pointer; }
.radio-pill input { position: absolute; opacity: 0; width: 0; height: 0; }
.radio-pill span {
  display: inline-block;
  padding: 7px 14px;
  border: 1px solid #e0e0e0;
  border-radius: 999px;
  background: #fff;
  font-size: 13px;
  color: #666;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  user-select: none;
}
.radio-pill:hover span { border-color: #bbb; color: #333; }
.radio-pill input:checked + span { background: #000; border-color: #000; color: #fff; font-weight: 500; }
.radio-pill input:focus-visible + span { outline: 2px solid #1565c0; outline-offset: 2px; }

.report-actions { display: flex; align-items: center; gap: 12px; }

/* ===== 33. 列表/聚合卡 meta 行小图标（全量替代 emoji 👤👍💬） ===== */
/* website.css 的 .post-meta 是 flex；把作者 / 赞 / 评论的 emoji 换成内联 SVG：
   跨平台渲染一致（部分 Windows 配置 emoji 会变方框）、屏幕阅读器不朗读 emoji、暗色不串色。
   .ifi 为 fill:currentColor，颜色随文字继承；这里只定尺寸与间距。 */
.meta-ico { display: inline-flex; align-items: center; gap: 4px; }
.meta-ico .ifi { width: 13px; height: 13px; flex: none; }
/* 帖子/产品/资源详情页操作栏：图标略大，对齐原 emoji 观感 */
.action-btn .ifi { width: 15px; height: 15px; }
.post-meta .meta-ico .ifi { color: #999; }
.post-meta .right { display: inline-flex; align-items: center; gap: 12px; }

/* ===== 35. 列表卡「神评论」置顶条（2026-10-19 新增；2026-10-23 v2 扁平紫底；2026-10-23 v3 editorial pull-quote） =====
   v2 问题：虽拆了徽标/正文/作者三层，但整段浅紫底嵌在独立白卡片里，
            三个紫色元素（底+左缘+徽标）分散注意力，正文只有 12px 单行 ellipsis，
            神评内容的"质量感"出不来。
   v3（本版）：editorial pull-quote（杂志引言）风。
   - 背景：极浅灰 → 白渐变，和父卡片白底统一，用细描边 + 装饰引号建层级
   - 紫色只留两处锐利点缀：左缘 3px 引导条（::after）+ 右上角实心徽标（角标感）
   - 正文：13px + 两行 ellipsis，给内容呼吸；meta 移到底部，票数紫 + 作者灰
   - 微互动：hover 时左缘 3px→4px、徽标紫发光、描边微提 + 入场淡入
   模板不动（v3 的 DOM 结构和 v2 相同，纯 CSS 重新布局）。 */
.post-divine {
  position: relative;
  display: block;
  margin: 10px 0 0;
  padding: 12px 68px 10px 18px;
  background: linear-gradient(180deg, #fafafa 0%, #ffffff 100%);
  border: 1px solid #eee;
  border-radius: 10px;
  overflow: hidden;
  font-size: 13px;
  line-height: 1.55;
  color: #333;
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
  animation: divine-in 0.4s ease-out both;
}

/* 左上大号装饰引号（::before）：衬底装饰，声明"这是别人说的一条好评论"
   淡紫 #e8d5f2 而非品牌紫，避免和真正的品牌色（引导条/徽标）抢戏 */
.post-divine::before {
  content: "\201C";
  position: absolute;
  top: -6px;
  left: 4px;
  font-size: 48px;
  line-height: 1;
  color: #e8d5f2;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  pointer-events: none;
  user-select: none;
}

/* 左缘 3px 紫色引导条（::after）：唯一的锐利品牌色点，承担"神评"识别感
   hover 时从 3px → 4px 微互动，让整卡 hover 感有层次感 */
.post-divine::after {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 3px;
  background: #7b1fa2;
  border-radius: 2px;
  transition: width 0.18s ease;
}

/* 徽标：absolute 到右上角，像"精选角标"——脱离正文 flow，不占位不抢阅读
   加 box-shadow 增强它作为品牌点缀的存在感 */
.post-divine .badge-divine {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 2px 10px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  border-radius: 4px;
  background: #7b1fa2;
  color: #fff;
  box-shadow: 0 1px 3px rgba(123, 31, 162, 0.22);
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}

/* 正文：从 v2 单行 ellipsis → 两行 ellipsis，给神评内容更多呼吸
   z-index 1 确保文本在装饰引号之上，不被其遮挡 */
.post-divine-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  color: #2d2d2d;
  line-height: 1.55;
  position: relative;
  z-index: 1;
}
/* v2 的小开引号已被大号装饰引号替代，这里关掉避免重复 */
.post-divine-text::before { content: none; }

/* meta 行：从 inline-flex（挤在右侧）改为底部一行，
   用 flex 让票数和作者自然左右排列，中间 gap 拉开 */
.post-divine-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  font-size: 11px;
  color: #999;
  position: relative;
  z-index: 1;
}
.post-divine-votes {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: #7b1fa2;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.post-divine-votes .ifi { width: 11px; height: 11px; }
.post-divine-author {
  color: #aaa;
  font-size: 11px;
  white-space: nowrap;
}

/* hover 微互动链：左缘扩粗 → 徽标发光 + 微浮 → 描边微紫 + 细阴影 */
.post-item:hover .post-divine {
  border-color: #e8d5f2;
  background: #ffffff;
  box-shadow: 0 2px 10px rgba(123, 31, 162, 0.07);
}
.post-item:hover .post-divine::after { width: 4px; }
.post-item:hover .post-divine .badge-divine {
  box-shadow: 0 2px 7px rgba(123, 31, 162, 0.32);
  transform: translateY(-1px);
}

/* 入场动效：列表加载时每张神评淡入 + 微上浮 */
@keyframes divine-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ===== 36. 首页列表视觉精修（2026-10-23 · 网页设计师 skill 优化） =====
   原型 website.css 的 .post-item 是裸列表（border-bottom 分割）、.sort-tabs active 是粗黑下划线、
   .cat-row active 是全黑底——这些都在原型里，不能改原型，所以在这里用更高优先级覆盖，
   让首页列表卡有独立卡片感、排序 tab 有胶囊下划线、分类 chip 有统一主题色。 */

/* 36.1 列表卡：从 border-bottom 裸列表 → 独立卡片带细描边 + hover 抬起 */
.post-item {
  display: block;
  color: inherit;
  padding: 18px 22px;
  border: 1px solid #eee;
  border-radius: 12px;
  margin-bottom: 12px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  position: relative;
  background: #fff;
}
.post-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06), 0 2px 6px rgba(0, 0, 0, 0.04);
  border-color: #e6e6e6;
}

/* 36.2 post-title hover 微交互：颜色过渡 + 轻微右移 + 渐显下划线 */
.post-title { transition: color 0.18s ease, transform 0.18s ease; position: relative; display: inline-block; }
.post-item:hover .post-title { color: #1565c0; transform: translateX(2px); }
.post-item:hover .post-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  height: 2px;
  width: 100%;
  background: #1565c0;
  border-radius: 1px;
  animation: title-underline-in 0.22s ease forwards;
}
@keyframes title-underline-in {
  from { transform: scaleX(0); transform-origin: left; }
  to   { transform: scaleX(1); transform-origin: left; }
}

/* 36.3 sort-tabs：原型 active 是粗黑下划线 + 粗体；这里补 hover 态过渡、active 用主题紫胶囊下划线 */
.sort-tabs a {
  transition: color 0.18s ease, font-weight 0.18s ease;
  position: relative;
  padding-bottom: 10px;
}
.sort-tabs a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 3px;
  border-radius: 2px;
  background: #326891;
  transform: scaleX(0);
  transition: transform 0.22s ease;
}
.sort-tabs a.active { font-weight: 600; color: #326891; border-bottom: none; }
.sort-tabs a.active::after { transform: scaleX(1); }
.sort-tabs a:hover { color: #326891; }
.sort-tabs a:hover::after { transform: scaleX(0.5); }

/* 36.4 cat-row：原型 active 是全黑底白字；这里统一主题紫 + 圆角 14px + hover 微缩放 */
.cat-row a {
  transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.cat-row a:hover { background: #eee; transform: translateY(-1px); }
.cat-row a.active {
  background: #326891;
  color: #fff;
  font-weight: 500;
  box-shadow: 0 2px 6px rgba(50, 104, 145, 0.22);
}

/* 36.5 紧凑列表作用域（2026-10-24）：个人主页 / tag 页恢复原型的分隔线列表。
   这两页的信息密度需求和首页不同（首页要"逛"，这两页要"扫"），卡片化反而拖慢扫读；
   且它们的 .post-item 和首页同在 .main-col.card 下，类名无法区分，
   所以在模板容器上显式挂 list-compact 作作用域，选择器层级更高，覆盖 §36.1/§36.2。 */
.list-compact .post-item {
  padding: 14px 0;
  border: none;
  border-bottom: 1px solid #f5f5f5;
  border-radius: 0;
  margin-bottom: 0;
  background: transparent;
}
.list-compact .post-item:hover {
  transform: none;
  box-shadow: none;
  border-bottom-color: #f5f5f5;
}
/* 标题 hover 只保留原型的变色，去掉 §36.2 的位移与下划线动画 */
.list-compact .post-item:hover .post-title { transform: none; }
.list-compact .post-item:hover .post-title::after { content: none; }

/* ===== 34. 随便看看 · 随机漫游入口（discover.html 的 .wander-cta） ===== */
.wander-cta {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  margin-bottom: 16px;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 12px;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.wander-cta:hover,
.wander-cta:focus-visible {
  border-color: #000;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  transform: translateY(-1px);
  outline: none;
}
.wander-cta-icon {
  flex: none;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  color: #fff;
  border-radius: 10px;
}
.wander-cta-icon .ifi { width: 22px; height: 22px; }
.wander-cta-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.wander-cta-text strong { font-size: 15px; font-weight: 600; color: #000; }
.wander-cta-sub { font-size: 12px; color: #888; }
.wander-cta-go { flex: none; color: #ccc; display: inline-flex; }
.wander-cta-go .ifi { width: 18px; height: 18px; }
.wander-cta:hover .wander-cta-go { color: #000; }

/* ===== 17. 社区化提案 v3（2026-10-25）：社区脉搏条 / 本周活跃增强 / 作者卡统计 / 回复卷首规线 =====
   配色：站长 2026-10-25 确认「严格照搬提案 09-30 色板」——灰度用 #5a5a5a / #9a9a9a / #121212、
   链接蓝 #0067c0（与全站现行 #1565c0 不同，是本组件刻意按提案走的）。唯一保留偏离：在线绿仍用
   AA 达标的 #2e7d32（提案 #2f9e44 仅 3.4:1，12px 小字不达标，check_contrast 会拦截发布）。 */

/* 等宽数字工具类（脉搏条 / 作者卡统计的数字列共用） */
.mono { font-family: ui-monospace, SFMono-Regular, "Cascadia Mono", Menlo, Consolas, monospace; }

/* —— 社区脉搏条：贴在顶栏下的白条（提案 v3 ①；配色严格照搬 09-30 色板）——
   灰度 #5a5a5a / #9a9a9a / #121212、链接蓝 #0067c0；在线绿保留 AA 达标的 #2e7d32
   （提案画的 #2f9e44 仅 3.4:1，12px 小字不达标，check_contrast 会拦）。 */
.pulse { background: #ffffff; border-bottom: 1px solid #ececea; }
.pulse-in {
  max-width: 1200px; margin: 0 auto; padding: 7px 20px;
  display: flex; align-items: center; gap: 24px;
  font-size: 12px; color: #5a5a5a; line-height: 1.6;
}
.pulse-in b { color: #121212; font-weight: 700; }
.pulse-live { color: #2e7d32; }
.pulse-live b { color: #2e7d32; }
.pulse-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: #2e7d32; margin-right: 5px; vertical-align: 1px;
}
.pulse-sep { color: #ececea; }
.pulse-latest { margin-left: auto; color: #9a9a9a; }
.pulse-latest:hover { color: #0067c0; }

/* —— 「本周活跃」头像堆叠：白描边环防止头像之间粘成一团（提案 v3 ②）—— */
.wk-crowd { display: flex; margin-bottom: 12px; }
.wk-crowd > * { margin-left: -8px; }
.wk-crowd > *:first-child { margin-left: 0; }
.wk-crowd .avatar-img, .wk-crowd .avatar-letter { border: 2px solid #ffffff; }
/* 头像溢出计数芯片（提案 v3 ②：露出社区面孔，超出部分用 +N 收口） */
.wk-more-ava {
  flex: none; box-sizing: border-box; width: 32px; height: 32px; border-radius: 50%;
  background: #f2f2f0; color: #5a5a5a; font-size: 11px; font-weight: 700;
  border: 2px solid #ffffff; display: flex; align-items: center; justify-content: center;
}
/* 本周活跃名字 + 发帖/回复数（提案 v3 ②：名字加粗链接蓝、数字等宽链接蓝） */
.wk-list { font-size: 12px; line-height: 2.1; }
.wk-row { display: flex; align-items: baseline; gap: 8px; }
.wk-name { color: #121212; font-weight: 600; }
.wk-name:hover { color: #0067c0; }
.wk-meta { margin-left: auto; font-size: 11px; color: #5a5a5a; white-space: nowrap; }
.wk-num {
  color: #0067c0; font-weight: 700;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* —— 作者卡数据行：发帖 / 获赞 / 注册（提案 v3 ③，替代原「注册于」单行）—— */
.author-stat-row {
  display: flex; justify-content: center; gap: 16px;
  font-size: 11px; color: #9a9a9a; margin: 10px 0 14px;
}
.author-stat-row b { display: block; font-size: 15px; color: #121212; text-align: center; }

/* —— 回复区卷首规线（提案 v3 ④）：2px 发丝线压在「N 条回复」标题上方 —— */
.replies-rule { border-top: 2px solid #ececea; padding-top: 14px; margin-top: 8px; }

/* ===== 18. 顶栏高亮对齐提案 v3（2026-10-25）：照搬 09-30 色板，覆盖 website.css 原型 =====
   原型 .nav-links a.active 是「黑字 + 2px 黑下划线」；提案（画板 A 顶栏）是浅蓝胶囊：
   #326891 文字 + #e9f0f6 底 + 600，圆角 4px。品牌印章 / 搜索框也按提案同款上色。 */
.nav-links { gap: 2px; }
.nav-links a {
  padding: 6px 12px;
  font-size: 13px;
  color: #5a5a5a;
  border-radius: 4px;
  border-bottom: 0;            /* 覆盖原型 2px 黑下划线 */
}
.nav-links a:hover { color: #326891; }
.nav-links a.active {
  color: #326891;
  background: #e9f0f6;
  font-weight: 600;
  border-bottom: 0;
}
/* 品牌印章：普鲁士蓝（提案 .brand .seal；并恢复 MEMORY 记载的 logo「识」#326891 约定） */
.logo-icon { background: #326891; border-radius: 6px; }
/* 搜索框：提案 .top-right input —— #f2f2f0 底 + #e0e0e0 边 + 6px 圆角（非胶囊） */
.search input {
  background: #f2f2f0;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
}
.search input::placeholder { color: #9a9a9a; }

/* ===== 19. 全站主视觉对齐提案 v3（2026-10-25）：09-30 普鲁士蓝色板，覆盖 website.css 原型 =====
   原型是 2026-10-20/21 改的「冷灰白+纯黑」基因；提案（画板 A/B/C）是更早的 09-30 实况，
   用普鲁士蓝 #326891 + 暖灰 #f7f7f5 + 链接蓝 #0067c0 + 橙红 #c7593e。站长确认严格照搬，
   故把全站主视觉回落到提案色板：卡片 6px/发丝线 #ececea、激活态蓝、标签蓝字、点赞橙红。 */
/* 页面底色：暖灰 #f7f7f5（提案 body） */
body { background: #f7f7f5; }

/* 卡片：10px→6px、#eee→#ececea（提案 .scard/.card） */
.card,
.side-card { border: 1px solid #ececea; border-radius: 6px; }
.side-card { padding: 16px 18px; }

/* 排序 Tab 激活态：黑下划线 → 普鲁士蓝下划线（提案 .tabs a.on） */
.sort-tabs { border-bottom: 1px solid #ececea; }
.sort-tabs a { color: #5a5a5a; }
.sort-tabs a:hover { color: #326891; }
.sort-tabs a.active { color: #326891; font-weight: 700; border-bottom: 2px solid #326891; }

/* 分类标签：黑胶囊 → 链接蓝字 + 4px（提案 .chip-row a） */
.cat-row a { background: #f2f2f0; color: #0067c0; border-radius: 4px; padding: 4px 11px; }
.cat-row a:hover { background: #e9f0f6; }
.cat-row a.active { background: #326891; color: #fff; }

/* 面包屑：#999 → #9a9a9a（提案 .crumb） */
.breadcrumb { color: #9a9a9a; }

/* 帖子标题 hover：普鲁士蓝（提案 .row-title:hover） */
.post-item:hover .post-title { color: #326891; }

/* 主按钮：纯黑 → 普鲁士蓝（提案 .btn-solid） */
.btn-primary { background: #326891; border-radius: 6px; }
.btn-primary:hover { background: #24506f; }

/* 次按钮：对齐提案 .btn-ghost2 */
.btn-outline { color: #5a5a5a; border: 1px solid #e0e0e0; border-radius: 6px; }
.btn-outline:hover { border-color: #326891; color: #326891; }

/* 帖子操作栏：白底描边 + 4px（提案 .act）；点赞态橙红（提案 .act.liked #c7593e） */
.action-btn {
  background: #fff; border: 1px solid #e0e0e0; border-radius: 4px; color: #5a5a5a;
}
.action-btn:hover { background: #f2f2f0; color: #333; }
.action-btn.liked { background: #fdf3ef; color: #c7593e; }
.action-btn.liked:hover { background: #fbe9e3; }

/* ===== 37. 提案 v3 全站组件复刻（2026-10-25 · 完全对齐 design/proposal-community-v3.html 画板 A/B/C） =====
   在 §17/§18/§19 已落地的主视觉（暖灰底 / 6px 卡片 / 普鲁士蓝激活 / 面包屑 / 操作栏）之上，
   补齐提案其余组件：方形头像、蓝色翻页、侧栏标题、介绍卡、热榜橙红印章号、热门趣处 chips、
   列表行回复数徽标、标签统一蓝字 chip、详情正文 / 隐藏内容盒 / 楼主标记。
   不引入提案之外的颜色；无投影 / 渐变（与提案自检一致）。 */

/* 37.1 头像：圆形 → 提案方形（大号 6px，小号 4px）；提案色阶显式兜底 */
.avatar-img,
.avatar-letter { border-radius: 6px; }
.reply-avatar,
.avatar-letter[style*="28px"],
.avatar-letter[style*="32px"] { border-radius: 4px; }
.ava.a-1 { background: #326891; } .ava.a-2 { background: #24506f; } .ava.a-3 { background: #2f9e44; }
.ava.a-4 { background: #c29b40; } .ava.a-5 { background: #b22222; } .ava.a-6 { background: #5a5a5a; }

/* 37.2 翻页：黑底 → 提案普鲁士蓝（.pager a.on） */
.page-current { background: #326891; border-color: #326891; }
.pagination a:hover { background: #f5f5f3; }

/* 37.3 侧栏标题：提案 .shead（13px/700，与正文拉开层级） */
.side-card h4,
.shead { font-size: 13px; font-weight: 700; margin: 0 0 12px; color: #121212; display: flex; justify-content: space-between; align-items: baseline; }
.side-card h4 a,
.shead small { font-size: 11px; color: #9a9a9a; font-weight: 400; }
.side-card h4 a,
.shead small a { color: #326891; }

/* 37.4 介绍卡：提案 .hero（白卡 / 6px / 标题 17px·800 / 描述 13px / 有序步骤 / CTA） */
.hero { background: #fff; border: 1px solid #ececea; border-radius: 6px; padding: 20px 24px; margin-bottom: 14px; }
.hero h2 { font-size: 17px; font-weight: 800; margin: 0 0 8px; }
.hero .desc { font-size: 13px; color: #5a5a5a; line-height: 1.7; margin: 0; }
.hero ol { list-style: none; margin: 12px 0; display: flex; flex-direction: column; gap: 7px; padding: 0; }
.hero li { display: flex; gap: 8px; font-size: 13px; color: #5a5a5a; align-items: baseline; }
.hero li i { font-style: normal; flex: none; width: 18px; height: 18px; background: #f2f2f0; border-radius: 4px; font-family: ui-monospace, Consolas, monospace; font-size: 11px; display: flex; align-items: center; justify-content: center; color: #5a5a5a; }
.hero .cta { display: flex; gap: 10px; margin-top: 4px; }
.hero .btn-solid.lg { height: 36px; padding: 0 20px; font-size: 13px; font-weight: 600; color: #fff; background: #326891; border: 0; border-radius: 6px; display: inline-flex; align-items: center; transition: transform .12s ease, background .15s ease; }
.hero .btn-solid.lg:active { transform: scale(.97); }
.hero .btn-solid.lg:hover { background: #24506f; }
.hero .btn-ghost2 { height: 36px; padding: 0 18px; font-size: 13px; color: #5a5a5a; background: transparent; border: 1px solid #e0e0e0; border-radius: 6px; display: inline-flex; align-items: center; }
.hero .btn-ghost2:hover { color: #326891; border-color: #326891; }

/* 37.5 列表行：从独立卡片 → 提案 .rows 内分隔行（白卡容器内发丝线 + hover 浅底） */
.post-item { padding: 14px 16px; border: 0; border-bottom: 1px solid #ececea; border-radius: 0; margin-bottom: 0; background: #fff; transition: background .15s ease; display: flex; gap: 12px; align-items: center; }
.post-item:last-child { border-bottom: 0; }
.post-item:hover { transform: none; box-shadow: none; background: #f5f5f3; }
.post-item .row-ava { flex: none; }
.post-item .row-main { flex: 1 1 auto; min-width: 0; }
.post-item .post-excerpt { margin: 4px 0 0; }
.post-item .post-meta { margin-top: 4px; }
.post-item .count-badge { flex: none; }

/* 37.6 回复数徽标：提案 .count-badge（等宽数字 + hover 蓝） */
.count-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 24px; padding: 0 7px; background: #f2f2f0; border-radius: 4px; font-family: ui-monospace, Consolas, monospace; font-size: 13px; color: #5a5a5a; }
.count-badge.zero { color: #9a9a9a; }
.post-item:hover .count-badge { background: #e9f0f6; color: #326891; }

/* 37.7 热榜：提案 .rank（前三橙红印章号） */
.rank { display: flex; flex-direction: column; gap: 2px; }
.rank-item { display: flex; gap: 10px; align-items: flex-start; padding: 5px 6px; border-radius: 4px; color: inherit; text-decoration: none; }
.rank-item:hover { background: #f5f5f3; }
.rank-no { flex: none; width: 22px; height: 22px; margin-top: 1px; display: flex; align-items: center; justify-content: center; border-radius: 4px; font-family: ui-monospace, Consolas, monospace; font-size: 12px; font-weight: 700; color: #9a9a9a; }
.rank-item.top .rank-no { background: #c7593e; color: #fff; }
.rank-item .rt { font-size: 13px; font-weight: 500; color: #121212; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rank-item .rt:hover { color: #326891; }
.rank-item .rm { font-size: 11px; color: #9a9a9a; font-family: ui-monospace, Consolas, monospace; margin-top: 2px; flex: none; }

/* 37.8 热门趣处：提案 .seals（链接蓝 chips） */
.seals { display: flex; flex-wrap: wrap; gap: 7px; }
.seals a { font-size: 12px; padding: 4px 11px; border-radius: 4px; color: #0067c0; background: #f2f2f0; text-decoration: none; }
.seals a:hover { background: #e9f0f6; }

/* 37.9 标签统一为提案蓝字 chip（去彩虹色，对齐提案克制三色；锁定网站 css 的 .tag 基样式） */
.tag { background: #f2f2f0 !important; color: #0067c0 !important; border-radius: 4px; padding: 2px 9px; font-size: 11px; font-weight: 500; }
.tag-green, .tag-blue, .tag-orange, .tag-indigo, .tag-teal, .tag-purple, .tag-pink, .tag-yellow, .tag-gray { background: #f2f2f0 !important; color: #0067c0 !important; }

/* 37.10 详情正文：提案 .prose（14px/1.9，关键词淡蓝底）；标题 21px·800 */
.dtitle { font-size: 21px; font-weight: 800; line-height: 1.45; }
.markdown_body { font-size: 14px; line-height: 1.9; color: #121212; max-width: 46em; }
.markdown_body a { color: #0067c0; }
.markdown_body .k, .prose .k { background: #e9f0f6; padding: 0 3px; border-radius: 3px; }

/* 37.11 隐藏内容盒：提案 .gated（橙红虚线 + 浅橙底） */
.gated { margin-top: 12px; border: 1px dashed #c7593e; background: #fdf3ef; padding: 11px 13px; font-size: 13px; color: #c7593e; border-radius: 4px; }

/* 37.12 楼主标记：提案 .reply .who .op（蓝底标记） */
.op-badge, .who .op, .op-tag { color: #326891; background: #e9f0f6; font-size: 10px; padding: 1px 6px; border-radius: 4px; margin-left: 4px; font-weight: 600; }

/* 37.13 作者卡大头像：提案 .author-card .big-ava（64px/8px 方形） */
.author-card .big-ava,
.side-card .avatar-letter[style*="60px"] { border-radius: 8px; }
.author-stat-row { font-family: ui-monospace, Consolas, monospace; }

/* 37.14 窄屏（画板 C 提案色）：两栏堆叠，保持蓝激活 + 方形头像 + 浅底 */
@media (max-width: 900px) {
  .two-col { flex-direction: column; }
  .side-col { flex: none; }
}

/* ===== 38. 品牌块全站统一（2026-10-26）：顶栏 logo 与首页（社区化 v3 画板 A / 09-30 提案）同一口径 =====
   此前同一套 website 皮肤里有三套 logo 写法：
     ① 首页（.v3 作用域）：30px 普鲁士蓝印章 + 18px/800 站名，**无副标**（= 09-30 提案 .brand .seal + .name）
     ② 其它页面（base.html 顶栏，原型 CSS）：32px 印章 + 16px/700 站名 + 副标
     ③ 登录 / 注册等认证页：② 的居中简化版
   同一套皮肤里 logo 大小、字号、有无副标各不相同，视觉上像三个站。
   站长要求「顶部 logo 跟首页统一」—— 这里把品牌块提升为**顶栏通用样式**，
   让全站顶栏（含认证页）一律是：印章 30px / #326891 / 6px 圆角 / 白字 900，站名 18px/800，**不显示副标**
   （09-30 提案的品牌本就只有「印章 + 站名」，没有副标）。
   DOM 侧同时收敛到 templates/website/partials/_brand_logo.html 一份，避免模板各写各的。
   ⚠️ 只作用域在 .topnav 内：config/about、config/app_download 里的 44px 大印章是内容区元素，不受影响。
   ⚠️ 锁定的 website.css（原型逐字节副本）一个字没动，这里是覆盖层。 */
.topnav .logo { gap: 9px; flex-shrink: 0; }
.topnav .logo-icon {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  background: #326891;
  color: #ffffff;
  font-size: 18px;
  font-weight: 900;
}
.topnav .logo-text { font-size: 18px; font-weight: 800; line-height: 1.2; }
.topnav .logo-slogan { display: none; }