.blog-comments {
  margin-top: 1.6rem;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(148, 163, 184, .22);
}
.blog-comments > summary {
  cursor: pointer;
  color: var(--accent);
  font-size: 1rem;
  font-weight: 700;
  padding: .45rem 0;
}
.blog-comments > summary::marker { color: var(--accent); }
.blog-comments[open] > summary { margin-bottom: 1rem; }
.blog-comments .comments-status {
  color: var(--muted);
  font-size: .95rem;
  margin: 0 0 1rem;
}
.blog-comments .comments-status:empty { display: none; }
.comments-list { display: grid; gap: .8rem; }
.blog-comments .comment-entry {
  padding: 1rem 1.15rem;
  border: 1px solid rgba(148, 163, 184, .18);
  border-radius: 14px;
  background: rgba(15, 23, 42, .55);
  overflow-wrap: anywhere;
}
.comment-entry strong { color: var(--text); font-size: .95rem; }
.blog-comments .comment-entry p {
  color: var(--text);
  font-size: 1rem;
  line-height: 1.65;
  white-space: pre-wrap;
  margin: .4rem 0 0;
}
.comments-auth {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  margin-top: 1rem;
}
.blog-comments .comments-auth a,
.blog-comments .comments-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: .7rem 1rem;
  border-radius: 12px;
  border: 1px solid var(--accent);
  font: inherit;
  font-size: .95rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}
.blog-comments .comments-auth a { color: var(--accent); background: transparent; }
.blog-comments .comments-auth a:hover { color: var(--text); background: rgba(148, 163, 184, .1); }
.comments-form { margin-top: 1.2rem; }
.comments-form label { display: block; color: var(--text); font-size: .95rem; font-weight: 600; }
.comments-form textarea {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-height: 130px;
  margin: .6rem 0 .85rem;
  padding: .9rem 1rem;
  resize: vertical;
  border: 1px solid rgba(148, 163, 184, .4);
  border-radius: 12px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  line-height: 1.6;
}
.blog-comments .comments-submit { color: #0f172a; background: var(--accent); }
.blog-comments .comments-submit:hover { background: var(--accent-hover); }
.blog-comments .comments-submit:disabled { opacity: .6; cursor: wait; }
.blog-comments :is(summary, a, button, textarea):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}
.blog-comments [hidden] { display: none !important; }
@media (max-width: 640px) {
  .comments-auth { flex-direction: column; }
  .blog-comments .comments-submit { width: 100%; }
  .blog-comments .comment-entry { padding: .9rem; }
}

.blog-comments .comments-moderate { margin-top:.75rem; padding:.45rem .7rem; border:1px solid #fda4af; border-radius:8px; background:transparent; color:#fda4af; cursor:pointer; font:inherit; font-size:.85rem; }
.blog-comments .comments-admin-link { display:inline-block; margin-top:1rem; color:var(--accent); font-size:.9rem; }