/* Реакции и анонимные комментарии под статьями и книгами */
.react .reaction-buttons{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  width:min(100%,820px);
  margin-left:auto;
  margin-right:auto;
  align-items:stretch;
  justify-content:center;
}
.react .reaction-buttons > button{
  min-width:0;
}
.react .reaction-buttons > .status{
  grid-column:1/-1;
}
.react .reaction-buttons > button.comment-toggle{
  grid-column:1/-1;
  justify-self:center;
  width:min(100%,340px);
  white-space:normal;
  line-height:1.2;
  padding-top:9px;
  padding-bottom:9px;
}

.comments-panel{
  width:100%;
  margin:0 auto 18px;
  padding:20px;
  border:1px solid var(--line);
  border-radius:18px;
  background:#fff;
  box-shadow:0 10px 28px rgba(19,26,33,.05);
  font-family:var(--sans);
}
.comments-panel[hidden]{display:none!important}
.comments-panel h2{
  margin:0 0 14px;
  font-family:var(--sans);
  font-size:18px;
  line-height:1.3;
  text-align:left;
}
.comment-form{margin:0 0 20px}
.comment-form textarea{
  display:block;
  width:100%;
  min-height:112px;
  resize:vertical;
  padding:13px 14px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
  color:var(--text);
  font:15px/1.45 var(--sans);
  outline:none;
}
.comment-form textarea:focus{
  border-color:#aeb6bf;
  box-shadow:0 0 0 3px rgba(47,52,55,.08);
}
.comment-form-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:10px;
}
.comment-submit{
  min-height:42px;
  border:1px solid var(--text);
  border-radius:999px;
  padding:0 20px;
  background:var(--text);
  color:#fff;
  cursor:pointer;
  font:14px/1 var(--sans);
}
.comment-submit:hover{background:#1f2427}
.comment-submit:disabled{opacity:.6;cursor:default}
.comment-note,.comment-status,.comments-empty{
  color:var(--muted);
  font:13px/1.4 var(--sans);
}
.comment-status{min-height:18px;margin-top:8px}
.comment-status:empty{display:none}
.comment-hp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;overflow:hidden!important}
.comments-list{display:grid;gap:12px}
.comment-item{
  padding:14px 15px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fafbfc;
}
.comment-meta{
  margin-bottom:7px;
  color:var(--muted);
  font:12px/1.35 var(--sans);
}
.comment-text{
  margin:0;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  color:var(--text);
  font:15px/1.55 var(--sans);
}

/* Реакции и комментарии под книгами */
.book-feedback{
  width:100%;
  margin:28px auto 0;
  font-family:var(--sans);
}
.book-feedback .react{
  width:100%;
  margin:0 auto 18px;
  padding:18px 18px 16px;
  border:1px solid var(--line);
  border-radius:18px;
  background:linear-gradient(180deg,#fff,#fafbfc);
  box-shadow:0 10px 28px rgba(19,26,33,.06);
  text-align:center;
}
.book-feedback .react-title{
  margin:0 0 14px;
  text-align:center;
  font-family:var(--sans);
  font-weight:700;
  font-size:15px;
  color:var(--text);
}
.book-feedback .reaction-buttons{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  width:min(100%,820px);
  margin:0 auto;
  align-items:stretch;
  justify-content:center;
}
.book-feedback .react button{
  display:grid;
  place-items:center;
  width:100%;
  min-width:0;
  min-height:46px;
  border:1px solid var(--line);
  border-radius:999px;
  padding:0 14px;
  background:#fff;
  color:var(--text);
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
  font:14px/1.15 var(--sans);
  text-align:center;
  transition:background .15s ease,border-color .15s ease,transform .05s ease,box-shadow .15s ease;
}
.book-feedback .react button:hover{
  background:#f3f4f6;
  border-color:#d6dbe1;
  box-shadow:0 8px 22px rgba(19,26,33,.07);
}
.book-feedback .react button:active{transform:translateY(1px)}
.book-feedback .status{
  grid-column:1/-1;
  min-width:0;
  margin-top:2px;
  color:var(--muted);
  font:13px/1.4 var(--sans);
  text-align:center;
}
.book-feedback .status:empty{display:none}
.book-feedback + script + .actions{margin-top:14px}
.book-feedback .reaction-buttons > button.comment-toggle{
  grid-column:1/-1;
  justify-self:center;
  width:min(100%,340px);
}

@media(max-width:720px){
  .react .reaction-buttons,
  .book-feedback .reaction-buttons{
    grid-template-columns:repeat(2,minmax(0,1fr));
    width:100%;
    gap:10px;
  }
  .react .reaction-buttons > button.comment-toggle,
  .book-feedback .reaction-buttons > button.comment-toggle{
    grid-column:1/-1;
    width:100%;
  }
  .comments-panel{padding:16px}
  .comment-form-row{align-items:flex-start;flex-direction:column}
  .comment-submit{width:100%}
  .book-feedback{margin-top:22px}
  .book-feedback .react{padding:16px}
  .book-feedback .react button{min-height:44px;padding-left:10px;padding-right:10px}
}

@media(max-width:380px){
  .react .reaction-buttons,
  .book-feedback .reaction-buttons{gap:8px}
  .react .reaction-buttons > button,
  .book-feedback .react button{font-size:13px;padding-left:8px;padding-right:8px}
}

/* Компактные счётчики реакций внутри кнопок */
.react button[data-v],
.book-feedback .react button[data-v]{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
}
.reaction-count{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:21px;
  height:21px;
  padding:0 6px;
  border-radius:999px;
  background:#eef0f2;
  color:var(--muted);
  font:700 11px/1 var(--sans);
  flex:0 0 auto;
}
.reaction-selected .reaction-count{
  background:var(--text);
  color:#fff;
}

/* Единая журнальная система: строгая геометрия и приглушённый оранжевый акцент. */
:root{
  --accent:#a85b2a;
  --accent-soft:#f7eee8;
  --accent-line:#d8b49e;
  --radius:14px;
  --shadow:0 10px 30px rgba(19,26,33,.06);
}
.page{border-radius:var(--radius)!important;box-shadow:var(--shadow)!important}
.react,.comments-panel,.book-feedback .react,.related-reading,.content .summary,.content .toc,.content .sources,.content .related,.content .faq{
  border-radius:12px!important;
  box-shadow:0 7px 20px rgba(19,26,33,.04)!important;
}
.related-card,.comment-item,.comment-form textarea{border-radius:9px!important}
.content h2,.book-body h2{color:var(--accent)}
.article-header .meta span:last-child{color:#f0b17d}
.source-line,.comment-meta{color:var(--accent)!important}
.reaction-count{background:var(--accent-soft);color:var(--accent)}
.reaction-selected .reaction-count{background:var(--accent);color:#fff}