/* ============================================================
   留言区
   颜色全部走 var(--color-*)，所以日夜、6 个主题色都自动适配。
   文章页里它被锁进 <article>，所以自动是深色的。
   ============================================================ */

.cm-wrap,
#comment-board {
  margin-top: 2.6em;
  padding-top: 1.6em;
  border-top: 1px solid var(--color-border);
}

#comment-board { border-top: none; padding-top: 0; }

.cm-h {
  font-family: var(--font-heading);
  font-size: 1.25em;
  letter-spacing: 0.06em;
  color: var(--color-heading);
  margin-bottom: 1em;
}

/* ---------- 表单 ---------- */
.cm-form { margin-bottom: 2em; }

.cm-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6em;
  align-items: center;
  margin-bottom: 0.6em;
}

.cm-in {
  padding: 0.6em 0.85em;
  font: inherit;
  font-size: 0.92em;
  color: var(--color-body-text);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  min-width: 0;
}

body.theme-light .cm-in { background: rgba(0, 0, 0, 0.035); }

.cm-in:focus { outline: none; border-color: var(--color-link-hover); }
.cm-name { flex: 0 0 9em; }
.cm-code { flex: 0 0 9em; }

.cm-text {
  width: 100%;
  min-height: 5.2em;
  resize: vertical;
  line-height: 1.75;
  font-family: inherit;
}

.cm-btn {
  padding: 0.55em 1.1em;
  font: inherit;
  font-size: 0.88em;
  color: var(--color-body-text);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}

body.theme-light .cm-btn { background: rgba(0, 0, 0, 0.04); }

.cm-btn:hover { border-color: var(--color-link-hover); color: var(--color-link-hover); }

.cm-actions { margin-top: 0.2em; }
.cm-msg { font-size: 0.84em; color: var(--color-quiet); }
.cm-ok  { color: #5fc98a; }
.cm-err { color: #e0705f; }

/* ---------- 列表 ---------- */
.cm-item {
  display: flex;
  gap: 0.9em;
  padding: 1em 0;
  border-bottom: 1px solid var(--color-border);
}

.cm-item:last-child { border-bottom: none; }

/* 头像：有图显示图，没有就露出昵称首字 */
.cm-av {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--color-link-hover) 26%, transparent);
  border: 1px solid var(--color-border);
}

.cm-av img { width: 100%; height: 100%; object-fit: cover; display: block; }

.cm-av b {
  font-size: 1em;
  font-weight: 600;
  color: var(--color-link-hover);
}

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

.cm-meta {
  display: flex;
  align-items: baseline;
  gap: 0.7em;
  margin-bottom: 0.35em;
  font-size: 0.86em;
}

.cm-meta b { color: var(--color-heading); font-weight: 600; }
.cm-meta span { color: var(--color-quiet); font-size: 0.9em; }
.cm-del {
  margin-left: auto;
  padding: 0.15em 0.6em;
  font: inherit;
  font-size: 0.92em;
  color: var(--color-quiet);
  background: none;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  cursor: pointer;
}
.cm-del:hover { color: #e0705f; border-color: #e0705f; }

.cm-text-body { line-height: 1.85; word-break: break-word; }
.cm-empty { font-size: 0.9em; color: var(--color-quiet); }

/* ---------- 待审头像（只有管理员看得到）---------- */
.cm-pending {
  margin-bottom: 1.6em;
  padding: 1em;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--color-border);
  border-radius: 10px;
}

body.theme-light .cm-pending { background: rgba(0, 0, 0, 0.03); }

.cm-pending h3 { font-size: 0.95em; color: var(--color-heading); margin-bottom: 0.7em; }

.cm-pend-item { display: flex; align-items: center; gap: 0.8em; margin-bottom: 0.6em; }
.cm-pend-item img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 1px solid var(--color-border); }
.cm-pend-item span { flex: 1 1 auto; font-size: 0.86em; color: var(--color-body-text); }

@media (max-width: 700px) {
  .cm-name, .cm-code { flex: 1 1 45%; }
  .cm-av { flex: 0 0 32px; width: 32px; height: 32px; }
}

/* ============================================================
   「我的」页面 + 留言区补充
   ============================================================ */

.cm-hint { font-size: 0.86em; line-height: 1.8; color: var(--color-quiet); }
.cm-hint a { color: var(--color-link-hover); }

/* 已登录时，留言框上方那行「以 XX 的身份留言」 */
.cm-who {
  display: flex;
  align-items: center;
  gap: 0.7em;
  margin-bottom: 0.7em;
  font-size: 0.88em;
  color: var(--color-quiet);
}
.cm-who b { color: var(--color-heading); }
.cm-who .cm-av { flex: 0 0 30px; width: 30px; height: 30px; }

.cm-primary {
  border-color: var(--color-link-hover);
  color: var(--color-link-hover);
}

/* ---------- 我的 ---------- */
.me-tabs { display: flex; gap: 0.6em; margin-bottom: 1.4em; }
.me-tabs .cm-btn.is-on {
  border-color: var(--color-link-hover);
  color: var(--color-link-hover);
  background: color-mix(in srgb, var(--color-link-hover) 12%, transparent);
}

.me-form { display: flex; flex-direction: column; gap: 0.7em; max-width: 24em; }
.me-form .cm-in { width: 100%; }
.me-form .cm-btn { align-self: flex-start; }

