.blog-comments { margin: 48px 0; padding: 28px; border: 1px solid #c4d7ce; border-radius: 18px; background: #f0f6f2; color: #173b2c; }
.blog-comments h2 { margin-top: 0; }
.comment-form { display: grid; gap: 16px; margin: 24px 0; }
.comment-form[hidden], #moderation-controls[hidden] { display: none; }
.comment-form label { display: grid; gap: 6px; font-weight: 600; }
.comment-form input:not([type=checkbox]), .comment-form select, .comment-form textarea { width: 100%; box-sizing: border-box; min-height: 44px; padding: 12px; border: 1px solid #708e7e; border-radius: 8px; font: inherit; background: #fff; color: #173b2c; }
.comment-form textarea { resize: vertical; }
.comment-form input:focus-visible, .comment-form select:focus-visible, .comment-form textarea:focus-visible, .comment-form button:focus-visible { outline: 3px solid #a65b1a; outline-offset: 3px; }
.comment-form .comment-consent { display: flex; align-items: start; gap: 12px; font-weight: 400; }
.comment-consent input { width: 20px; height: 20px; flex-shrink: 0; margin-top: 4px; }
.comment-note { font-size: .9rem; }
.comment-form .comment-honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.comment-card { margin: 18px 0; padding: 18px; border-radius: 12px; background: #fff; border: 1px solid #c4d7ce; overflow-wrap: anywhere; }
.comment-card time { display: block; font-size: .85rem; color: #526d60; }
.comment-card p { white-space: pre-wrap; }
.comment-reply { border-left: 3px solid #0e7c66; padding-left: 14px; }
.comment-form button:disabled { opacity: .6; cursor: wait; }
.moderation-actions { display: flex; gap: 12px; flex-wrap: wrap; }
@media(max-width: 600px) { .blog-comments { padding: 18px; } }