/* 文章、求瓜页和异步评论共用；按钮与点赞图标直接使用需求提供的独立素材。 */
#comments .comment-separator {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}
#comments .comment-sort { display: flex; flex-shrink: 0; align-items: center; }
#comments .comment-sort-button {
  appearance: none;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: #999;
  cursor: pointer;
  font: inherit;
  font-size: .875rem;
  line-height: 1.3;
  padding: 0 .625rem;
}
#comments .comment-sort-button + .comment-sort-button { border-left: 1px solid #555; }
#comments .comment-sort-button:last-child { padding-right: 0; }
#comments .comment-sort-button[aria-pressed="true"] { color: #1abc9c; }
#comments .comment-body > .comment-reply {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
#comments .comment-like {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .375rem;
  padding: .125rem 0;
  margin: 0;
  min-height: 1.25rem;
  background: none;
  border: 0;
  box-shadow: none;
  color: #aaa;
  cursor: pointer;
  font: inherit;
  font-weight: 400;
  line-height: 1;
}
#comments .comment-like[aria-pressed="true"] { color: #df9900; }
#comments .comment-like:disabled { cursor: wait; }
#comments .comment-like-icon {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  background: url("images/like.png") center / contain no-repeat;
}
#comments .comment-like[aria-pressed="true"] .comment-like-icon { background-image: url("images/like-active.png"); }
#comments .comment-sort-button:focus-visible,
#comments .comment-like:focus-visible { outline: 2px solid #1abc9c; outline-offset: 3px; }
#comments .comment-badges { display: inline; margin-right: .375rem; white-space: nowrap; }
#comments .comment-content .comment-badge {
  display: inline-block !important;
  width: 3.25rem !important;
  height: 1.125rem !important;
  margin: 0 .375rem 0 0;
  vertical-align: text-bottom;
}
#comments .comment-content .comment-badge:last-child { margin-right: 0; }
#comments .comment-author .comment-official {
  display: inline-block;
  margin-left: .375rem;
  padding: 0 .2rem;
  border: 1px solid #a25eab;
  border-radius: .2rem;
  color: #c27fcb;
  font-size: .625rem;
  line-height: 1.1;
  vertical-align: middle;
}
.comment-status {
  position: fixed;
  z-index: 999999;
  left: 50%;
  bottom: 20%;
  transform: translateX(-50%);
  padding: .75rem 1.25rem;
  border-radius: .375rem;
  background: rgba(0,0,0,.85);
  color: #fff;
}
.comment-login-dialog {
  width: min(620px, 94vw);
  max-width: 94vw;
  padding: 0;
  background: #262626;
  color: #eee;
  border: 1px solid #555;
  border-radius: .5rem;
}
.comment-login-dialog::backdrop { background: rgba(0,0,0,.7); }
.comment-login-title { font-size: 1rem; padding: 1rem; margin: 0; }
.comment-login-close { position: absolute; right: .5rem; top: .25rem; border: 0; background: none; color: #eee; cursor: pointer; font-size: 1.75rem; }
.comment-login-frame { display: block; border: 0; width: 100%; height: min(700px, 75dvh); }
@media (max-width: 767px) {
  #comments .comment-sort-button { font-size: .75rem; padding: .25rem .5rem; }
  #comments .comment-body > .comment-reply { gap: 1rem; }
}
@media (max-width: 359px) {
  #comments .comment-separator { gap: .25rem; }
  #comments .comment-num { font-size: 1rem; }
  #comments .comment-sort-button { padding-left: .375rem; padding-right: .375rem; }
}