.me-card {
  display: flex;
  align-items: center;
  gap: 1.2em;
  flex-wrap: wrap;
  padding: 1.4em;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  max-width: 34em;
}

body.theme-light .me-card { background: rgba(0, 0, 0, 0.025); }

.me-av {
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--color-link-hover) 26%, transparent);
  border: 1px solid var(--color-border);
}

.me-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.me-av b { font-size: 1.6em; font-weight: 600; color: var(--color-link-hover); }

.me-info { flex: 1 1 8em; min-width: 0; }
.me-nick {
  font-family: var(--font-heading);
  font-size: 1.2em;
  color: var(--color-heading);
  margin-bottom: 0.2em;
  word-break: break-word;
}

.me-acts { display: flex; gap: 0.6em; align-items: center; }
.me-msg { margin-top: 0.9em; font-size: 0.86em; color: var(--color-quiet); }

/* 管理员标记 */
.me-tag {
  display: inline-block;
  margin-left: 0.3em;
  padding: 0.05em 0.5em;
  font-size: 0.82em;
  font-weight: 400;
  color: var(--color-link-hover);
  border: 1px solid var(--color-link-hover);
  border-radius: 999px;
}
.me-users { margin-top: 1.4em; }

/* 头像：图片绝对定位盖在字母上（不再靠 JS 切 hidden） */
.cm-av, .me-av { position: relative; }
.cm-av img, .me-av img { position: absolute; inset: 0; z-index: 1; }
.cm-av b, .me-av b { position: relative; z-index: 0; }

/* ---------- 用户列表：头像放大到能看清 ---------- */
.me-user {
  display: flex;
  align-items: center;
  gap: 0.9em;
  padding: 0.55em 0;
  border-bottom: 1px solid var(--color-border);
}
.me-user:last-child { border-bottom: none; }

.me-user-name { flex: 1 1 auto; font-size: 0.94em; color: var(--color-body-text); }

/* 列表里的小头像（比留言区那个大一圈，看得清） */
.me-av-sm { flex: 0 0 44px; width: 44px; height: 44px; }
.me-av-sm b { font-size: 1.15em; }

/* ---------- 角色标签 ---------- */
.cm-role {
  font-size: 0.86em;
  font-weight: 400;
  padding: 0.05em 0.45em;
  border-radius: 999px;
  color: var(--color-link-hover);
  border: 1px solid var(--color-link-hover);
}
.cm-role.cm-owner {
  color: #e8b45c;
  border-color: #e8b45c;
}

/* ---------- 回复 ---------- */
.cm-re {
  margin-left: 0.2em;
  padding: 0.1em 0.5em;
  font: inherit;
  font-size: 0.86em;
  color: var(--color-quiet);
  background: none;
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
}
.cm-re:hover { color: var(--color-link-hover); border-color: var(--color-border); }

.cm-del { margin-left: 0 !important; }

/* 回复缩进一层，左边一条竖线 */
.cm-reply {
  margin-left: 2.6em;
  padding-left: 1em;
  border-left: 2px solid var(--color-border);
  border-bottom: none;
}

.cm-replying {
  margin-bottom: 0.5em;
  font-size: 0.86em;
  color: var(--color-quiet);
}
.cm-replying b { color: var(--color-link-hover); }
.cm-replying a { color: var(--color-quiet); margin-left: 0.5em; }

/* ---------- 站长标签在日间要显眼一点 ----------
   夜间那个金色（#e8b45c）配暖白底太淡 ✗
   但文章页里的留言区是【深色】的，那儿不能跟着变深 ✗
   → 单独把文章里的那条规则盖回来。 */
body.theme-light .cm-role.cm-owner {
  color: #9a6410;
  border-color: #9a6410;
  background: rgba(154, 100, 16, 0.09);
}
body.theme-light .site-wrapper > article .cm-role.cm-owner {
  color: #e8b45c;
  border-color: #e8b45c;
  background: none;
}

/* 管理员标签在日间也加深一点，两个标签放一起才分得清 */
body.theme-light .cm-role:not(.cm-owner) {
  color: #6d451c;
  border-color: #6d451c;
  background: rgba(109, 69, 28, 0.08);
}
body.theme-light .site-wrapper > article .cm-role:not(.cm-owner) {
  color: var(--color-link-hover);
  border-color: var(--color-link-hover);
  background: none;
}

/* ---------- 换头像的确认弹窗 ---------- */
.me-modal {
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.4em;
  background: rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  animation: meFadeIn .18s ease;
}
@keyframes meFadeIn { from { opacity: 0 } to { opacity: 1 } }

.me-modal-box {
  width: 100%;
  max-width: 22em;
  padding: 1.6em 1.5em 1.3em;
  background: #1b1b1f;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  animation: mePop .2s ease;
}
body.theme-light .me-modal-box {
  background: #faf7f0;
  box-shadow: 0 24px 60px rgba(70, 56, 36, 0.25);
}
@keyframes mePop { from { transform: scale(.96); opacity: 0 } to { transform: none; opacity: 1 } }

.me-modal-box h3 {
  font-family: var(--font-heading);
  font-size: 1.1em;
  color: var(--color-heading);
  margin-bottom: 0.7em;
}
.me-modal-box p { line-height: 1.85; color: var(--color-body-text); margin-bottom: 1.3em; }
.me-modal-box p b { color: var(--color-link-hover); }
.me-modal-btns { display: flex; gap: 0.7em; justify-content: flex-end; }