/* ============================================================
   留言区
   颜色全部走 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); }