.blog-community {
  width: min(100%, 980px);
  margin: clamp(2rem, 5vw, 4.5rem) auto 1.5rem;
  color: #28594d;
}

.blog-reactions-block,
.blog-comments-block,
.blog-comments-admin-panel {
  border: 1px solid rgba(53, 91, 79, .22);
  border-radius: 28px;
  background: rgba(255, 253, 247, .82);
  box-shadow: 0 18px 42px rgba(65, 52, 37, .06);
}

.blog-reactions-block { padding: 1.25rem clamp(1rem, 3vw, 2rem); }
.blog-comments-block { margin-top: 1rem; padding: clamp(1.25rem, 3vw, 2rem); }
.blog-community-heading { margin: 0 0 1rem; text-align: center; font-size: clamp(1.35rem, 2vw, 1.85rem); font-weight: 400; }

.blog-reactions-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(64px, 92px));
  justify-content: center;
  gap: .65rem;
}

.blog-reaction-button {
  min-height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  border: 1px solid rgba(169, 113, 70, .28);
  border-radius: 999px;
  background: rgba(255, 250, 242, .9);
  color: #71482f;
  cursor: pointer;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.blog-reaction-button:hover { transform: translateY(-2px); border-color: #bd845c; }
.blog-reaction-button.is-active { background: #efd4b5; border-color: #b87848; box-shadow: inset 0 0 0 1px rgba(184, 120, 72, .25); }
.blog-reaction-button:disabled { opacity: .58; cursor: wait; }
.reaction-emoji { font-family: "Apple Color Emoji", "Segoe UI Emoji", sans-serif; font-size: 1.55rem; line-height: 1; }
.reaction-count { min-width: 1ch; font: 600 .9rem/1 sans-serif; }

.blog-comments-list { display: grid; gap: .75rem; }
.blog-comment-card {
  padding: 1rem 1.1rem;
  border: 1px solid rgba(58, 95, 83, .16);
  border-radius: 18px;
  background: rgba(255, 255, 255, .62);
}
.blog-comment-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; color: #28594d; }
.blog-comment-head time { color: #7a786e; font-size: .78rem; }
.blog-comment-body { margin: .55rem 0 0; color: #55574f; white-space: pre-wrap; overflow-wrap: anywhere; }
.blog-comments-empty { margin: .75rem 0; text-align: center; color: #77796f; }

.blog-comment-form { display: grid; gap: .65rem; margin-top: 1.25rem; }
.blog-comment-form label { color: #6f432c; }
.blog-comment-textarea,
.blog-admin-editor textarea {
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
  border: 1px solid rgba(54, 91, 79, .28);
  border-radius: 16px;
  padding: .9rem 1rem;
  background: rgba(255, 255, 255, .78);
  color: #384d46;
  font: inherit;
}
.blog-comment-textarea:focus,
.blog-admin-editor textarea:focus { outline: 2px solid rgba(183, 122, 77, .28); border-color: #b77a4d; }
.blog-comment-submit,
.blog-admin-actions button,
.blog-admin-editor-actions button,
.blog-admin-filters button {
  border: 1px solid #bd845c;
  border-radius: 999px;
  padding: .65rem 1.1rem;
  background: #c8895d;
  color: #fffdf8;
  font: inherit;
  cursor: pointer;
}
.blog-comment-submit { justify-self: center; min-width: 180px; }
.blog-comment-submit:disabled,
.blog-admin-actions button:disabled { opacity: .55; cursor: wait; }
.blog-comment-login { margin: 1.15rem 0 0; text-align: center; color: #72756d; }
.blog-comment-login a { color: #9a5b35; }

.blog-community-message,
.blog-community-error { margin: 0 0 1rem; padding: .75rem 1rem; border-radius: 14px; text-align: center; }
.blog-community-message.is-success { background: #e5f1e9; color: #2f6653; }
.blog-community-message.is-notice { background: #f6ead8; color: #805735; }
.blog-community-message.is-error,
.blog-community-error { background: #f8dfe0; color: #8b4145; }

.admin-comments-tab { position: relative; }
.admin-comments-tab .admin-comments-icon {
  position: relative;
  display: inline-block;
  flex: 0 0 18px;
  width: 18px;
  height: 14px;
  border: 1.5px solid currentColor;
  border-radius: 4px;
  font-style: normal;
  line-height: 1;
}
.admin-comments-tab .admin-comments-icon::after {
  content: "";
  position: absolute;
  left: 3px;
  bottom: -4px;
  width: 5px;
  height: 5px;
  border-left: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  background: #fff;
  transform: skewY(-35deg);
}
.admin-comments-tab.active .admin-comments-icon::after,
.admin-comments-tab.is-active .admin-comments-icon::after { background: #e9eee7; }
.admin-content[hidden] { display: none !important; }
.admin-comments-badge {
  display: inline-grid;
  place-items: center;
  min-width: 1.35rem;
  height: 1.35rem;
  margin-left: .45rem;
  padding: 0 .25rem;
  border-radius: 999px;
  background: #b44e57;
  color: white;
  font: 700 .72rem/1 sans-serif;
}
.admin-comments-badge[hidden] { display: none; }
.blog-comments-admin-panel { margin: 1rem auto 2rem; padding: clamp(1rem, 3vw, 2rem); }
.blog-comments-admin-panel.is-loading { opacity: .65; }
.blog-admin-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.blog-admin-header h2 { margin: 0; color: #28594d; font-weight: 400; }
.blog-moderation-switch { display: flex; align-items: center; gap: .75rem; max-width: 480px; cursor: pointer; }
.blog-moderation-switch input { width: 2.8rem; height: 1.45rem; accent-color: #417365; }
.blog-moderation-switch span { display: grid; gap: .2rem; }
.blog-moderation-switch small { color: #77796f; line-height: 1.25; }

.blog-admin-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .7rem; margin: 1rem 0; }
.blog-admin-summary > div { display: flex; align-items: center; justify-content: space-between; min-height: 54px; padding: .6rem .85rem; border-radius: 16px; background: #f2ede3; }
.blog-admin-summary .summary-published { background: #e2f0eb; }
.blog-admin-summary .summary-quarantine { background: #f8dfe1; }
.blog-admin-summary .summary-trash { background: #e8e7e3; }
.blog-admin-summary strong { font-size: 1.35rem; }
.blog-admin-filters { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0; }
.blog-admin-filters button { background: transparent; color: #80502f; }
.blog-admin-filters button.is-active { background: #c8895d; color: white; }
.blog-admin-comment-list { display: grid; gap: .8rem; }
.blog-admin-comment { padding: 1rem; border: 1px solid rgba(76, 89, 83, .15); border-radius: 18px; background: #eef5f2; }
.blog-admin-comment.status-quarantine { background: #f9e2e3; border-color: rgba(172, 72, 81, .25); }
.blog-admin-comment.status-trash { background: #ecebe7; color: #6f706c; }
.blog-admin-comment-top { display: flex; justify-content: space-between; gap: .75rem; }
.blog-admin-comment-identity { display: grid; gap: .12rem; }
.blog-admin-comment-identity span { color: #74766f; font-size: .78rem; }
.blog-comment-status { align-self: start; padding: .3rem .65rem; border-radius: 999px; background: rgba(255,255,255,.64); font-size: .78rem; }
.blog-admin-post-link { display: inline-block; margin-top: .6rem; color: #8a5332; }
.blog-admin-comment-body { white-space: pre-wrap; overflow-wrap: anywhere; }
.blog-admin-actions,
.blog-admin-editor-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }
.blog-admin-actions button.is-secondary,
.blog-admin-editor-actions button.is-secondary { background: transparent; color: #80502f; }
.blog-admin-actions button.is-danger { border-color: #ad6468; background: #ad6468; }
.blog-admin-editor { margin-top: .75rem; }
.blog-moderation-privacy-note { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid rgba(119, 91, 64, .18); }

@media (max-width: 720px) {
  .blog-community { width: 100%; margin-top: 1.5rem; }
  .blog-reactions-block, .blog-comments-block { border-radius: 20px; }
  .blog-reactions-row { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .32rem; }
  .blog-reaction-button { min-width: 0; min-height: 46px; gap: .22rem; padding: .35rem .2rem; }
  .reaction-emoji { font-size: 1.25rem; }
  .reaction-count { font-size: .72rem; }
  .blog-comment-head { align-items: flex-start; flex-direction: column; gap: .2rem; }
  .blog-admin-header { align-items: flex-start; flex-direction: column; }
  .blog-admin-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .blog-comments-admin-panel { border-radius: 20px; }
}

@media (max-width: 380px) {
  .blog-reaction-button { flex-direction: column; gap: .05rem; }
  .reaction-emoji { font-size: 1.15rem; }
}