/* ===================== 评论组件 ===================== */
#moe-comments { margin: 32px 0; }
#moe-comments .mc-header {
  display: flex; align-items: baseline; gap: 8px; margin-bottom: 20px;
}
#moe-comments .mc-title { font-size: 18px; color: #222; }
#moe-comments .mc-count { font-size: 14px; color: #aaa; }
#moe-comments .mc-form { margin-bottom: 24px; }
#moe-comments .mc-login-hint {
  padding: 16px; background: #f7f7f8; border-radius: 12px; font-size: 14px; color: #999; text-align: center;
}
#moe-comments .mc-login-hint a { color: #34c151; }
#moe-comments .mc-logged-as { font-size: 13px; color: #888; margin-bottom: 10px; }
#moe-comments .mc-form textarea {
  box-sizing: border-box; width: 100%; padding: 13px 16px; border: 1.5px solid #e6e6e6; border-radius: 14px;
  font-size: 15px; line-height: 1.6; color: #222; background: #fafafa; outline: none; resize: vertical;
  transition: border-color .2s, box-shadow .2s;
}
#moe-comments .mc-form textarea:focus { border-color: #34c151; box-shadow: 0 0 0 4px rgba(52,193,81,.12); }
#moe-comments .mc-form-actions {
  display: flex; justify-content: space-between; align-items: center; margin-top: 10px;
}
#moe-comments .mc-char-count { font-size: 12px; color: #aaa; }
#moe-comments .mc-submit {
  height: 40px; padding: 0 24px; border: none; border-radius: 12px;
  background: linear-gradient(135deg, #34c151 0%, #28a745 100%); color: #fff;
  font-size: 14px; font-weight: 600; cursor: pointer;
  box-shadow: 0 3px 10px rgba(52,193,81,.25);
  transition: transform .1s, filter .2s;
}
#moe-comments .mc-submit:hover { filter: brightness(1.06); }
#moe-comments .mc-submit:active { transform: scale(.97); }

/* 评论列表 */
#moe-comments .mc-comment {
  display: flex; gap: 14px; padding: 18px 0; border-bottom: 1px solid #f0f0f0;
}
#moe-comments .mc-comment:last-child { border-bottom: none; }
#moe-comments .mc-comment.mc-pinned {
  background: linear-gradient(160deg, #f0fdf2 0%, #fafafa 100%); border-radius: 14px;
  padding: 18px 16px; border: 1px solid rgba(52,193,81,.15);
}
#moe-comments .mc-pin-badge {
  position: absolute; top: 8px; right: 12px; font-size: 11px; color: #28a745;
}
#moe-comments .mc-comment-avatar {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; overflow: hidden;
}
#moe-comments .mc-comment-avatar img { width: 100%; height: 100%; object-fit: cover; }
#moe-comments .mc-avatar-placeholder {
  display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
  background: #e0e0e0; color: #888; font-size: 15px; font-weight: 600; border-radius: 50%;
}
#moe-comments .mc-comment-body { flex: 1; min-width: 0; }
#moe-comments .mc-comment-meta { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; }
#moe-comments .mc-comment-nick { font-size: 14px; font-weight: 600; color: #333; }
#moe-comments .mc-comment-time { font-size: 12px; color: #bbb; }
#moe-comments .mc-comment-content { font-size: 15px; line-height: 1.75; color: #444; word-break: break-word; }
#moe-comments .mc-comment-actions { display: flex; gap: 12px; margin-top: 10px; }
#moe-comments .mc-like-btn {
  display: inline-flex; align-items: center; gap: 4px; padding: 0; border: none; background: none;
  font-size: 13px; color: #aaa; cursor: pointer; transition: color .2s;
}
#moe-comments .mc-like-btn:hover { color: #e74c3c; }
#moe-comments .mc-like-btn.liked { color: #e74c3c; }
#moe-comments .mc-delete-btn {
  padding: 0; border: none; background: none; color: #ccc; cursor: pointer; transition: color .2s;
}
#moe-comments .mc-delete-btn:hover { color: #e74c3c; }
#moe-comments .mc-more { text-align: center; margin-top: 18px; }
#moe-comments .mc-loadmore {
  padding: 10px 32px; border: 1px solid #e0e0e0; border-radius: 12px; background: #fff;
  font-size: 14px; color: #666; cursor: pointer; transition: border-color .2s, color .2s;
}
#moe-comments .mc-loadmore:hover { border-color: #34c151; color: #34c151; }

