/* 深推 deepinfer — V2EX 风格视觉体系（原创实现）
   结构：白 header / 灰底白盒 / #778087 灰蓝链接 / 方形小头像 */

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: #e2e2e2;
  color: #000;
  font-family: "Helvetica Neue", Helvetica, Arial, "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  font-size: 14px;
  /* 1.55 而不是 1.6：正文以中文为主，14px 下 1.6 会让列表和元信息行之间
     空出一截；1.55（21.7px）仍在中文可读区间内，且不改字号就收紧了整页。 */
  line-height: 1.55;
}

a { color: #778087; text-decoration: none; }
a:hover { color: #4d5256; text-decoration: underline; }

.wrap { max-width: 1020px; margin: 0 auto; padding: 0 10px; }

.gray { color: #999; }
.small { font-size: 12px; }
.sep { color: #ccc; margin: 0 4px; }
.dot { color: #ccc; margin: 0 4px; font-size: 11px; }

/* ---- header ---- */

#Top {
  background: #fff;
  border-bottom: 1px solid #d5d5d5;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
#Top .wrap { display: flex; align-items: center; min-height: 44px; gap: 14px; }

#Logo {
  font-size: 23px;
  font-weight: 700;
  letter-spacing: 0.2px;
  color: #778087;
}
#Logo:hover { text-decoration: none; color: #4d5256; }
#Logo::before {
  content: "";
  display: inline-block;
  width: 26px; height: 26px;
  margin-right: 8px;
  vertical-align: -6px;
  border-radius: 5px;
  background-color: #778087;
  /* 倒三角 = 张量逐层收窄，两条通边横线 = 层与层之间，整体向下就是「深」。
     同时它念作 ∇，梯度算子——前向传播算的就是它。用 background-image 而不是
     mask：mask 只能在方块上挖一个形状，这里要「挖出三角再填回两条线」，两层
     composite 做不到。透明处透出 background-color。 */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M4.5 6.5h23L16 27.5z' fill='%23fff'/%3E%3Crect x='8.5' y='10.9' width='15' height='2.3' fill='%2377887f'/%3E%3Crect x='11' y='15.9' width='10' height='2.3' fill='%2377887f'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
#Logo::after { content: "深推"; font-size: 12px; font-weight: 400; color: #999; margin-left: 6px; letter-spacing: 0; }

/* 允许换行 + 子项不压缩：登录后右侧有 7 个控件，窄屏硬挤会直接把「设置」「管理」
   「退出」推出视口（#Top .wrap 的 flex-wrap 救不了子容器）。换行只是变高，溢出会让整页横滚。 */
#TopRight { margin-left: auto; display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 12px; }
#TopRight > * { flex-shrink: 0; }
#TopRight > #Search { flex-shrink: 1; }

/* 窄屏换用的短标签，宽屏不显示 */
.me-short { display: none; }
.set-icon { display: none; }

#Search input {
  width: 140px;
  padding: 4px 10px;
  font: inherit;
  font-size: 13px;
  color: #666;
  border: 1px solid #ddd;
  border-radius: 12px;
  background: #f9f9f9;
  outline: none;
}
#Search input:focus { background: #fff; border-color: #aab8c2; width: 180px; }

.top-link { color: #778087; font-size: 13px; }
.top-link.me { font-weight: 600; }

.inline-form { display: inline; }
.linklike { background: none; border: none; padding: 0; font: inherit; cursor: pointer; }

/* ---- layout ---- */

#Wrapper { padding: 20px 0 40px; }

#Main { display: flex; gap: 15px; align-items: flex-start; }

.content { flex: 1; min-width: 0; }
.sidebar { width: 270px; flex-shrink: 0; }

@media (max-width: 860px) {
  /* column 之后交叉轴是横向：不拉伸的话，宽表格会把整页撑出横向滚动条 */
  #Main { flex-direction: column; align-items: stretch; }
  .content, .sidebar { width: 100%; }
  #Top .wrap { flex-wrap: wrap; padding-bottom: 6px; }
  /* 不强制独占一行了：这一档宽度其实放得下，放不下时 #TopRight 自己会换行 */
  #TopRight { justify-content: flex-end; gap: 8px; }
  #Search input { width: 110px; }
  #Search input:focus { width: 130px; }
}

/* ---- boxes ---- */

.box {
  background: #fff;
  border-radius: 3px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07);
  margin-bottom: 15px;
  overflow: hidden;
}

.box .header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border-bottom: 1px solid #e2e2e2;
  font-size: 13px;
}
.box .header .fr { margin-left: auto; }
/* 点击数与会话赞同数并排。窄屏上折成两行会让 header 白高一倍，而这两个
   数字本来就是一件事：这条帖子有多热。 */
.post-stats { white-space: nowrap; }
.box .header .chevron { color: #ccc; margin-right: 2px; }

.cell { padding: 10px 15px; }
.cell + .cell { border-top: 1px solid #e2e2e2; }

.inner { padding: 12px 15px; }

.message {
  background: #fff;
  border-radius: 3px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07);
  padding: 10px 15px;
  margin-bottom: 15px;
  font-size: 13px;
  color: #778087;
}
.message.error { color: #c0392b; background: #fdf3f2; }
.message.warn { color: #9a6b00; background: #fff9ec; }

/* ---- topic rows ---- */

.topic { display: flex; gap: 10px; align-items: flex-start; }
.topic + .topic { border-top: 1px solid #e2e2e2; }
.cell.topic { padding: 10px 15px; }
.cell.topic + .cell.topic { border-top: 1px solid #e2e2e2; }

.avatar {
  position: relative;
  width: 32px; height: 32px;
  border-radius: 4px;
  /* 默认头像是透明线稿：/a/<name>.png 只画墨，不画底。这一行才是底色，
     所以换底色不用重画 PNG，也不用等 immutable 的缓存过期。 */
  background: #46606e;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  user-select: none;
}
.avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.avatar .av-em {
  position: relative;
  font-size: 17px;
  line-height: 1;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.3));
}
.avatar.lg { width: 48px; height: 48px; border-radius: 5px; }
.avatar.lg .av-em { font-size: 26px; }
/* 96px：设置页里「这是你现在的头像」。同一个模板换尺寸，免得预览和列表里
   显示的东西是两套代码。 */
.avatar.xl { width: 96px; height: 96px; border-radius: 8px; }
.avatar.xl .av-em { font-size: 46px; }
.avatar.node-avatar { background: #778087; font-weight: 700; }
.avatar.node-avatar img { display: none; }
.avatar.node-avatar .av-em { font-size: 22px; }

.topic-main { flex: 1; min-width: 0; }

/* 无空格的长串（URL、哈希、英文单词）会撑破所在块；.box 又是 overflow:hidden，
   所以它不会出滚动条，而是被直接裁掉 —— 看起来像内容丢了。用户输入的地方都强制断行。 */
.item-title, .topic-header h1, .topic-content, .reply-content,
.notif-line, .notif-snippet, .channel-desc, .message { overflow-wrap: anywhere; }

.item-title { font-size: 16px; line-height: 1.35; display: inline; }
.item-title a { color: #778087; }
.item-title a:hover { color: #4d5256; }

.topic-info {
  margin-top: 3px;
  font-size: 12px;
  color: #999;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}
/* 用户名是三档里的中间档：比时间（.gray/#999）深，比正文和回复（继承 body
   的 #000）浅。原来是链接蓝 #778087，对比度 4.0 —— 只比时间重一点、离正文
   很远，读起来仍像元信息。改成 #55606a（对比度 6.4）把它推进「内容」那一侧，
   同时保留一点冷色偏，和全站的灰蓝体系同源。 */
.topic-info .member, .member { color: #55606a; }
.member:hover { color: #2f3a42; }
.strong { font-weight: 600; }

.node {
  display: inline-block;
  background: #f0f0f0;
  border-radius: 3px;
  padding: 1px 6px;
  font-size: 12px;
  line-height: 1.5;
}
.node-link { color: #778087; }

.tag {
  display: inline-block;
  background: #f0f0f0;
  border-radius: 3px;
  padding: 1px 6px;
  font-size: 12px;
  line-height: 1.5;
  color: #999;
}
.tag::before { content: "#"; opacity: 0.6; margin-right: 1px; }
a.tag:hover { color: #778087; text-decoration: none; background: #e8e8e8; }

.count-livid {
  background: #aab8c2;
  color: #fff;
  font-size: 12px;
  line-height: 1;
  padding: 4px 9px;
  border-radius: 12px;
  margin-top: 3px;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.count-livid:hover { background: #96a6b3; color: #fff; text-decoration: none; }

.badge {
  display: inline-block;
  font-size: 11px;
  line-height: 1.6;
  padding: 0 5px;
  border-radius: 3px;
  vertical-align: 2px;
}
.badge.pin { background: #fff3d6; color: #9a6b00; }
.badge.review { background: #fdeaea; color: #c0392b; }
.badge.flag { background: #fff0e4; color: #b45309; }

/* ---- channels: sidebar list and /channels ---- */

.side-channels { display: flex; flex-direction: column; }
.side-channel {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 6px;
  border-radius: 3px;
  color: #556;
}
.side-channel:hover { background: #f2f4f6; text-decoration: none; }
.side-channel-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.side-channel-count {
  color: #aab0b6;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.side-more { margin-top: 8px; }

.channel-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.channel-row-main { min-width: 0; }
.channel-row-name { font-weight: 600; }
.channel-row-desc { margin-top: 2px; }
.channel-row-counts { color: #778087; white-space: nowrap; flex-shrink: 0; }

/* ---- channel page: /c/<slug> ----
   头部的介绍是本页唯一「关于这个分区」的说明，给它正常字号而不是小灰字。
   这里不挂任何状态徽标：归档与否是首页的事，分区页只回答「这个分区是什么、
   里面有什么」，靠一条黄条提醒反而把一次性的后台操作变成了永久装修。 */

.channel-desc { margin-top: 6px; font-size: 14px; line-height: 1.55; color: #4d5256; }
.channel-meta { margin-top: 8px; display: flex; align-items: center; gap: 6px; }

/* ---- tabs ---- */

.tabs { display: inline-flex; gap: 2px; flex-wrap: wrap; }
a.tab { color: #999; padding: 2px 8px; border-radius: 3px; font-size: 13px; }
a.tab:hover { color: #778087; text-decoration: none; background: #f4f4f4; }
a.tab-current {
  color: #778087;
  background: #e8e8e8;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 13px;
}
a.tab-current:hover { text-decoration: none; color: #4d5256; }

/* ---- sidebar ---- */

.user-side { display: flex; gap: 10px; align-items: center; }
.user-side-info { min-width: 0; }
.user-side-info .member { font-size: 15px; font-weight: 600; }

table.stats { border-collapse: collapse; width: 100%; }
table.stats td { padding: 2px 0; font-size: 13px; }
table.stats td.h { width: 70px; color: #778087; font-weight: 700; text-align: right; padding-right: 10px; font-variant-numeric: tabular-nums; }
table.stats td.d { color: #999; }

/* ---- buttons ---- */

.super-button, input.super-button {
  display: inline-block;
  background: #778087;
  color: #fff;
  border: none;
  border-radius: 3px;
  padding: 5px 12px;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}
.super-button:hover { background: #6d767d; color: #fff; text-decoration: none; }
input.super-button.normal { padding: 6px 20px; }

.super-button.danger, input.super-button.danger { background: #c0392b; }
.super-button.danger:hover { background: #a93226; }

#NewTopic {
  background: #778087;
  color: #fff;
  border-radius: 3px;
  padding: 4px 10px;
  font-size: 13px;
}
#NewTopic:hover { background: #6d767d; color: #fff; text-decoration: none; }

.vote-text {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: 12px;
  color: #999;
  cursor: pointer;
}
.vote-text:hover { color: #778087; }
.vote-text.voted { color: #778087; font-weight: 700; }
/* The author's own post or reply: a real button, disabled. It used to be a
   <span> for the topic and a live button for replies, so the same rule looked
   like a missing control in one place and a broken one in the other. */
.vote-text.vote-own { display: inline-block; cursor: default; opacity: .6; }
.vote-text.vote-own:hover { color: #999; text-decoration: none; }
.vote-text.vote-own:disabled { color: #999; }

/* 双击点赞（仅触屏，见 main.js）。正文上关掉双击缩放——那 300ms 的等待正是
   让人以为「双击没反应」的元凶；捏合缩放和拖动都还在。
   浮起来的是触点位置的 ▲，纯装饰，不接事件。 */
.topic-content, .reply-content { touch-action: manipulation; }
.dblvote-pop {
  position: fixed;
  z-index: 60;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(70, 96, 110, .92);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
  animation: dblvote-pop .7s ease-out forwards;
}
@keyframes dblvote-pop {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(.6); }
  25%  { opacity: 1; transform: translate(-50%, -70%) scale(1.15); }
  60%  { opacity: 1; transform: translate(-50%, -80%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -110%) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .dblvote-pop { animation-duration: .01s; }
}

.tool-link {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: 12px;
  color: #999;
  cursor: pointer;
}
.tool-link:hover { color: #778087; }
/* 没有可修复内容时按钮留着但按不动：它同时是「这个功能在这儿」的状态说明。 */
.tool-link:disabled, .tool-link:disabled:hover { color: #c4c8cc; cursor: default; }

/* ---- topic page ---- */

.topic-header { display: flex; gap: 12px; align-items: flex-start; }
.topic-header .fr { margin-left: auto; align-self: center; flex-shrink: 0; }
.topic-header-main { min-width: 0; }
.topic-header h1 {
  margin: 0;
  font-size: 24px;
  /* 层级靠黑体字面 + 字号，不靠加粗：600 在 Windows 上会命中微软雅黑的真粗体，
     24px 的中文一粗就糊成一团（上一版就是被这个否掉的）。这里保持常规字重，
     字体沿用 body 那条黑体栈（PingFang SC / 微软雅黑 / Noto Sans CJK），
     颜色取纯黑 —— 正文 15px 黑字、标题 24px 黑字，字号差就够分清。 */
  font-weight: 400;
  color: #000;
  line-height: 1.35;
}
.topic-header .gray { display: block; margin-top: 4px; }

/* 个人简介：设置页里填的几行字。pre-line 保留换行，否则 textarea 里
   分好的行会挤成一段。 */
.profile-bio {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.6;
  color: #4d5256;
  white-space: pre-line;
  word-break: break-word;
}

/* 自己主页上的账号操作行（设置 / 退出）。桌面在顶栏里点得到，这里不显示；
   ≤660px 顶栏收起以后才由那一段的媒体查询打开。 */
.profile-self-actions { display: none; }

.topic-tags { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 5px; }
.topic-tags .tag { font-size: 12px; }

/* 正文行高 1.7 → 1.62 → 1.55（15px 下 25.5 → 24.3 → 23.3px）。真正的「空白太多」
   不在行高本身，而在两处叠加的边距：段落上下各一个 1em 的默认边距，以及
   goldmark 把**松列表**渲染成 `<li><p>…</p></li>` 后，每个项目符号都白拿一份
   p 的下边距（截图里那排「简报」就是这个：看起来像空了整行）。这里把段落间距
   定成 .68em（约 10px）、li 里的 p 不再自带边距、列表项之间只留 .3em，
   并把首尾元素的外边距去掉 —— 内容块自己的 padding 已经在负责四周留白了。 */
.topic-content { font-size: 15px; line-height: 1.55; }
.topic-content img { max-width: 100%; }
.topic-content p,
.topic-content ul,
.topic-content ol { margin: 0 0 .68em; }
/* 列表的缩进不是我们写的，是浏览器的 UA 样式：Chrome / Safari / Firefox 都给
   ul/ol 一个 `padding-inline-start: 40px`。这里此前只重置了 margin，padding
   仍是默认值，于是列表整块比段落右移 40px，看起来像另起了一个板块。
   改成本站自己的 1.2em：项目符号贴着正文左边缘，折行时留出缩进（悬挂缩进），
   层级靠符号和缩进本身表达，不靠"整块右移"。 */
.topic-content ul,
.topic-content ol,
.reply-content ul,
.reply-content ol { padding-left: 1.2em; }
.topic-content ul ul,
.topic-content ol ol,
.topic-content ul ol,
.topic-content ol ul,
.reply-content ul ul,
.reply-content ol ol,
.reply-content ul ol,
.reply-content ol ul { margin-bottom: 0; padding-left: 1.1em; }
/* 松列表：p 在 li 里不再贡献间距，节奏由 li 之间的间隔决定。列表项内部
   真有两段时（p + p）才恢复一点间距，否则多段项会黏成一坨。 */
.topic-content li > p,
.reply-content li > p { margin: 0; }
.topic-content li + li,
.reply-content li + li { margin-top: .3em; }
.topic-content li > p + p { margin-top: .5em; }
.topic-content > :first-child { margin-top: 0; }
.topic-content > :last-child { margin-bottom: 0; }
/* 标题与下文贴紧、与上文留开：分节感来自距离差，不来自上下一样大 */
.topic-content h1,
.topic-content h2,
.topic-content h3,
.topic-content h4 { margin: 1.05em 0 .42em; line-height: 1.4; }
.topic-content pre {
  background: #f4f4f4;
  border: 1px solid #e2e2e2;
  border-radius: 3px;
  padding: 10px 12px;
  margin: 0 0 .68em;
  overflow-x: auto;
  font-size: 13px;
  line-height: 1.5;
}
.topic-content code { background: #f4f4f4; padding: 1px 4px; border-radius: 3px; font-size: 13px; }
.topic-content pre code { background: none; padding: 0; }
.topic-content blockquote {
  margin: 10px 0;
  padding: 2px 14px;
  border-left: 3px solid #e2e2e2;
  color: #999;
  line-height: 1.6;
}
/* 引用块自己的 padding 已经给了呼吸感，里面的段落别再叠一层段落间距 */
.topic-content blockquote p:last-child { margin-bottom: 0; }

.topic-tools {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  font-size: 12px;
  color: #999;
  border-top: 1px solid #e2e2e2;
}
.topic-tools input[type="number"] { width: 64px; padding: 2px 6px; font: inherit; font-size: 12px; border: 1px solid #e2e2e2; border-radius: 3px; }
/* 转移分区：下拉与「隐藏」「置顶」同处一行，所以要压到和旁边文字一样的字号，
   否则它会把整行撑高，治理动作看起来像另一组控件。 */
.topic-tools .move-form { display: inline-flex; align-items: center; gap: 3px; }
.topic-tools .move-select {
  font: inherit;
  font-size: 12px;
  max-width: 120px;
  padding: 1px 2px;
  border: 1px solid #e2e2e2;
  border-radius: 3px;
  background: #fff;
  color: #4d5256;
}
.topic-tools .move-select:focus { outline: none; border-color: #a8bdd6; }
/* 治理动作全部收进 <details>：默认只占一行「管理」，点开才出现按钮。
   原先它们和「赞同」并排一行，版主看到的帖子页是一排随时可能误点的按钮，
   而误点的代价（下架、转移）恰好是这里面最大的。flex-basis: 100% 让它独占
   一行，折叠与展开都不会挤动投票按钮。 */
.mod-panel { flex: 1 0 100%; margin-top: 2px; }
.mod-panel > summary { cursor: pointer; }
.mod-panel[open] > summary { color: #778087; }
.mod-panel-body {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed #eee;
}

/* ---- replies ---- */

.reply { display: flex; gap: 10px; align-items: flex-start; }
.cell.reply { padding: 12px 15px; scroll-margin-top: 10px; }

/* 楼层锚点：URL 片段命中 #c<n> 时高亮该楼，约 2 秒后淡出。
   :target 由浏览器驱动，淡出走 animation + forwards —— 不用 JS，也不怕静态资源强缓存。 */
.cell.reply:target { animation: floor-land 3s ease-out forwards; }
.cell.reply:target .floor { animation: floor-num 3s ease-out forwards; }
@keyframes floor-land {
  0%   { background: #fff1b8; box-shadow: inset 3px 0 0 #e8c96d; }
  65%  { background: #fffbe8; box-shadow: inset 3px 0 0 #e8c96d; }
  100% { background: rgba(255, 255, 255, 0); box-shadow: inset 3px 0 0 rgba(232, 201, 109, 0); }
}
@keyframes floor-num {
  0%, 65% { color: #b8860b; }
  100%    { color: #999; }
}

.reply-main { flex: 1; min-width: 0; }
/* 回复多数只有一两句，行高按正文稍紧一档、段间距比正文更小：
   一条回复内部的空行不该把它自己撑成三行的高度。 */
.reply-content { font-size: 14px; line-height: 1.6; }
.reply-content p,
.reply-content ul,
.reply-content ol { margin: 0 0 .5em; }
.reply-content > :last-child { margin-bottom: 0; }
.reply-meta { margin-top: 4px; display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }

.floor { margin-left: 8px; flex-shrink: 0; font-variant-numeric: tabular-nums; }

/* 楼层号兼作"复制链接"按钮：默认就是个灰数字，悬停/点击后才有反馈，
   免得楼层列表被一排按钮形状的东西打扰。 */
.floor-link {
  padding: 0 3px;
  border-radius: 3px;
  color: #999;
  font-size: 12px;
  line-height: 1.6;
  text-decoration: none;
}
.floor-link:hover { color: #4d5256; background: #eef2f5; text-decoration: none; }
.floor-link.copied { color: #2e7d32; background: #e8f4ea; }
/* 隐藏的回复不占楼层号（号只数已发布的），这里放一个不可点的标记，
   免得那个位置空着像是排版错位。 */
.floor-hidden { color: #b08a8a; font-size: 11px; letter-spacing: .5px; }

/* 已隐藏的回复：作者与治理角色仍读得到原文，但整格降调、顶上一条说明，
   一眼能与正常回复分开。左侧红条是给"这条已下架"的动线；文案本身也说清楚了，
   不依赖颜色传达信息。 */
.cell.reply-hidden { background: #fcfaf9; box-shadow: inset 3px 0 0 #e2b8b8; }
.cell.reply-hidden .reply-content { opacity: 0.78; }
.reply-hidden-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: baseline;
  margin-bottom: 6px;
  padding: 5px 8px;
  background: #fdeaea;
  border-radius: 3px;
  font-size: 12px;
  line-height: 1.5;
}
.reply-hidden-bar .strong { color: #a94442; }
.reply-hidden-bar .gray { color: #9a7b7b; }

/* 每条回复的管理动作同样收在 <details> 里：动作贴着正文，但不该因为误触而发生。
   折叠后默认只占一行「管理」，展开才出现「编辑」和隐藏原因下拉 —— 回复页面
   若每条都摊开一排控件，正文就没法读了。 */
.reply-mod { margin-top: 6px; font-size: 12px; }
.reply-mod > summary { cursor: pointer; }
.reply-mod[open] > summary { color: #778087; }
.reply-mod-body {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin-top: 6px;
}
.mod-hide-form { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.mod-hide-form select,
.mod-hide-form input[type="text"] {
  font: inherit;
  font-size: 12px;
  padding: 3px 6px;
  border: 1px solid #d5dbe0;
  border-radius: 3px;
  background: #fff;
  color: #333;
}
.mod-hide-form input[type="text"] { min-width: 180px; }
.tool-link.danger { color: #c0392b; }
.tool-link.danger:hover { color: #96281b; }

.reply-quote {
  display: block;
  color: #999;
  background: #f9f9f9;
  border-left: 3px solid #e2e2e2;
  padding: 6px 10px;
  margin-bottom: 8px;
  border-radius: 0 3px 3px 0;
  line-height: 1.6;
  word-break: break-word;
  position: relative;
}
/* 有取消按钮时给右上角留出位置，别让长摘要顶到 × 底下 */
.reply-quote.has-cancel { padding-right: 34px; }
.reply-quote .member { color: #666; }

/* 整块引用都可点：链接只包文字，::after 铺满整条当热区（取消按钮再盖在上面） */
.reply-quote-jump { display: block; color: inherit; text-decoration: none; }
.reply-quote-jump::after { content: ""; position: absolute; inset: 0; }
.reply-quote-jump:hover { color: inherit; text-decoration: none; }
.reply-quote-jump:hover::after { background: rgba(0, 0, 0, 0.035); }

.reply-quote-cancel {
  position: absolute;
  top: 3px; right: 5px;
  z-index: 2;
  padding: 2px 5px;
  font-size: 16px;
  line-height: 1;
  color: #aaa;
  text-decoration: none;
}
.reply-quote-cancel:hover { color: #555; text-decoration: none; }
.reply-actions { margin-top: 10px; }

/* 回复框的左边缘对齐的是评论的**头像**，不是评论正文。
   头像左边 = 卡片的 15px 内边距；评论正文还要再加 32px 头像 + 10px 间距。
   回复框不留这 42px：输入框直接从内边距开始，压在一列头像的左边线上。
   右内边距同样钉成 15px —— .inner 在 ≤660px 会被媒体查询收到 12px，而
   .cell.reply 一直是 15px，不钉住窄屏右边就差 3px（桌面截图看不出来）。
   #reply 的 id 特异性高于媒体查询里的 .inner，两条在所有宽度都生效。
   .ml 的 560px 上限在这里帮倒忙：它本意是限制单行长度，结果让输入框比它要
   回复的内容还窄一截，长回复在 560 那儿折行、评论却在 800 那儿折行。 */
#reply { padding-left: 15px; padding-right: 15px; }
#reply textarea.ml { max-width: none; }

/* 正文编辑器上方那行工具条：左「编辑 / 预览」是模式开关，「图片」是上传
   入口，右侧写状态（上传进度、预览结果、报错）。
   默认不渲染，main.js 给 <html> 挂上 .has-js 才出现 —— 三个按钮都要 JS，
   没有脚本时留一排点不动的按钮只是障眼法。回复框和发帖框共用这一套。 */
.compose-tools { display: none; align-items: center; gap: 14px; margin-bottom: 6px; font-size: 13px; line-height: 1.4; }
html.has-js .compose-tools { display: flex; }
button.compose-tab,
button.compose-tool {
  font: inherit;
  color: #778087;
  background: none;
  border: 0;
  padding: 2px 0;
  cursor: pointer;
}
button.compose-tab:hover,
button.compose-tool:hover { color: #4d5256; text-decoration: underline; }
/* 当前模式那一格不该看起来还能点。只换颜色不够：两个词都是「两三个灰字」，
   12 号字下深浅差一档几乎看不出来（截图验证过），加粗才是一眼能看见的信号。 */
button.compose-tab.is-current { color: #4d5256; font-weight: 600; }
button.compose-tab.is-current:hover { text-decoration: none; }
button.compose-tool:disabled { color: #c0c4c8; cursor: default; text-decoration: none; }
.compose-note { margin-left: auto; color: #999; font-size: 12px; text-align: right; }
.compose-note.is-error { color: #c0392b; }

/* 预览面板替 textarea 占位：边框、内边距、圆角都抄输入框那一套，
   切换时看起来是同一块区域换了内容，而不是换了个控件。
   min-height 按 rows=6 估的，空内容时也不至于塌成一行。 */
.compose-preview {
  min-height: 100px;
  max-width: 560px;
  padding: 6px 10px;
  border: 1px solid #ddd;
  border-radius: 3px;
  background: #fff;
}
/* 回复框的输入框早就去掉了 560px 上限（见上面的注释），预览面板跟着走 */
#reply .compose-preview { max-width: none; }
.compose-empty { margin: 0; }

/* 拖拽悬停时给个明确的接受区。没有这个反馈，拖进输入框和拖到浏览器空白处
   看起来一模一样，而后者会让浏览器直接打开图片，写了一半的回复就没了。 */
form.is-dragover textarea { border-color: #7796a8; box-shadow: 0 0 0 3px rgba(119, 150, 168, 0.18); }

/* 正文里的图片不能撑破栏宽。.topic-content 早就有这条，回复一直没有 ——
   在回复里贴一张 1600px 的截图会把整栏顶出横向滚动条。 */
.reply-content img { max-width: 100%; height: auto; border-radius: 3px; }

/* ---- forms ---- */

.form-table { border-collapse: collapse; }
/* Honeypot field: present in the DOM, invisible to people. Off-screen rather
   than display:none — some bots skip fields that are not rendered at all. */
.hp-field { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.form-table td { padding: 6px 12px 6px 0; vertical-align: top; }
.form-label { color: #999; font-size: 13px; white-space: nowrap; padding-top: 10px !important; width: 70px; }

/* 字段下面的一句解释：为什么这个框可以留空、改完会发生什么。比占位符
   更适合说“后果”，占位符只够说“填什么”。 */
.form-hint { color: #999; font-size: 12px; margin-top: 6px; line-height: 1.6; }

/* 头像设置：左边是现在用的那张，右边是换掉或去掉。两列而不是一个文件框，
   是因为「换」这个动作需要一个参照物 —— 只看一个上传按钮，没人知道自己
   会得到什么。96px 也是页面里唯一能看清裁切结果的尺寸。 */
.avatar-set { display: flex; gap: 20px; align-items: flex-start; }
.avatar-set-now { flex-shrink: 0; text-align: center; }
.avatar-set-now .form-hint { width: 96px; }
.avatar-set-forms { flex: 1; min-width: 0; }
.avatar-file { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.avatar-file input[type="file"] { max-width: 100%; font-size: 12px; }
.avatar-del { margin-top: 14px; }

input[type="text"], input[type="email"], input[type="password"],
input[type="search"], input[type="number"], textarea, select {
  font: inherit;
  color: #000;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 6px 10px;
  background: #fff;
  outline: none;
}
input:focus, textarea:focus, select:focus { border-color: #aab8c2; }
textarea { resize: vertical; width: 100%; }
input.ml, textarea.ml, select.ml { width: 100%; max-width: 560px; }
input.sl { width: 100%; margin-bottom: 8px; }

/* ---- paging / admin ---- */

.page-link {
  display: inline-block;
  padding: 3px 12px;
  border: 1px solid #e2e2e2;
  border-radius: 3px;
  font-size: 13px;
  color: #778087;
  margin-right: 8px;
}
.page-link:hover { border-color: #aab8c2; text-decoration: none; }

.ai-flags {
  margin-top: 8px;
  font-size: 12px;
  color: #b45309;
  background: #fff8ef;
  border: 1px solid #f5d6b8;
  border-radius: 3px;
  padding: 6px 10px;
}
.admin-actions { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; }

/* ---- admin: shell ----
   左栏是垂直菜单（内容管理的子模块 + 账号与日志），右边是带搜索的表格。
   菜单宽度固定，表格吃掉剩下的宽：后台的每一页都是「一个列表」，横向空间
   比正文页更值钱，所以后台不用站点右侧栏。 */

.admin-shell { display: flex; gap: 15px; align-items: flex-start; }
.admin-side {
  width: 152px;
  flex-shrink: 0;
  background: #fff;
  border-radius: 3px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07);
  padding: 6px 0 8px;
}
.admin-side-group {
  padding: 9px 12px 4px;
  font-size: 11px;
  color: #b6bdc3;
  letter-spacing: 0.5px;
}
.admin-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-left: 3px solid transparent;
  font-size: 13px;
  color: #778087;
  line-height: 1.7;
}
.admin-tab:hover { background: #f6f7f8; color: #4d5256; text-decoration: none; }
.admin-tab.current {
  background: #f2f6f9;
  border-left-color: #778087;
  color: #4d5256;
  font-weight: 600;
}
.admin-tab .n {
  margin-left: auto;
  font-size: 11px;
  color: #b0b8bf;
  font-variant-numeric: tabular-nums;
}
.admin-tab .n.hot { color: #c0392b; }

.admin-body { flex: 1; min-width: 0; }

@media (max-width: 860px) {
  /* column + flex-start 会让子项按内容宽度撑开，表格就不再被 box 裁住 */
  .admin-shell { flex-direction: column; align-items: stretch; gap: 10px; }
  .admin-body { width: 100%; }
  .admin-side { width: 100%; display: flex; flex-wrap: wrap; padding: 4px; }
  .admin-side-group { display: none; }
  .admin-tab { border-left: 0; border-radius: 3px; padding: 4px 9px; }
  .admin-tab.current { border-left: 0; background: #e9eef2; }
  /* 窄屏不压缩列宽，改成整张表横向滚动：一行读全比一列读全有用 */
  .admin-body .box { overflow-x: auto; }
  .admin-table { min-width: 620px; }
  .admin-search input[type="search"] { width: 130px; }
}

/* ---- admin: tables ----
   所有后台列表共用一张表的样式：表头浅灰、行分隔线极淡、悬停整行高亮，
   数字列等宽对齐。操作按钮一律 .mini-btn，尺寸不随列宽变化。 */

.admin-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.admin-table th {
  text-align: left;
  font-weight: 400;
  font-size: 12px;
  color: #999;
  padding: 7px 10px;
  background: #fafafa;
  border-bottom: 1px solid #e2e2e2;
  white-space: nowrap;
}
.admin-table td {
  padding: 8px 10px;
  border-bottom: 1px solid #f1f2f3;
  vertical-align: top;
}
.admin-table tbody tr:hover { background: #fafbfc; }
.admin-table th:first-child, .admin-table td:first-child { padding-left: 15px; }
.admin-table th:last-child, .admin-table td:last-child { padding-right: 15px; }
.admin-table .t-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.admin-table .t-title a { color: #4d5256; }
.admin-table .t-title a:hover { color: #000; }
.admin-table .t-host { font-family: Consolas, Menlo, monospace; font-size: 12px; color: #4d5256; }
.admin-empty { padding: 18px 15px !important; text-align: center; color: #999; }
.admin-cell-muted { color: #999; font-size: 12px; white-space: nowrap; }
.admin-cell-num { font-variant-numeric: tabular-nums; color: #778087; }
.admin-flags { font-size: 11px; line-height: 1.55; color: #b45309; }
.admin-flags.link { color: #778087; }

/* 表头右侧的搜索框：与标题同一行，窄屏换行到下一行也不塌 */
.admin-search { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.admin-search input[type="search"] {
  width: 180px;
  padding: 3px 9px;
  font-size: 12px;
  height: 26px;
}
.admin-search .mini-btn { padding: 3px 10px; line-height: 18px; height: 26px; }

/* 表格上方的工具条（新增域名 / 新建分区）与表格下方的说明 */
.admin-toolbar { padding: 9px 15px; border-bottom: 1px solid #e2e2e2; background: #fbfbfc; }
.admin-toolbar form { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.admin-toolbar input[type="text"], .admin-toolbar input[type="number"] { font-size: 12px; padding: 4px 8px; }
.admin-tip {
  padding: 9px 15px 11px;
  font-size: 12px;
  color: #999;
  line-height: 1.7;
  border-top: 1px solid #f1f2f3;
}
.admin-pager { padding: 10px 15px; border-top: 1px solid #f1f2f3; }
.admin-pager .page-link:last-child { margin-right: 0; }

/* 行内操作：按钮多了自动折到第二行，不会把表格撑宽 */
.row-actions { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.row-actions form { display: inline-flex; align-items: center; gap: 4px; margin: 0; }

/* ---- admin: allowlist ---- */

.allow-add-host { flex: 1 1 300px; min-width: 180px; }
.allow-add-note { flex: 0 1 150px; }
.allow-x {
  border: none;
  background: none;
  padding: 0 4px;
  color: #bcc4cb;
  font: inherit;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.allow-x:hover { color: #c0392b; }

/* ---- user management ---- */

.mini-btn {
  background: #f9f9f9;
  border: 1px solid #e2e2e2;
  border-radius: 3px;
  color: #778087;
  font: inherit;
  font-size: 12px;
  padding: 2px 8px;
  cursor: pointer;
  white-space: nowrap;
}
.mini-btn:hover { border-color: #aab8c2; color: #4d5256; }
.mini-btn.danger { color: #c0392b; }
.mini-btn.danger:hover { border-color: #c0392b; }

.badge.role-admin { background: #fff3d6; color: #9a6b00; }
.badge.role-moderator { background: #eaf4fb; color: #0b4f86; }
.badge.role-user { background: #f0f0f0; color: #999; }

/* 用户表：头像 + 用户名 + #id + 邮箱堆在一格里，行高才不会被头像撑开；
   徽标和用户名都不换行，窄列不会把「管理员」竖着排。 */
.u-cell { display: flex; align-items: center; gap: 8px; }
.u-cell .avatar { width: 28px; height: 28px; border-radius: 3px; }
.u-cell .avatar .av-em { font-size: 15px; }
.u-meta { min-width: 0; }
.u-name { font-weight: 600; color: #4d5256; white-space: nowrap; }
.admin-table .badge { white-space: nowrap; }
/* 「导入」＝这行不是本站注册出来的账号，而是导入接口为外站作者造的壳。
   用灰蓝而不是警告色：它不是问题，只是一个来源标记。 */
.badge.imported { background: #eef2f5; color: #55606a; margin-left: 4px; }

/* 用户表上方的分段开关（全部 / 只看导入）。是导航不是操作，所以用链接，
   但外形跟旁边的操作按钮同一套尺寸，免得在工具条里显得像纯文本。 */
.admin-seg {
  font-size: 12px;
  line-height: 18px;
  padding: 2px 9px;
  border: 1px solid #e2e2e2;
  border-radius: 20px;
  background: #fff;
  color: #778087;
  text-decoration: none;
  white-space: nowrap;
}
.admin-seg:hover { border-color: #aab8c2; color: #4d5256; text-decoration: none; }
.admin-seg.on { background: #eef2f5; border-color: #cfd8de; color: #55606a; }
/* 操作列给足宽度：按钮折成两行是有意的，但不能挤成一列台阶 */
.users-table td:last-child { min-width: 270px; }

/* 禁言时长：一个下拉比三个按钮省两列宽 */
.mini-select {
  font: inherit;
  font-size: 12px;
  color: #778087;
  background: #f9f9f9;
  border: 1px solid #e2e2e2;
  border-radius: 3px;
  padding: 2px 4px;
}
.mini-select:focus { outline: none; border-color: #aab8c2; }

.message.onetime { background: #fff9ec; color: #9a6b00; font-size: 14px; }

/* ---- about ---- */

.about .lead { color: #778087; font-weight: 600; font-size: 15px; }
.about h2 { font-size: 15px; color: #778087; margin: 18px 0 6px; }
.about ul { margin: 6px 0; padding-left: 22px; }
.about li { margin-bottom: 3px; }

/* ---- ranking debug (dev + moderator only) ---- */

.dbg { border: 1px dashed #c9d6e2; }
.dbg .header { background: #f5f8fa; }
.dbg .header .strong { color: #0b4f86; }

.dbg-pre {
  margin: 0;
  padding: 10px 12px;
  background: #f7f8f9;
  border-radius: 3px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.7;
  color: #4d5256;
  overflow-x: auto;
  white-space: pre;
}

.dbg-note { margin-top: 8px; line-height: 1.7; }

.dbg-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 10px;
  font-size: 12px;
}
.dbg-table th {
  text-align: left;
  font-weight: 400;
  color: #999;
  padding: 0 10px 4px 0;
  border-bottom: 1px solid #e2e2e2;
}
.dbg-table td { padding: 4px 10px 4px 0; vertical-align: top; }
.dbg-table .dbg-label { white-space: nowrap; color: #778087; }
.dbg-table .dbg-work {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: #555;
}
.dbg-table .dbg-value {
  text-align: right;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: nowrap;
}
.dbg-table tr.total { border-top: 1px solid #e2e2e2; font-weight: 600; }
.dbg-table tr.total .dbg-label { color: #000; }

.dbg-score {
  display: inline-block;
  margin-left: 6px;
  padding: 0 5px;
  border-radius: 3px;
  background: #eef3f7;
  color: #4d5256;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  line-height: 1.7;
  vertical-align: 1px;
  cursor: help;
  user-select: all;
}
.dbg-score.pinned { background: #fff3d6; color: #9a6b00; }

.dbg-arm-row {
  margin-bottom: 8px;
  font-size: 12px;
  line-height: 1.8;
}
.dbg-arm-name {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 600;
  color: #0b4f86;
}
.dbg-arm-tag {
  display: inline-block;
  margin: 0 6px 0 6px;
  padding: 0 5px;
  border: 1px solid #d6dde4;
  border-radius: 3px;
  color: #778087;
  font-size: 11px;
}
.dbg-arm-tag.on { border-color: #f0c36d; background: #fff8e6; color: #9a6b00; }

/* strategy switcher inside the debug panel */
.dbg-switch { margin-left: 6px; color: #778087; }
.dbg-switch .dbg-algo {
  margin-left: 4px;
  padding: 1px 6px;
  font-size: 12px;
  line-height: 1.6;
  border: 1px solid #d6dde4;
  border-radius: 3px;
  background: #fff;
  color: #0b4f86;
  cursor: pointer;
}
.dbg-switch .dbg-algo:focus { outline: none; border-color: #f0c36d; }

/* The panel lives in the 270px sidebar, so every wide element has to wrap
   instead of pushing the column: formula lines break after the operators,
   and the table lets its "代入" column wrap while labels/values stay put. */
.sidebar .dbg .header { flex-wrap: wrap; gap: 0 8px; }
.sidebar .dbg .header .fr { flex-basis: 100%; margin-left: 0; }
.sidebar .dbg-pre {
  padding: 8px 10px;
  font-size: 11px;
  line-height: 1.75;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  overflow-x: hidden;
}
.sidebar .dbg-table { font-size: 11px; }
.sidebar .dbg-table th,
.sidebar .dbg-table td { padding-right: 6px; }
.sidebar .dbg-table .dbg-work {
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.5;
}
.sidebar .dbg-table .dbg-value { white-space: nowrap; }
.sidebar .dbg-switch {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 6px 0 0;
}
.sidebar .dbg-switch .dbg-algo {
  flex: 1;
  min-width: 0;
  margin-left: 0;
}

/* ---- footer ---- */

#Bottom {
  padding: 15px 0 30px;
  color: #999;
  font-size: 12px;
}
#Bottom a { color: #999; }
#Bottom a:hover { color: #778087; }
#Bottom .slogan { margin-right: 4px; }
/* Keep the figure from shifting the row as it changes width. */
#Bottom .load-ms { font-variant-numeric: tabular-nums; }
/* Same for the build line: the uptime changes width as it counts up. */
#Bottom .build { font-variant-numeric: tabular-nums; }

/* ---- notifications ---- */

/* Header badge. The [hidden] rule is explicit because .badge's own
   display:inline-block would otherwise outrank the UA stylesheet. */
.badge.count {
  background: #e0533d;
  color: #fff;
  border-radius: 8px;
  padding: 0 4px;
  min-width: 15px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  margin-left: 3px;
}
.badge.count[hidden] { display: none; }

.cell.notif {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 15px;
}
/* Unread items keep a tint after the page has been visited: the rows are
   rendered before the inbox is marked read, so the first look still shows
   what was new. */
.cell.notif.unread { background: #f5f9fb; }
.cell.notif.unread .notif-action { color: #778087; }

.notif-main { flex: 1; min-width: 0; }
.notif-line { font-size: 14px; line-height: 1.55; color: #778087; }
.notif-line .member { font-weight: 600; }
.notif-action { color: #999; margin: 0 2px; }
.notif-title { color: #4d5256; }
.notif-title:hover { text-decoration: underline; }
.notif-extra { color: #778087; }

.notif-snippet {
  margin-top: 3px;
  font-size: 13px;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.notif-meta { margin-top: 3px; }

.avatar.notif-sys {
  background: #e4eaee;
}
.badge.merge { background: #eef2f5; color: #778087; margin-left: 4px; }
.notif-new { color: #e0533d; }

/* ---- admin sudo（管理员以他人身份浏览） ---- */
/* Sticky on purpose: the bar must stay visible while scrolling, otherwise an
   admin who scrolled past it can forget whose account the next post lands in. */
#SudoBar {
  background: #b3352a;
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 20;
  font-size: 13px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}
#SudoBar .wrap { display: flex; align-items: center; gap: 10px; min-height: 36px; flex-wrap: wrap; }
.sudo-tag {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 2px;
  padding: 0 6px;
  font-size: 11px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.sudo-text { flex: 1; min-width: 220px; }
.sudo-text strong { font-weight: 600; }
.sudo-stop {
  background: #fff;
  color: #b3352a;
  border: 0;
  cursor: pointer;
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 2px;
  font-family: inherit;
}
.sudo-stop:hover { background: #ffe9e5; }
/* A thin red seam under the header so the state is visible on pages where the
   bar itself has scrolled out of the sticky position. */
body.impersonating #Top { border-bottom-color: #b3352a; }

/* sudo trigger on /admin/users: the reason field sits inline with the button
   so writing one costs less than skipping it. */
.sudo-form { display: inline-flex; align-items: center; gap: 4px; }
.reason-input {
  width: 76px;
  font-size: 12px;
  padding: 2px 5px;
  border: 1px solid #d5d5d5;
  border-radius: 2px;
  font-family: inherit;
  color: #4d5256;
}
.reason-input:focus { outline: none; border-color: #b3352a; width: 120px; }
.mini-btn.sudo { color: #b3352a; border-color: #e3b3ad; }
.mini-btn.sudo:hover { background: #b3352a; color: #fff; border-color: #b3352a; }
.sudo-note { margin-top: 6px; line-height: 1.7; }

/* ---- admin audit ----
   表格里时间/状态用等宽字体对齐，动作本身是个代码小块，扫一眼能分出
   「谁对谁做了什么」。UA 只在自己那一列内部截断，不撑宽整张表。 */

.audit-time { font-family: Consolas, Menlo, monospace; }
.audit-actor { font-weight: 600; color: #4d5256; white-space: nowrap; }
.audit-target { color: #778087; font-weight: 600; white-space: nowrap; }
.audit-action {
  background: #eef2f5;
  color: #4d5256;
  border-radius: 2px;
  padding: 0 5px;
  font-size: 11px;
  font-family: Consolas, Menlo, monospace;
  white-space: nowrap;
  display: inline-block;
}
.audit-detail {
  color: #999;
  font-size: 12px;
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.audit-status { font-size: 11px; color: #999; font-family: Consolas, Menlo, monospace; }
.audit-status.ok { color: #5b8c68; }
.audit-status.bad { color: #b3352a; font-weight: 600; }
.audit-meta {
  font-size: 11px;
  color: #778087;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- admin: channel management ----
   一行一表单：隐藏字段挂在首列，其余输入用 form 属性接回同一个表单，
   所以「保存」是这一行的按钮，而不是一个页脚大表单。 */

.ch-slug-input { width: 150px; }
.ch-slug-code { color: #4d5256; font-size: 12px; }
.ch-name-input { width: 100%; min-width: 90px; }
.ch-desc-input { width: 100%; min-width: 120px; }
.ch-num { width: 62px; }
.ch-nums { white-space: nowrap; }
.ch-nums .ch-num + .ch-num { margin-left: 4px; }
.ch-check { font-size: 12px; color: #778087; white-space: nowrap; }
.ch-lbl { font-size: 12px; color: #999; }
/* 表格里「保存 / 删除」必须同一行，否则窄列会把两行按钮叠成台阶 */
.ch-table .row-actions { flex-wrap: nowrap; }
.ch-table input[type="text"], .ch-table input[type="number"] { padding: 3px 6px; font-size: 12px; }
/* 工具条里（新建分区）介绍框吃掉剩余宽度，表格里则占满整格 */
.admin-toolbar .ch-desc-input { flex: 1 1 200px; width: auto; }

/* the edit link sits among moderation tool links but is a plain anchor */
.topic-tools a.tool-link { text-decoration: none; }
.topic-tools a.tool-link:hover { text-decoration: none; color: #4d5256; }

/* ========================================================================
   手机端 / 窄屏（≤660px）
   ------------------------------------------------------------------------
   860px 那条断点只把两栏改成一栏，header 和表单还是桌面版的形状：
   登录后右侧 6 个控件在 375 下会把「管理」「退出」顶出屏幕，tab 栏会折成
   错位的两行，label 在左的表单只剩 255px 的输入宽度。这一段专门修这些。

   原则：不改桌面版形状，只在这里「收紧 + 重排」，且不依赖 JS ——
   header 用短标签（＋ / 我）代替折叠菜单，避免为了省 20px 复制一份 DOM
   和一份 POST 表单。320–660 下实测都能单行放下（601–660 那档原来会折成两行）。
   ======================================================================== */

@media (max-width: 660px) {

  /* ---- header：图标 + 搜索（吃掉剩余宽度）+ 动作项，强制单行 ---- */
  #Top .wrap { flex-wrap: nowrap; gap: 8px; min-height: 50px; padding: 0 10px; }

  /* 只留图标，文字用 font-size:0 藏掉但保留可访问名（title 也在） */
  #Logo { display: inline-flex; align-items: center; font-size: 0; flex-shrink: 0; }
  #Logo::before { margin-right: 0; width: 24px; height: 24px; }
  #Logo::after { display: none; }

  /* 覆盖 860 断点里的 flex-basis:100%（那会让它独占一行） */
  #TopRight { flex: 1 1 auto; flex-basis: auto; min-width: 0; flex-wrap: nowrap; gap: 8px; }

  #Search { flex: 1 1 60px; min-width: 0; }
  /* 16px 是硬门槛：小于它 iOS Safari 聚焦时会自动放大整页，退出输入还不回弹 */
  #Search input, #Search input:focus { width: 100%; font-size: 16px; padding: 5px 10px; }

  #NewTopic { padding: 0 10px; min-height: 30px; display: inline-flex; align-items: center; }
  .nt-text { display: none; }

  /* 「我」：20px 宽太难点，撑到 32×40 */
  .me-full { display: none; }
  .me-short { display: inline; }
  .top-link.me { min-width: 32px; justify-content: center; }

  /* 「设置」换成齿轮：两格中文在这里就是一口搜索框的宽度 */
  .set-full { display: none; }
  .set-icon { display: inline; font-size: 15px; line-height: 1; }

  /* 触控热区：文字链接统一拉到 40px 高（原来 21px） */
  #TopRight > .top-link, #TopRight > .logout-form .top-link,
  #TopRight > .logout-form { min-height: 40px; display: inline-flex; align-items: center; }
  #TopRight > .inline-form { align-self: center; }

  /* ---- tab 栏：分类一行横向滑动，排序另起一行右对齐 ---- */
  /* 原来两个分组挤在同一个 flex 行里折行，「专家」和「热门/最新」错位排在一起 */
  .box .header { flex-wrap: wrap; row-gap: 3px; }
  .box .header > .tabs {
    width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .box .header > .tabs::-webkit-scrollbar { display: none; }
  /* 排序组（热门/最新）另起一行，但左边缘与上一行分类对齐 —— 右对齐时视觉上
     会和上面的 tab 脱节，像挂在半空的两颗按钮 */
  .box .header > .fr.tabs {
    width: 100%;
    margin-left: 0;
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .box .header > .fr.tabs::-webkit-scrollbar { display: none; }
  a.tab, a.tab-current { padding: 5px 8px; }

  /* ---- 表单：label 从左列改到上方，输入框吃满宽度 ---- */
  /* 375 下两列表格让 label 固定占 70px，输入框只剩 255px */
  .form-table, .form-table tbody, .form-table tr, .form-table td { display: block; }
  .form-table tr { margin-bottom: 12px; }
  .form-table td { padding: 0; }
  .form-table td.form-label { width: auto; padding: 0 0 4px !important; white-space: normal; }
  .form-table td:empty { display: none; }
  .form-table input[type="text"], .form-table input[type="email"],
  .form-table input[type="password"], .form-table textarea { font-size: 16px; }
  /* 侧栏里的内联登录框（首页）、回复框（不在 form-table 里）同样按 16px，
     否则 iOS 一点就放大整页 */
  .sidebar input[type="text"], .sidebar input[type="password"] { font-size: 16px; }
  textarea { font-size: 16px; }

  /* ---- 正文：放大到 16px 再收窄一点内边距，换回一点行宽 ---- */
  .cell { padding: 10px 12px; }
  .cell.topic { padding: 10px 12px; }
  .inner { padding: 12px; }
  /* 手机上 16px 是字号下限，行高跟着从 1.75 收到 1.7：
     16px × 1.75 = 28px 的行距在 375 宽的屏上一屏只剩十来行。 */
  .topic-content, .reply-content { font-size: 16px; line-height: 1.7; }
  .topic-header h1 { font-size: 20px; }
  #Wrapper { padding: 12px 0 24px; }
  #Main { gap: 10px; }

  /* ---- 其余热区与小屏细节 ---- */
  .vote-text, .tool-link { padding: 6px 0; }
  /* 触屏上楼层号是唯一能拿到单条回复链接的入口，点击区给足 */
  .floor-link { padding: 6px 8px; }
  /* 图标 logo 的可点区域原来只有 22px 高，撑到 header 高度 */
  #Logo { min-height: 40px; }
  .count-livid { padding: 7px 9px; }
  #Bottom a { display: inline-block; padding: 6px 2px; }
  .side-channel { padding: 8px 6px; }
  .page-link { padding: 7px 14px; }
  .mini-btn { padding: 5px 9px; }
  .reply-quote-cancel { padding: 6px 8px; }
}

/* 320–380 这档（iPhone SE 一代、老安卓）再多抠 20px 出来，
   否则搜索框只剩 57px，「搜索」两个字会被截掉一半。 */
@media (max-width: 380px) {
  #Top .wrap { gap: 6px; }
  #TopRight { gap: 6px; }
  #Logo::before { width: 22px; height: 22px; }
  #Search input, #Search input:focus { padding: 5px 8px; }
  #NewTopic { padding: 0 8px; }
  #TopRight > .top-link, #TopRight > .logout-form .top-link { min-width: 26px; }
}

/* ---- 手机导航：顶栏下沉到底部 ----
   桌面（>660px）完全不出现这条栏；窄屏里 #Top 整体收起，导航改成固定在
   底部的 tab 栏。视觉是「液态玻璃」：半透明白 + backdrop blur 提饱和，
   外描一圈高光边、内描一道顶部高光，再压一道斜切的镜面亮带。它不贴死
   屏幕底边，两侧各留 8px、圆角 24px，滚动时内容从圆角和边缘透出来——
   贴在底边的白条只会像一条被裁掉的 header。

   最右边是搜索按钮，故意做成圆形：它是「打开一个输入条」而不是「跳到
   某个栏目」，和 tab 同形会被当成第六个 tab。 */
#TabBar { display: none; }

@media (max-width: 660px) {

  #Top { display: none; }

  /* 栏是浮起来的，页脚和正文都要留出它的高度，否则最后一屏永远被盖住 */
  body { padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }

  /* 焦点滚动要躲开浮起来的底栏：浏览器只知道视口底边，会把正被输入的框
     停在栏后面。scroll-margin 是唯一不用 JS 的做法。 */
  input, textarea, select, button { scroll-margin-bottom: 96px; }

  #TabBar {
    display: block;
    position: fixed;
    left: 8px;
    right: 8px;
    bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    z-index: 60;
    padding: 5px;
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.72);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.64), rgba(244, 248, 251, 0.44));
    -webkit-backdrop-filter: blur(24px) saturate(200%) brightness(1.04);
    backdrop-filter: blur(24px) saturate(200%) brightness(1.04);
    box-shadow:
      0 12px 30px -12px rgba(18, 40, 58, 0.42),
      0 2px 6px rgba(18, 40, 58, 0.10),
      inset 0 1px 0 rgba(255, 255, 255, 0.92);
  }

  /* 镜面高光：左上角柔光 + 一道斜切亮带。液态玻璃的「玻璃」全靠这一层，
     纯半透明 + blur 只会得到一块毛玻璃。 */
  #TabBar::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    pointer-events: none;
    background:
      radial-gradient(120% 90% at 15% -30%, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0) 62%),
      linear-gradient(112deg, rgba(255, 255, 255, 0) 44%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 56%);
    opacity: 0.75;
  }

  .tb-row {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 1px;
  }

  .tb-item {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    margin: 1px 2px;
    padding: 6px 2px 5px;
    border-radius: 18px;
    color: #56656f;
    font-size: 10px;
    line-height: 1.2;
    letter-spacing: 0.2px;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.16s ease, background 0.16s ease;
  }
  .tb-item:hover { text-decoration: none; color: #3c4b55; }
  .tb-item:active { transform: scale(0.97); }

  .tb-ico {
    display: block;
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .tb-label { white-space: nowrap; }

  /* 当前 tab：胶囊底 + 主色。底色很淡，让它看起来像玻璃里透出来的色，
     而不是一个实心按钮。 */
  .tb-item.on {
    color: #0b4f86;
    background: linear-gradient(180deg, rgba(11, 79, 134, 0.14), rgba(11, 79, 134, 0.08));
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.85),
      inset 0 0 0 1px rgba(11, 79, 134, 0.10);
  }

  /* 未读徽标：顶部那个在手机上不渲染，这里贴在图标右上角 */
  .tb-badge {
    position: absolute;
    top: 3px;
    left: 50%;
    margin: 0 0 0 5px;
    min-width: 14px;
    padding: 0 3px;
    border-radius: 7px;
    font-size: 9px;
    line-height: 14px;
  }

  /* 搜索：圆形按钮，比 tab 高一点，靠右 */
  .tb-item.tb-search {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    margin: 0 0 0 3px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.9);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(236, 243, 248, 0.78));
    color: #0b4f86;
    box-shadow:
      0 2px 6px rgba(18, 40, 58, 0.16),
      inset 0 1px 0 #fff,
      inset 0 -2px 5px rgba(18, 40, 58, 0.06);
  }
  .tb-item.tb-search .tb-ico { width: 21px; height: 21px; stroke-width: 1.9; }
  .tb-item.tb-search.on {
    background: linear-gradient(180deg, #eaf4fb, #d9e9f4);
    border-color: rgba(11, 79, 134, 0.18);
  }

  /* 搜索输入条：浮在栏的上方，同一套玻璃材质，关掉时不给布局留位置 */
  .tb-form {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(100% + 8px);
    display: flex;
    gap: 6px;
    padding: 6px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.82);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(248, 251, 253, 0.74));
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    backdrop-filter: blur(22px) saturate(180%);
    box-shadow:
      0 14px 28px -14px rgba(18, 40, 58, 0.40),
      inset 0 1px 0 #fff;
    animation: tbRise 0.16s ease-out;
  }
  .tb-form[hidden] { display: none; }

  .tb-form input {
    flex: 1 1 auto;
    min-width: 0;
    /* 16px 是硬门槛：小于它 iOS Safari 聚焦时会自动放大整页 */
    font: inherit;
    font-size: 16px;
    padding: 8px 12px;
    color: #333;
    border: 1px solid rgba(18, 40, 58, 0.10);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.84);
    outline: none;
    -webkit-appearance: none;
    appearance: none;
  }
  .tb-form input:focus { border-color: rgba(11, 79, 134, 0.35); background: #fff; }
  .tb-form input::-webkit-search-cancel-button { -webkit-appearance: none; }

  .tb-go {
    flex: 0 0 auto;
    font: inherit;
    font-size: 13px;
    padding: 0 14px;
    border: 1px solid rgba(11, 79, 134, 0.16);
    border-radius: 14px;
    background: linear-gradient(180deg, #f2f8fc, #e3eef7);
    color: #0b4f86;
    cursor: pointer;
  }
  .tb-go:active { background: #dbeaf5; }

  /* 个人主页上的账号操作（设置 / 退出）：只在顶栏收起时出现 */
  .profile-self-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #eee;
  }
  .profile-self-actions .mini-btn { padding: 5px 10px; }

  @keyframes tbRise {
    from { opacity: 0; transform: translateY(6px); }
  }
}

/* ---- admin: analytics ----
   一页四块：概览表、趋势图、热门页面/来源两栏、活跃度卡片。
   数值一律 tabular-nums，否则同一列的数字左右跳。
   两栏在窄屏堆成一列：并排看没问题，挤到 340px 就没法读了。 */

.an-ranges { margin-left: auto; display: flex; gap: 4px; }
.an-range {
  font-size: 12px;
  padding: 2px 9px;
  border: 1px solid transparent;
  border-radius: 3px;
  color: #778087;
  white-space: nowrap;
}
.an-range:hover { background: #f2f6f9; color: #4d5256; text-decoration: none; }
.an-range.current { background: #eaf4fb; border-color: #d3e5f2; color: #0b4f86; }

.an-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.an-dim { color: #999; }
.an-route {
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #4d5256;
}
.an-bar-head, .an-bar-cell { width: 110px; min-width: 110px; }
.an-bar-cell { vertical-align: middle; }
.an-bar {
  display: block;
  height: 6px;
  min-width: 2px;
  border-radius: 2px;
  background: #a9c6d9;
}

.an-chart-wrap { padding: 10px 14px 2px; }
.an-chart { display: block; }

.an-split { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }

.an-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 10px;
  padding: 14px 15px 4px;
}
.an-card {
  background: #fbfbfc;
  border: 1px solid #f0f1f2;
  border-radius: 3px;
  padding: 9px 12px;
}
.an-k { font-size: 11px; color: #999; }
.an-v {
  font-size: 21px;
  line-height: 1.35;
  color: #4d5256;
  font-variant-numeric: tabular-nums;
}
.an-sub { font-size: 11px; color: #b0b8bf; }

@media (max-width: 860px) {
  .an-split { grid-template-columns: 1fr; }
  .an-route { max-width: 150px; }
  .an-bar-head, .an-bar-cell { width: 60px; }
  .an-ranges { width: 100%; margin-left: 0; margin-top: 6px; }
}

/* /admin/ips —— 可疑地址。地址用等宽，方便一眼对齐和抄走；
   级别三档只靠颜色区分，文案在模板里，不靠颜色传达信息。 */
.ip-addr {
  font-family: Consolas, Menlo, monospace;
  font-size: 12px;
  color: #0b4f86;
}
span.ip-addr { color: #333; }
.ip-level {
  display: inline-block;
  padding: 0 6px;
  border-radius: 9px;
  font-size: 11px;
  line-height: 18px;
  white-space: nowrap;
}
.ip-level.refuse { background: #fdeaea; color: #c0392b; font-weight: 600; }
.ip-level.warn { background: #fff3d6; color: #9a6b00; }
.ip-level.info { background: #f0f0f0; color: #778087; }
.ip-chip {
  display: inline-block;
  margin: 0 4px 2px 0;
  padding: 0 6px;
  border-radius: 3px;
  background: #eef2f5;
  color: #556;
  font-size: 11px;
  line-height: 19px;
  white-space: nowrap;
}

@media (max-width: 660px) {
  /* 头像设置从两列收成一列：96px 的预览加上一个文件框，在 375px 的屏上
     会把文件名挤成三行省略号，预览反而更像被裁坏了。 */
  .avatar-set { flex-direction: column; align-items: center; gap: 12px; }
  .avatar-set-forms { width: 100%; }
}