.comments {
  width: 100%;
  max-width: 760px;
  margin: 60px auto 80px;
  padding: 0 24px;
  font-family: var(--sans, -apple-system, BlinkMacSystemFont, sans-serif);
  color: var(--text, #ddd);
}
.comments-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 24px;
  border-bottom: 1px solid rgba(200, 168, 107, 0.2);
  padding-bottom: 12px;
}
.comments-count {
  font-size: 13px; letter-spacing: 0.1em;
  color: var(--gold, #c8a86b); text-transform: uppercase;
}
.comments-sort { display: flex; gap: 8px; font-size: 12px; }
.comments-sort button {
  background: none; border: 1px solid transparent;
  color: #888; padding: 4px 10px; cursor: pointer;
  border-radius: 3px; font-family: inherit; letter-spacing: 0.05em;
}
.comments-sort button.active {
  color: var(--gold, #c8a86b); border-color: var(--gold, #c8a86b);
}
.comments-list { margin: 0; padding: 0; list-style: none; }
.comment {
  display: flex; gap: 14px; padding: 16px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.comment-avatar {
  flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 600; font-size: 14px;
}
.comment-body { flex: 1; min-width: 0; }
.comment-meta {
  display: flex; gap: 10px; align-items: center;
  font-size: 13px; margin-bottom: 4px;
}
.comment-nick { font-weight: 600; color: var(--text, #ddd); }
.comment-time { color: #666; font-size: 11px; letter-spacing: 0.04em; }
.comment-text {
  font-size: 14px; line-height: 1.7; color: #ccc;
  white-space: pre-wrap; word-wrap: break-word;
}
.comment-text a { color: var(--gold, #c8a86b); }
.comment-actions { display: flex; gap: 16px; margin-top: 8px; font-size: 12px; }
.comment-actions button {
  background: none; border: none; color: #888;
  cursor: pointer; padding: 0; font-family: inherit; font-size: inherit;
}
.comment-actions button:hover, .comment-like.liked { color: var(--gold, #c8a86b); }
.comment-replies {
  margin-left: 50px; padding-left: 18px;
  border-left: 1px solid rgba(200, 168, 107, 0.15);
  list-style: none;
}
.comment-form {
  margin-top: 32px; padding: 20px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(200, 168, 107, 0.15); border-radius: 6px;
}
.comment-form-row {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 12px; margin-bottom: 12px;
}
.comment-form input, .comment-form textarea {
  width: 100%; background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text, #ddd); padding: 10px 12px; border-radius: 4px;
  font-family: inherit; font-size: 14px; box-sizing: border-box;
}
.comment-form textarea { min-height: 100px; resize: vertical; }
.comment-form input:focus, .comment-form textarea:focus {
  outline: none; border-color: var(--gold, #c8a86b);
}
.comment-form-email-note { font-size: 11px; color: #666; margin-top: -8px; margin-bottom: 12px; }
.comment-form-counter { text-align: right; font-size: 11px; color: #666; margin-top: 4px; }
.comment-form-submit {
  background: var(--gold, #c8a86b); color: #0a0a0a; border: none;
  padding: 10px 22px; border-radius: 4px; cursor: pointer;
  font-family: inherit; font-weight: 600; letter-spacing: 0.05em; margin-top: 12px;
}
.comment-form-submit:disabled { opacity: 0.5; cursor: not-allowed; }
.comment-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.comment-toast {
  position: fixed; top: 20px; left: 50%; transform: translateX(-50%);
  background: var(--gold, #c8a86b); color: #0a0a0a;
  padding: 10px 20px; border-radius: 4px; font-size: 14px;
  z-index: 9999; animation: comment-toast-slide 3s ease forwards;
}
@keyframes comment-toast-slide {
  0%, 90% { opacity: 1; transform: translate(-50%, 0); }
  100% { opacity: 0; transform: translate(-50%, -20px); }
}
.comment-error { color: #c66; font-size: 12px; margin-top: 6px; }
.comment-reply-form { margin-top: 12px; margin-left: 50px; }
@media (max-width: 640px) {
  .comments { padding: 0 16px; }
  .comment-form-row { grid-template-columns: 1fr; }
  .comment-replies { margin-left: 16px; padding-left: 12px; }
  .comment-reply-form { margin-left: 0; }
}