* { box-sizing: border-box; }
/* Стили страницы (padding, max-width) только для standalone: shared, export, preview window. Редактор (body.editor-page) их не получает. */
body.shared-view {
  margin: 0;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  color: #222;
  background: var(--longread-bg, #f8f8f8);
  padding: var(--longread-content-padding, 1.5em 1.25em);
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  overflow-x: visible;
}
/* Перенос длинных URL в контенте (не на body, чтобы не ломать скролл). Окно предпросмотра: контент — прямой потомок body. */
body.shared-view > *,
.shared-view-theme .view {
  overflow-wrap: break-word;
  word-break: break-word;
}
@media (max-width: 640px) {
  body.shared-view { padding: var(--longread-content-padding-mobile, 1.25em 1em); }
}
/* Единое правило для всего shared: один слой padding — только body. .view без padding, отступ от краёв даёт body. */
body.shared-view .shared-view-theme .view {
  padding: 0;
}
code {
  background: #f5f5f5;
  padding: 0.15em 0.4em;
  border-radius: 3px;
  font-size: 0.9em;
  font-family: ui-monospace, monospace;
}
p { margin: 0.5em 0; }
.block { margin-bottom: var(--longread-block-margin, 1.5em); overflow: visible; }
/* Обёртки с data-block-id (shared с сервера): блок внутри один — не обнулять нижний отступ у всех, только у последнего. */
[data-block-id] .block { margin-bottom: var(--longread-block-margin, 1.5em); }
[data-block-id]:last-child .block { margin-bottom: 0; }
h1 { margin: 1.75em 0 0.4em; font-weight: 600; }
h2 { margin: 1.5em 0 0.4em; font-weight: 600; }
h3 { margin: 1em 0 0.4em; font-weight: 600; }
h4, h5, h6 { margin: 0.75em 0 0.35em; font-weight: 600; }
pre {
  background: #f5f5f5;
  border: 1px solid #e0e0e0;
  color: #222;
  padding: 0.75em 1em;
  border-radius: 4px;
  overflow-x: auto;
  margin: 0.75em 0;
  font-size: 0.9em;
  font-family: ui-monospace, monospace;
}
pre code { background: transparent; padding: 0; }
a { color: #1a5fb4; text-decoration: underline; }
a:hover { text-decoration-thickness: 2px; }
.block.quote, blockquote {
  border-left: 4px solid var(--longread-accent, #1f3249);
  margin: 1.75em 0;
  padding-left: 0.75em;
  font-size: 1.2em;
  color: var(--longread-text, #666);
  font-style: italic;
}
blockquote p { margin: 0; }
/* при вложенности не показываем черту слева у внешнего */
blockquote:has(> blockquote) {
  border-left: none;
}
/* >> — цитата по центру с кавычкой сверху, без черты слева */
blockquote blockquote:has(> blockquote) {
  margin: 0;
  padding: 0;
  border-left: none;
  font-size: inherit;
}
blockquote blockquote:not(:has(> blockquote)) {
  margin: 1.75em 0;
  padding: 0.75em 1em;
  border-left: none;
  text-align: center;
  font-size: 1em;
  color: var(--longread-text, #666);
  font-style: italic;
}
blockquote blockquote:not(:has(> blockquote))::before {
  content: "\201C";
  display: block;
  text-align: center;
  font-size: 2.5em;
  line-height: 1;
  color: var(--longread-accent, #1f3249);
}
/* >>> — по центру, рамка 30% opacity акцента, скругление 10px, без черты и без кавычки */
blockquote blockquote blockquote {
  margin: 1.75em 0;
  padding: 1em 1.25em;
  border: 2px solid color-mix(in srgb, var(--longread-accent, #1f3249) 30%, transparent);
  border-radius: 10px;
  text-align: center;
  font-size: 1em;
  color: var(--longread-text, #666);
  font-style: italic;
}
blockquote blockquote blockquote::before {
  content: none;
  display: none;
}
.block.important {
  margin: var(--longread-block-margin, 1.5em) 0;
  margin-left: 5%;
  margin-right: 5%;
  background: var(--longread-important-bg, #f5f5f5);
  border: 1px solid var(--longread-accent-pale, #e0e0e0);
  padding: var(--longread-block-padding, 1em 1.25em);
  padding-left: 2.6em;
  position: relative;
  border-radius: 4px;
}
.block.important::before {
  content: "\2139\FE0E";
  position: absolute;
  left: 1em;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.35em;
  font-weight: 600;
  color: var(--longread-accent, #1f3249);
  line-height: 1;
}
@media (max-width: 640px) {
  .block.important { padding-left: 2.6em; }
  .block.important::before { left: 1em; }
}
.block.sep, .block-separator {
  height: 0;
  border: none;
  border-top: 1px solid var(--longread-accent-pale, #e0e0e0);
  margin: 1.75em auto;
  width: 15%;
  max-width: 12em;
  opacity: 0.5;
}
.block.img, .block.img figure { margin: var(--longread-block-margin, 1.5em) 0; text-align: center; }
.block.img img, .block.img figure img {
  max-width: 100%;
  height: auto;
  display: inline-block;
  border-radius: 4px;
  vertical-align: middle;
  cursor: pointer;
}
.block.img figcaption, .block.img figure figcaption {
  margin-top: 0.5em;
  font-size: 0.9em;
  color: var(--longread-accent-pale, #888);
}
/* Lightbox: only in standalone view (shared, export, preview window) */
.longread-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.85);
  cursor: pointer;
}
.longread-lightbox img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  pointer-events: none;
  background: var(--longread-bg, #f8f8f8);
}
.block.embed { margin: var(--longread-block-margin, 1.5em) 0; display: flex; justify-content: center; flex-wrap: wrap; }
.block.embed .embed-wrap {
  max-width: 100%;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--longread-accent-pale, #e0e0e0);
  background: var(--longread-surface, #f5f5f5);
}
.block.embed .embed-wrap iframe { display: block; max-width: 100%; border: none; }
.block.embed .embed-wrap.video-wrap .block-video-player { display: block; max-width: 100%; height: auto; }
.block.embed .embed-placeholder {
  padding: 0.75em 1em;
  color: var(--longread-surface-text, var(--longread-text, #666));
  font-size: 0.95em;
  background: var(--longread-surface, #f5f5f5);
  border: 1px dashed var(--longread-accent-pale, #e0e0e0);
  border-radius: 4px;
}
/* Расширение контейнера до 960px для блоков с модификатором wide (:::embed wide, :::columns_start wide). Центрирование по viewport. Не применяется в режиме Правки (сравнение версий). */
body.shared-view .block.embed.wide,
body.shared-view .block.columns.wide {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  max-width: 960px;
  margin-left: 0;
  margin-right: 0;
  box-sizing: border-box;
}
/* Режим «Правки» / shared with comments (было — стало): wide не применяется, контент помещается в панель (селектор с body — выше по специфичности, чем body.shared-view .block.columns.wide) */
body.shared-view .shared-compare-wrap .block.embed.wide,
body.shared-view .shared-compare-wrap .block.columns.wide {
  position: static;
  left: auto;
  transform: none;
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
}
body.shared-view .shared-compare-wrap .block.columns {
  max-width: 100%;
}
/* Заглушка 640×320 (2:1) — :::tmp и блок картинка без URL / с путём placeholder. В колонке последний — растягивается */
.block.tmp {
  margin: var(--longread-block-margin, 1.5em) auto;
  max-width: 640px;
  width: 100%;
  display: block;
}
.block.tmp:not(.tmp-hint) .placeholder-16x9-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 1;
  display: block;
  overflow: hidden;
  line-height: 0;
}
.block.tmp .block-tmp-caption-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  max-height: 100%;
  display: grid;
  align-content: end;
  padding: 0.5em 0.5em 1em 0.5em;
  box-sizing: border-box;
  line-height: 1.4;
  overflow-y: auto;
}
.block.tmp .block-tmp-caption-overlay .block-tmp-inner {
  margin: 0;
  width: 100%;
  font-size: 0.95em;
  font-style: italic;
  color: var(--longread-text, #666);
  text-align: center;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  word-break: break-word;
}
/* Пояснение (:::tmp hint) — одна фигура, ширина как заглушка, мин. 4:1, текст внутри, автовысота */
.block.tmp.tmp-hint .placeholder-16x9-wrap {
  position: relative;
  width: 100%;
  min-height: 10em;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.75em 1em;
  box-sizing: border-box;
  background: var(--longread-important-bg, #f5f5f5);
  border: 1px solid var(--longread-accent-pale, #e0e0e0);
  border-radius: 4px;
  overflow: visible;
  line-height: 1.4;
}
.block.tmp.tmp-hint .placeholder-16x9-wrap > .placeholder-16x9-svg {
  display: none;
}
.block.tmp.tmp-hint .block-tmp-caption-overlay {
  position: static;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  width: 100%;
  min-height: 0;
  box-sizing: border-box;
}
.block.tmp.tmp-hint .block-tmp-caption-overlay .block-tmp-inner {
  overflow-wrap: break-word;
  word-break: break-word;
}
.block.img.img-placeholder {
  margin: var(--longread-block-margin, 1.5em) auto;
  max-width: 640px;
  width: 100%;
  display: block;
}
.block.img.img-placeholder .placeholder-16x9-wrap {
  width: 100%;
  aspect-ratio: 2 / 1;
  display: block;
  overflow: hidden;
  line-height: 0;
}
.block.img.img-placeholder figcaption {
  margin-top: 0.5em;
  font-size: 0.9em;
  color: var(--longread-accent-pale, #888);
  text-align: center;
}
.block.tmp .placeholder-16x9-svg,
.block.img .placeholder-16x9-svg {
  width: 100%;
  height: 100%;
  display: block;
  vertical-align: top;
}
.placeholder-16x9-bg { fill: #f5f5f5; }
.placeholder-16x9-border { stroke: #e0e0e0; stroke-width: 0.04; }
.block.tmp .placeholder-tmp-icon { fill: var(--longread-accent-pale, #e0e0e0); stroke: var(--longread-accent-pale, #e0e0e0); }
.block.tmp .placeholder-tmp-text { stroke: none; }
.block.columns .column > .block.tmp:first-child { margin-top: 0; margin-bottom: 0.75em; }
/* Колонки: единый источник для превью, shared, экспорт. Каждая колонка — контейнер 100% по ширине. */
.block.columns { margin: var(--longread-block-margin, 1.5em) 0; container-type: inline-size; container-name: columns-block; }
.block.columns .columns-row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 1em;
  align-items: stretch;
}
/* Симметрия колонок: одинаковый padding у всех, чтобы начало контента совпадало по горизонтали и вертикали (в т.ч. при узких 20%/30%). */
.block.columns .column {
  min-width: 0;
  box-sizing: border-box;
  padding: 0.5em;
  display: flex;
  flex-direction: column;
}
.block.columns .column > *:first-child { margin-top: 0; }
/* Последний в колонке блок с заглушкой (tmp или img без ссылки) растягивается до конца колонки; вне колонок — 640×320 (2:1). */
.block.columns .column > .block.tmp:last-child,
.block.columns .column > .block.img:last-child {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.block.columns .column > .block.tmp:last-child .placeholder-16x9-wrap,
.block.columns .column > .block.img:last-child .placeholder-16x9-wrap {
  flex: 1 1 auto;
  min-height: 0;
  aspect-ratio: unset;
}
.block.columns .column > .block.tmp:last-child .placeholder-16x9-svg,
.block.columns .column > .block.img:last-child .placeholder-16x9-svg {
  width: 100%;
  height: 100%;
  preserve-aspect-ratio: none;
}
@container columns-block (max-width: 640px) {
  .block.columns .columns-row { flex-direction: column; flex-wrap: nowrap; }
  .block.columns .column { width: 100%; flex: 1 1 auto !important; padding: 0.5em 0; align-self: stretch; }
}
@media (max-width: 640px) {
  .block.columns .columns-row { flex-direction: column; flex-wrap: nowrap; }
  .block.columns .column { width: 100%; flex: 1 1 auto !important; padding: 0.5em 0; align-self: stretch; }
}
/* Одна панель shared (без сравнения): при широком экране не давать container query складывать колонки в столбик. */
@media (min-width: 641px) {
  body.shared-view:not(.shared-has-compare) .block.columns { min-width: 641px; }
}

.block.btn { margin: var(--longread-block-margin, 1.5em) 0; text-align: center; }
.block.btn a {
  display: inline-block;
  padding: 0.75em 1.25em;
  border: 1px solid var(--longread-accent, #333);
  color: var(--longread-text, #222);
  text-decoration: none;
  border-radius: 4px;
  font-weight: 600;
  font-size: 1.05em;
}
/* Accordion */
.accordion { margin: var(--longread-block-margin, 1.5em) 0; border: 1px solid #e0e0e0; border-radius: 4px; overflow: hidden; }
.accordion-item { border-bottom: 1px solid #e0e0e0; }
.accordion-head {
  width: 100%;
  padding: var(--longread-block-padding, 1em 1.25em);
  text-align: left;
  font: inherit;
  font-weight: 500;
  background: var(--longread-surface, #fff);
  border: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.accordion-head::after { content: "+"; font-size: 1.2em; color: var(--longread-accent-pale, #666); }
.accordion-item.open .accordion-head::after { content: "−"; }
.accordion-body { display: none; padding: var(--longread-block-padding, 1em 1.25em); border-top: 1px solid var(--longread-accent-pale, #e0e0e0); background: var(--longread-surface, #fff); }
.accordion-item.open .accordion-body { display: block; }
/* Tabs */
.tabs-block { margin: var(--longread-block-margin, 1.5em) 0; border: 1px solid #e0e0e0; border-radius: 4px; overflow: hidden; }
.tabs-headers { display: flex; flex-wrap: wrap; border-bottom: 1px solid #e0e0e0; background: #f5f5f5; }
.tabs-headers button {
  flex: 1 1 25%;
  min-width: 0;
  padding: 0.625em 0.5em;
  border: none;
  background: none;
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  color: #666;
  text-align: center;
}
@media (max-width: 640px) {
  .tabs-headers button { flex: 1 1 33.333%; font-size: 0.875em; }
}
.tabs-headers button.active { color: #222; border-bottom: 2px solid #333; background: #fff; }
.tabs-panels { padding: var(--longread-block-padding, 1em 1.25em); background: var(--longread-surface, #fff); }
.tabs-panel { display: none; }
.tabs-panel.active { display: block; }
/* Flip cards */
.flip-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.25em;
  margin: var(--longread-block-margin, 1.5em) 0;
  width: 100%;
}
.flip-card {
  flex: 1 1 calc((100% - 40px) / 3);
  max-width: calc((100% - 40px) / 3);
  min-width: 180px;
  display: grid;
  min-height: 120px;
  cursor: pointer;
}
.flip-cards .flip-card:only-child { flex: 0 1 50%; max-width: 50%; margin-left: auto; margin-right: auto; }
.flip-cards .flip-card:nth-last-child(2):first-child,
.flip-cards .flip-card:nth-last-child(2):first-child ~ .flip-card {
  flex: 1 1 calc(50% - 10px);
  max-width: none;
}
.flip-inner {
  grid-area: 1/1;
  display: grid;
  grid-template-areas: "a";
  transition: transform 0.5s;
  transform-style: preserve-3d;
}
.flip-card.flipped .flip-inner { transform: rotateY(180deg); }
.flip-front, .flip-back {
  grid-area: a;
  min-height: 100px;
  position: relative;
  backface-visibility: hidden;
  border: 1px solid var(--longread-accent-pale, #e0e0e0);
  border-radius: 4px;
  padding: var(--longread-block-padding, 1em 1.25em);
  padding-bottom: 2.25em;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #fff;
  flex-wrap: wrap;
  box-sizing: border-box;
}
.flip-front { font-weight: 500; }
.flip-back { transform: rotateY(180deg); background: #f5f5f5; font-size: 14px; }
.flip-card .flip-toggle {
  position: absolute;
  bottom: 0.5em;
  right: 0.5em;
  width: 1.75em;
  height: 1.75em;
  padding: 0;
  border: 1px solid #e0e0e0;
  background: #fff;
  border-radius: 50%;
  font-size: 14px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
/* Test */
.test-questions { margin: 1em 0; }
.test-questions > .test-block { margin-bottom: 1em; }
.test-questions > .test-block:last-child { margin-bottom: 0; }
.test-block {
  border: 1px solid var(--longread-accent-pale, #e0e0e0);
  border-radius: 4px;
  padding: var(--longread-block-padding, 1em 1.25em);
  margin: 1em 0;
}
.test-block .test-number { font-size: 11px; color: #666; margin-bottom: 0.25em; }
.test-block h4 { margin: 0 0 0.625em; font-size: 1rem; font-weight: 600; color: var(--longread-accent, #1a5fb4); }
.test-options { list-style: none; padding: 0; margin: 0; }
.test-options li { margin: 0.375em 0; list-style: none; }
.test-options label { cursor: pointer; display: flex; align-items: center; gap: 0.5em; }
.test-options input { margin: 0; }
.test-submit { margin-top: 0.75em; text-align: center; }
.test-submit button, .test-answer-btn {
  padding: 0.625em 1.25em;
  font-size: 14px;
  font-weight: 600;
  border: 1px solid #333;
  background: #333;
  color: #fff;
  cursor: pointer;
  border-radius: 4px;
}
.test-submit button:hover, .test-answer-btn:hover { background: #222; border-color: #222; }
.test-feedback {
  margin-top: 0.75em;
  padding: 0.625em;
  border-radius: 4px;
  font-size: 14px;
  display: none;
}
.test-feedback.correct { display: block; background: #e8f5e9; border: 1px solid #c8e6c9; color: #2e7d32; }
.test-feedback.incorrect { display: block; background: #ffebee; border: 1px solid #ffcdd2; color: #c62828; }
.test-feedback.neutral { display: block; background: #f5f5f5; border: 1px solid #e0e0e0; color: #666; }
/* Сноски: стандартный блок внизу */
.footnotes { margin-top: 2em; padding-top: 1em; border-top: 1px solid var(--longread-accent-pale, #e0e0e0); font-size: 0.85em; color: var(--longread-text, #555); }
.footnotes ol { padding-left: 1.5em; margin: 0.5em 0; }
.footnotes li { margin-bottom: 0.3em; }
a[href^="#footnote-"], [data-footnote-ref] { text-decoration: none; }
[data-footnote-ref] sup { font-size: 0.75em; vertical-align: super; color: var(--longread-accent, #1f3249); }
.footnote-backref { font-size: 0.8em; margin-left: 0.3em; text-decoration: none; color: var(--longread-accent, #1f3249); }
/* Lists, table */
ul, ol { margin: 0.75em 0; padding-left: 1.5em; }
ul { list-style-type: disc; }
ol { list-style-type: decimal; }
li { margin: 0.25em 0; }
table { width: 100%; border-collapse: collapse; margin: 1em 0; font-size: 0.95em; }
th, td { border: 1px solid #e0e0e0; padding: 0.5em 0.75em; text-align: left; }
thead th { background: #f5f5f5; font-weight: 600; }
tbody tr:nth-child(even) { background: #f5f5f5; }

.table-scroll-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  margin: 1em 0;
  scrollbar-width: thin;
  scrollbar-color: var(--longread-accent-pale, #ccc) transparent;
}
.table-scroll-wrap::-webkit-scrollbar {
  height: 6px;
}
.table-scroll-wrap::-webkit-scrollbar-track {
  background: transparent;
}
.table-scroll-wrap::-webkit-scrollbar-thumb {
  background: var(--longread-accent-pale, #ccc);
  border-radius: 3px;
}
.table-scroll-wrap::-webkit-scrollbar-thumb:hover {
  background: var(--longread-accent, #999);
}
.table-scroll-wrap table {
  width: max-content;
  min-width: 100%;
  margin: 0;
  table-layout: auto;
}
.table-scroll-wrap th,
.table-scroll-wrap td {
  max-width: 22em;
  word-break: break-word;
  overflow-wrap: break-word;
}

.sys-cmd { color: #888; font-style: italic; }
/* Comments block — оформление как блок «Внимание»: фон, рамка, скругление */
.comments-block {
  margin-left: 5%;
  margin-right: 5%;
  margin-top: 1em;
  margin-bottom: 2em;
  background: var(--longread-important-bg, rgba(0, 0, 0, 0.03));
  border: 1px solid var(--longread-accent-pale, #e0e0e0);
  border-left: 3px solid var(--longread-accent, #1f3249);
  border-radius: 4px;
  padding: 0;
  overflow: hidden;
  color: var(--longread-text, inherit);
}
.comments-toggle {
  width: 100%;
  padding: 0.75em 1em;
  text-align: left;
  font: inherit;
  font-size: 0.9em;
  font-weight: normal;
  font-style: italic;
  background: var(--longread-important-bg, rgba(0, 0, 0, 0.03));
  border: none;
  cursor: pointer;
  color: var(--longread-text, inherit);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.comments-toggle::after { content: "+"; font-size: 1.1em; font-style: normal; color: var(--longread-accent-pale, #666); flex-shrink: 0; margin-left: 8px; }
.comments-toggle[aria-expanded="true"]::after { content: "−"; }
.comments-toggle:hover { background: var(--longread-surface, #eee); }
.comments-body {
  padding: 0.75em 1em;
  background: var(--longread-important-bg, rgba(0, 0, 0, 0.03));
  border-top: 1px solid var(--longread-accent-pale, #e0e0e0);
  color: var(--longread-text, inherit);
}
.comments-block .comment-meta { color: var(--longread-accent, #1f3249); }
.comment-item { margin-bottom: 0.75em; }
.comment-item:last-child { margin-bottom: 0; }
.comment-meta { font-size: 0.75em; color: var(--longread-accent, #1f3249); display: block; margin-bottom: 0.25em; }
.comment-quote { font-size: 1em; color: var(--longread-text, inherit); margin: 0.25em 0 0.4em; padding-left: 0.5em; border-left: 3px solid var(--longread-accent-pale, #ddd); max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.comment-text { font-size: 0.95em; }
/* Кнопка «Добавить комментарий» внизу раскрытого блока */
.comments-add-in-block {
  display: block;
  width: 100%;
  margin-top: 0.75em;
  padding: 0.625em 0.875em;
  font: inherit;
  font-size: 0.95em;
  font-weight: 500;
  color: var(--longread-accent, #1f3249);
  background: transparent;
  border: 1px dashed var(--longread-accent-pale, #ccc);
  border-radius: 4px;
  cursor: pointer;
  text-align: center;
}
.comments-add-in-block:hover { background: var(--longread-surface, #f0f0f0); border-style: solid; }
.comment-add-wrap { margin-top: 0.75em; padding-top: 0.75em; border-top: 1px solid var(--longread-accent-pale, #e0e0e0); }
.comment-add-author { width: 100%; padding: 0.5em; margin-bottom: 0.5em; font-family: inherit; background: var(--longread-surface, #fff); color: var(--longread-text, #222); border: 1px solid var(--longread-accent-pale, #e0e0e0); border-radius: 4px; box-sizing: border-box; }
.comment-add-text { width: 100%; padding: 0.5em; margin-bottom: 0.25em; font-family: inherit; resize: vertical; background: var(--longread-surface, #fff); color: var(--longread-text, #222); border: 1px solid var(--longread-accent-pale, #e0e0e0); border-radius: 4px; box-sizing: border-box; }
.shared-comment-counter { display: block; font-size: 0.85em; color: var(--longread-accent-pale, #666); font-variant-numeric: tabular-nums; margin-bottom: 0.5em; }
.comment-add-btn { padding: 6px 12px; font-size: 0.9em; cursor: pointer; background: var(--longread-accent-pale, #e8e8e8); color: var(--longread-text, #222); border: 1px solid var(--longread-accent, #1f3249); }
.comment-add-btn:hover { background: var(--longread-accent, #1f3249); color: var(--longread-surface, #fff); border-color: var(--longread-accent, #1f3249); }
.shared-comment-error { color: #b91c1c; font-size: 0.85em; margin: 0.5em 0; }
/* Модальное окно «Кто оставит комментарий?» */
.shared-modal-wrap {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1em;
}
.shared-modal-wrap[hidden] { display: none !important; pointer-events: none !important; }
.shared-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
}
.shared-modal {
  position: relative;
  background: var(--longread-bg, #fff);
  color: var(--longread-text, #222);
  border: 1px solid var(--longread-accent-pale, #e0e0e0);
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
  padding: 1.5rem;
  max-width: 400px;
  width: 100%;
}
.shared-modal-title { margin: 0 0 1rem; font-size: 1.1rem; font-weight: 600; color: inherit; }
.shared-modal-actions { margin-top: 1rem; }
.shared-modal-actions button { padding: 8px 16px; cursor: pointer; }
/* Обёртка блока с кнопкой «Комментарий» в углу (shared page, без дополнительных строк) */
/* Обёртка одного сегмента (совпадает с нумерацией блоков на сервере) */
.shared-segment { margin: 0; padding: 0; }
.shared-block-wrap {
  position: relative;
  width: 100%;
  margin-bottom: var(--longread-block-margin, 1.5em);
}
.shared-block-wrap:last-child { margin-bottom: 0; }
.shared-block-wrap .shared-comment-trigger-btn {
  position: absolute;
  top: 0.5em;
  right: 0.5em;
  padding: 0.5em 0.625em;
  font-size: 1.25em;
  line-height: 1;
  background: var(--longread-important-bg, rgba(255, 255, 255, 0.95));
  border: 1px solid var(--longread-accent-pale, rgba(0, 0, 0, 0.15));
  border-radius: var(--radius, 4px);
  cursor: pointer;
  opacity: 0.1;
  transition: opacity 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.shared-block-wrap:hover .shared-comment-trigger-btn {
  opacity: 1;
}
.shared-block-wrap .shared-comment-trigger-btn:hover {
  background: var(--longread-important-bg, #f5f5f5);
  border-color: var(--longread-accent-pale, #e0e0e0);
}
/* На мобильных hover нет — иконка комментария должна быть видна всегда */
@media (max-width: 640px) {
  .shared-block-wrap .shared-comment-trigger-btn {
    opacity: 1;
  }
}
/* Попап «Комментарии» (список + форма) — наследует тему лонгрида */
.shared-comments-modal { max-width: 420px; background: var(--longread-bg, #fff); color: var(--longread-text, #222); border-color: var(--longread-accent-pale); }
.shared-comments-modal-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 1rem; padding: 0; flex-shrink: 0; }
.shared-comments-modal .shared-modal-title { margin: 0; }
.shared-comments-modal-close { flex-shrink: 0; width: 32px; height: 32px; padding: 0; border: none; background: transparent; color: var(--longread-text, #222); font-size: 1.5rem; line-height: 1; cursor: pointer; border-radius: 4px; }
.shared-comments-modal-close:hover { background: var(--longread-important-bg, rgba(0,0,0,0.06)); color: var(--longread-text, #222); }
.shared-comments-popup-list {
  max-height: 200px;
  overflow-y: auto;
  margin-bottom: 1rem;
  font-size: 0.95em;
  color: inherit;
}
.shared-comments-popup-list .comment-item { margin-bottom: 0.6em; }
.shared-comments-popup-list .comment-meta { font-size: 0.75em; color: var(--longread-accent, #1f3249); display: block; margin-bottom: 0.2em; }
.shared-comments-popup-list .comment-quote { font-size: 1em; color: var(--longread-text, inherit); }
.shared-comments-popup-list .comment-text { font-size: 0.95em; }
/* Кнопка «Комментировать» для редактора (expandable list) */
.block-comment-anchor { margin: 0.25em 0 1em; }
.block-comment-trigger {
  padding: 4px 0;
  font-size: 0.85em;
  color: #666;
  background: none;
  border: none;
  cursor: pointer;
}
.block-comment-trigger:hover { color: #333; }
.block-comment-inline { margin-top: 0.5em; padding-top: 0.5em; border-top: 1px dashed #e0e0e0; }
.shared-loading, .shared-error { padding: 2rem; text-align: center; }
.shared-name-form { padding: 2rem; max-width: 400px; margin: 2rem auto; }
.shared-name-form input { width: 100%; padding: 8px 12px; margin-bottom: 0.75em; }
.shared-name-form button { padding: 8px 16px; }
.shared-password-error { color: #b91c1c; font-size: 0.9rem; margin: 0.5em 0; }
/* Режим «только просмотр» (без комментариев): чистый контент без рамки и сравнения */
.shared-content-simple {
  border: none;
  background: transparent;
  width: 100%;
  max-width: 100%;
}
/* Сравнение «Было» / «Стало» — по аналогии с панелями «Редактор» и «Лонгрид» в редакторе */
.shared-compare-wrap {
  display: flex;
  gap: 16px;
  align-items: stretch;
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
  min-height: 0;
}
.shared-compare-wrap .shared-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.shared-prev-panel {
  flex: 1;
  min-width: 0;
  background: var(--longread-bg, #f8f8f8);
  border: 1px solid var(--longread-accent, #e0e0e0);
  border-radius: var(--radius, 4px);
  overflow: hidden;
}
.shared-prev-panel.no-prev { display: none; }
.shared-prev-content.hidden { display: none; }
.shared-compare-wrap.shared-prev-hidden .shared-prev-panel { display: none; }
.shared-compare-wrap.shared-prev-hidden .shared-current-wrap {
  flex: 1;
  min-height: 0;
  max-width: 720px;
  margin: 0 auto;
  width: 100%;
}
.shared-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--longread-important-bg, #f5f5f5);
  color: var(--longread-text, #222);
  border-bottom: 1px solid var(--longread-accent-pale, #e0e0e0);
  flex-shrink: 0;
}
.shared-panel-title {
  font-weight: 600;
}
.shared-prev-toggle {
  padding: 4px 10px;
  font-size: 11px;
  border: 1px solid var(--longread-accent, #666);
  background: var(--longread-surface, #fff);
  color: var(--longread-accent, #666);
  cursor: pointer;
  border-radius: var(--radius, 4px);
  text-transform: none;
  letter-spacing: normal;
}
.shared-prev-toggle:hover {
  background: var(--longread-accent, #666);
  color: var(--longread-surface, #fff);
  border-color: var(--longread-accent, #666);
}
/* Как в редакторе: .panel-body без overflow, скролл на .view-theme */
.shared-compare-wrap .shared-panel-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: var(--longread-content-padding, 1.5em 1.25em);
}
@media (max-width: 640px) {
  .shared-compare-wrap .shared-panel-body { padding: var(--longread-content-padding-mobile, 1.25em 1em); }
}
.shared-view-theme {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: auto;
  background: var(--longread-bg, var(--bg, #f8f8f8));
  color: var(--longread-text, var(--text, #222));
  scrollbar-width: thin;
  scrollbar-color: var(--longread-accent-pale, #ccc) transparent;
}
.shared-view-theme::-webkit-scrollbar {
  width: 10px;
}
.shared-view-theme::-webkit-scrollbar-track {
  background: transparent;
}
.shared-view-theme::-webkit-scrollbar-thumb {
  background: var(--longread-accent-pale, #ccc);
  border-radius: 5px;
}
.shared-view-theme::-webkit-scrollbar-thumb:hover {
  background: var(--longread-accent, #999);
}
/* Одиночный просмотр (shared-view.html): не обрезать wide-блоки по горизонтали */
body.shared-view .shared-content-simple .shared-view-theme {
  overflow-x: visible;
  overflow-y: auto;
}
.shared-view-theme .view {
  flex: 1;
  min-height: 0;
  min-width: 0;
  padding: 0;
}
.shared-compare-wrap .shared-view-theme {
  min-width: 0;
  max-width: 100%;
}
.shared-compare-wrap .shared-view-theme .view {
  min-width: 0;
  max-width: 100%;
}
.shared-view-theme .view h4,
.shared-view-theme .view h5,
.shared-view-theme .view h6 {
  color: var(--longread-headings, var(--longread-text, #222));
}
.shared-view-theme .view pre {
  background: var(--longread-important-bg, var(--longread-surface, #f5f5f5));
  border: 1px solid var(--longread-accent, var(--border, #1f3249));
  color: var(--longread-text, #222);
  padding: 0.75em 1em;
  border-radius: 4px;
  overflow-x: auto;
  margin: 0.75em 0;
  font-size: 0.9em;
  font-family: ui-monospace, monospace;
}
.shared-view-theme .view pre code { background: transparent; padding: 0; }
.shared-view-theme .view p a,
.shared-view-theme .view li a,
.shared-view-theme .view td a,
.shared-view-theme .view h1 a, .shared-view-theme .view h2 a, .shared-view-theme .view h3 a,
.shared-view-theme .view h4 a, .shared-view-theme .view h5 a, .shared-view-theme .view h6 a {
  color: var(--longread-accent, #1f3249);
  text-decoration: underline;
}
.shared-view-theme .view p a:hover, .shared-view-theme .view li a:hover, .shared-view-theme .view td a:hover { text-decoration-thickness: 2px; }
.shared-prev-article {
  max-height: none;
  font-size: 0.95em;
}
.shared-current-wrap.shared-panel-right {
  flex: 1;
  min-width: 0;
  max-width: 100%;
  background: var(--longread-bg, #f8f8f8);
  border: 2px solid var(--longread-accent, #e0e0e0);
  border-radius: 6px;
  overflow: hidden;
}
.shared-current-wrap .shared-panel-header {
  border-radius: 4px 4px 0 0;
}
html.shared-has-compare {
  height: 100%;
  overflow: hidden;
}
body.shared-has-compare {
  max-width: 1500px;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
body.shared-has-compare #shared-content {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
body.shared-has-compare .shared-compare-wrap {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
body.shared-has-compare .shared-compare-wrap .shared-view-theme {
  overflow-y: auto;
  overflow-x: hidden;
}
body.shared-has-compare .shared-compare-wrap .shared-view-theme .view {
  flex: none;
  min-height: min-content;
}
@media (max-width: 900px) {
  .shared-compare-wrap { flex-direction: column; }
  .shared-compare-wrap .shared-panel { flex: 1; min-height: 0; }
  .shared-prev-panel { flex: 1; width: 100%; position: static; min-width: 0; }
}