/* ---------- 暗色主题 ---------- */
body.theme-dark #moe-comments .mc-title { color: #f5f5f7; }
body.theme-dark #moe-comments .mc-login-hint { background: #2c2c2e; }
body.theme-dark #moe-comments .mc-form textarea {
  background: #2c2c2e; border-color: rgba(255,255,255,.12); color: #f5f5f7;
}
body.theme-dark #moe-comments .mc-comment { border-color: rgba(255,255,255,.08); }
body.theme-dark #moe-comments .mc-comment.mc-pinned {
  background: linear-gradient(160deg, #1a2a1a 0%, #1c1c1e 100%); border-color: rgba(52,193,81,.25);
}
body.theme-dark #moe-comments .mc-comment-nick { color: #f5f5f7; }
body.theme-dark #moe-comments .mc-comment-content { color: #c7c7cc; }
body.theme-dark #moe-comments .mc-avatar-placeholder { background: #3a3a3c; color: #8e8e93; }
body.theme-dark #moe-comments .mc-loadmore { background: #1c1c1e; border-color: rgba(255,255,255,.12); color: #8e8e93; }

@media (prefers-color-scheme: dark) {
  body.auto-theme #moe-comments .mc-title { color: #f5f5f7; }
  body.auto-theme #moe-comments .mc-login-hint { background: #2c2c2e; }
  body.auto-theme #moe-comments .mc-form textarea {
    background: #2c2c2e; border-color: rgba(255,255,255,.12); color: #f5f5f7;
  }
  body.auto-theme #moe-comments .mc-comment { border-color: rgba(255,255,255,.08); }
  body.auto-theme #moe-comments .mc-comment.mc-pinned {
    background: linear-gradient(160deg, #1a2a1a 0%, #1c1c1e 100%); border-color: rgba(52,193,81,.25);
  }
  body.auto-theme #moe-comments .mc-comment-nick { color: #f5f5f7; }
  body.auto-theme #moe-comments .mc-comment-content { color: #c7c7cc; }
  body.auto-theme #moe-comments .mc-avatar-placeholder { background: #3a3a3c; color: #8e8e93; }
  body.auto-theme #moe-comments .mc-loadmore { background: #1c1c1e; border-color: rgba(255,255,255,.12); color: #8e8e93; }
}

/* ===================== 评论卡片容器 ===================== */
/* 与 help layout 的 article 样式完全一致 */
.comments-card {
  margin-top: 32px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 0 32px;
  border-radius: 16px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
}
@media (max-width: 640px) {
  .comments-card { padding: 24px 20px; border-radius: 12px; }
}
body.theme-dark .comments-card {
  background: rgba(45, 45, 48, 0.95);
  border-color: rgba(255, 255, 255, 0.08);
}
@media (prefers-color-scheme: dark) {
  body.auto-theme .comments-card {
    background: rgba(45, 45, 48, 0.95);
    border-color: rgba(255, 255, 255, 0.08);
  }
}

/* 空状态 / 加载 / 错误 */
#moe-comments .mc-empty,
#moe-comments .mc-loading,
#moe-comments .mc-error {
  text-align: center; padding: 40px 20px; font-size: 14px; color: #aaa;
}
#moe-comments .mc-error { color: #e74c3c; }
body.theme-dark #moe-comments .mc-empty,
body.theme-dark #moe-comments .mc-loading { color: #8e8e93; }
@media (prefers-color-scheme: dark) {
  body.auto-theme #moe-comments .mc-empty,
  body.auto-theme #moe-comments .mc-loading { color: #8e8e93; }
}