/* Тёмная Марга: единая нижняя зона статьи. Отдельный файл исключает старый кеш. */

.article-page .content .related-reading,
.topic-page .content .related-reading {
  margin-top: 34px !important;
  padding: 22px !important;
  border: 1px solid var(--tm-line-dark, #c8cdd1) !important;
  border-radius: 6px !important;
  background: #fbfbfa !important;
  box-shadow: none !important;
}

.article-page .content .related-reading h2,
.topic-page .content .related-reading h2 {
  margin: 0 0 16px !important;
  color: var(--tm-text, #292e31) !important;
  font-family: var(--tm-serif, "Noto Serif", Georgia, serif) !important;
  font-size: 22px !important;
  line-height: 1.3 !important;
  letter-spacing: -0.02em !important;
}

.article-page .content .related-reading .related-grid,
.topic-page .content .related-reading .related-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 9px !important;
  border: 0 !important;
}

.article-page .content .related-reading .related-grid a,
.topic-page .content .related-reading .related-grid a {
  position: relative !important;
  min-height: 64px !important;
  display: flex !important;
  align-items: center !important;
  padding: 13px 38px 13px 14px !important;
  border: 1px solid var(--tm-line, #dfe3e6) !important;
  border-radius: 4px !important;
  background: #fff !important;
  color: var(--tm-text, #292e31) !important;
  font-family: var(--tm-sans, system-ui, sans-serif) !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  text-decoration: none !important;
  box-shadow: none !important;
}

.article-page .content .related-reading .related-grid a::after,
.topic-page .content .related-reading .related-grid a::after {
  content: "→" !important;
  position: absolute !important;
  right: 14px !important;
  color: var(--tm-accent, #a85b2a) !important;
}

.article-page .content .related-reading .related-grid a:hover,
.topic-page .content .related-reading .related-grid a:hover {
  border-color: var(--tm-accent, #a85b2a) !important;
  background: var(--tm-accent-soft, #f6ede7) !important;
}

.article-page .content .related-reading .guide-link,
.topic-page .content .related-reading .guide-link {
  margin-top: 16px !important;
  padding-top: 14px !important;
  border-top: 1px solid var(--tm-line, #dfe3e6) !important;
  text-align: right !important;
}

.article-page .after,
.topic-page .after {
  margin-top: 40px !important;
  padding-top: 30px !important;
  border-top: 1px solid var(--tm-line-dark, #c8cdd1) !important;
}

.article-page .after .react,
.topic-page .after .react {
  box-sizing: border-box !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 20px !important;
  border: 1px solid var(--tm-line-dark, #c8cdd1) !important;
  border-radius: 6px !important;
  background: #fbfbfa !important;
  box-shadow: none !important;
  text-align: left !important;
}

.article-page .after .react-title,
.topic-page .after .react-title {
  margin: 0 0 14px !important;
  color: var(--tm-muted, #6e757b) !important;
  font-family: var(--tm-sans, system-ui, sans-serif) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  text-align: left !important;
}

.article-page .after .react .reaction-buttons,
.topic-page .after .react .reaction-buttons {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin: 0 !important;
}

.article-page .after .react .reaction-buttons > button,
.topic-page .after .react .reaction-buttons > button {
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 42px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 7px 10px !important;
  border: 1px solid var(--tm-line-dark, #c8cdd1) !important;
  border-radius: 4px !important;
  background: #fff !important;
  color: var(--tm-text, #292e31) !important;
  box-shadow: none !important;
  font-family: var(--tm-sans, system-ui, sans-serif) !important;
  font-size: 12.5px !important;
  line-height: 1.25 !important;
  white-space: normal !important;
}

.article-page .after .react .reaction-buttons > button.comment-toggle,
.topic-page .after .react .reaction-buttons > button.comment-toggle {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: none !important;
  justify-self: stretch !important;
}

.article-page .after .react .reaction-buttons > .status,
.topic-page .after .react .reaction-buttons > .status {
  grid-column: 1 / -1 !important;
  margin-top: 5px !important;
  text-align: left !important;
}

.article-page .after .comments-panel,
.topic-page .after .comments-panel {
  box-sizing: border-box !important;
  width: 100% !important;
  margin: 10px 0 20px !important;
  padding: 20px !important;
  border: 1px solid var(--tm-line-dark, #c8cdd1) !important;
  border-radius: 6px !important;
  background: #fff !important;
  box-shadow: none !important;
}

.article-page .after .actions,
.topic-page .after .actions {
  box-sizing: border-box !important;
  width: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin-top: 14px !important;
}

.article-page .content .after .actions a.action-link,
.topic-page .content .after .actions a.action-link,
.article-page .content .after .actions a.action-link.primary,
.topic-page .content .after .actions a.action-link.primary {
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 46px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 10px 16px !important;
  border: 1px solid var(--tm-line-dark, #c8cdd1) !important;
  border-radius: 4px !important;
  background: #fff !important;
  color: var(--tm-text, #292e31) !important;
  box-shadow: none !important;
  font-family: var(--tm-sans, system-ui, sans-serif) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  text-align: center !important;
  white-space: normal !important;
  text-decoration: none !important;
}

.article-page .content .after .actions a.action-link:hover,
.topic-page .content .after .actions a.action-link:hover {
  border-color: var(--tm-accent, #a85b2a) !important;
  background: var(--tm-accent-soft, #f6ede7) !important;
  color: var(--tm-accent-dark, #88451f) !important;
}

.article-page .after .action-link.primary::before,
.topic-page .after .action-link.primary::before {
  content: "← " !important;
  color: var(--tm-accent, #a85b2a) !important;
}

.article-page .after .action-link:not(.primary)::after,
.topic-page .after .action-link:not(.primary)::after {
  content: " →" !important;
  color: var(--tm-accent, #a85b2a) !important;
}

.article-page .site-footer,
.topic-page .site-footer {
  padding-right: max(28px, calc((100% - var(--tm-reading, 700px)) / 2)) !important;
  padding-left: max(28px, calc((100% - var(--tm-reading, 700px)) / 2)) !important;
}

@media (max-width: 720px) {
  .article-page .content .related-reading,
  .topic-page .content .related-reading,
  .article-page .after .react,
  .topic-page .after .react,
  .article-page .after .comments-panel,
  .topic-page .after .comments-panel {
    padding: 16px !important;
  }

  .article-page .content .related-reading .related-grid,
  .topic-page .content .related-reading .related-grid,
  .article-page .after .actions,
  .topic-page .after .actions {
    grid-template-columns: 1fr !important;
  }

  .article-page .after .react .reaction-buttons,
  .topic-page .after .react .reaction-buttons {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .article-page .site-footer,
  .topic-page .site-footer {
    padding: 22px 16px 24px !important;
  }
}