/* =========================================================
   Архив христианских газет — общая таблица стилей
   «Читальный зал»: бумага, типографский чёрный, киноварь.
   Подключается на всех страницах через includes/layout.php
   ========================================================= */

:root {
  --paper: #F3EDE1;
  --paper-2: #F7F2E8;
  --surface: #FBF8F1;
  --ink: #1D1813;
  --ink-2: #5E5347;
  --ink-3: #8C7F6E;
  --rule: #D8CDBB;
  --rule-2: #E6DDCD;
  --accent: #8A2B1F;
  --accent-ink: #5E1C14;
  --on-accent: #FFFFFF;
  --focus: #2F5D62;

  --f-display: 'Old Standard TT', 'PT Serif', Georgia, 'Times New Roman', serif;
  --f-read: 'Literata', 'PT Serif', Georgia, serif;
  --f-ui: 'Golos Text', 'PT Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --radius: 12px;
  --radius-s: 8px;
  --wrap: 1248px;
  --gutter: clamp(16px, 4vw, 48px);
  --read-size: 19px;
}

:root[data-theme="dark"] {
  --paper: #1A1612;
  --paper-2: #1F1A15;
  --surface: #241E18;
  --ink: #EFE6D6;
  --ink-2: #C3B5A0;
  --ink-3: #978A77;
  --rule: #3A3129;
  --rule-2: #2E2721;
  --accent: #D9826F;
  --accent-ink: #EFA592;
  --on-accent: #1A1612;
  --focus: #8CC1C6;
}
:root[data-theme="sepia"] {
  --paper: #E9DCC0;
  --paper-2: #EFE3CA;
  --surface: #F4EBD6;
  --rule: #CDBB98;
  --rule-2: #DCCBAA;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --paper: #1A1612; --paper-2: #1F1A15; --surface: #241E18;
    --ink: #EFE6D6; --ink-2: #C3B5A0; --ink-3: #978A77;
    --rule: #3A3129; --rule-2: #2E2721;
    --accent: #D9826F; --accent-ink: #EFA592; --on-accent: #1A1612; --focus: #8CC1C6;
  }
}

/* ---------- База ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 16px/1.55 var(--f-ui);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }
a { color: var(--accent); text-underline-offset: 3px; }
a:hover { color: var(--accent-ink); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: 12px; top: -60px; background: var(--ink); color: var(--paper); padding: 10px 16px; border-radius: 8px; z-index: 100; }
.skip-link:focus { top: 12px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.muted { color: var(--ink-2); }
.display { font-family: var(--f-display); font-weight: 400; }

/* ---------- Верхняя служебная строка ---------- */
.utility {
  border-bottom: 1px solid var(--rule);
  font-size: 13px; color: var(--ink-2);
}
.utility .wrap { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 44px; }
.utility nav { display: flex; gap: 22px; flex-wrap: wrap; }
.utility a { color: var(--ink-2); text-decoration: none; }
.utility a:hover { color: var(--ink); }
.theme-toggle {
  border: 1px solid var(--rule); background: transparent; color: var(--ink-2);
  border-radius: 999px; padding: 4px 12px; font: inherit; cursor: pointer; min-height: 32px;
}

/* ---------- Газетный титул ---------- */
.masthead { padding: 40px 0 0; text-align: center; }
.masthead .rule-top { border-top: 3px solid var(--ink); border-bottom: 1px solid var(--ink); height: 5px; }
.masthead .kicker {
  margin-top: 18px; font-family: var(--f-display); font-size: 14px;
  letter-spacing: .38em; text-transform: uppercase; color: var(--ink-2);
}
.masthead h1, .masthead .title {
  margin: 10px 0 8px; font-family: var(--f-display); font-weight: 700;
  font-size: clamp(38px, 7.2vw, 104px); line-height: 1; letter-spacing: -.01em;
}
.masthead .title a { color: inherit; text-decoration: none; }
.masthead .editions { font-family: var(--f-display); font-style: italic; font-size: clamp(16px, 1.6vw, 21px); color: var(--ink-2); }
.masthead .dateline {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 18px; padding: 11px 0;
  border-top: 1px solid var(--ink); border-bottom: 3px solid var(--ink);
  font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
}
.masthead .dateline .star { color: var(--accent); }
.masthead--compact { padding-top: 18px; }
.masthead--compact .title { font-size: clamp(28px, 4vw, 44px); margin: 6px 0; }

/* ---------- Главное меню ---------- */
.mainnav { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; padding: 20px 0 0; }
.mainnav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px;
  border-radius: 999px; color: var(--ink); text-decoration: none; font-weight: 500; font-size: 15px;
}
.mainnav a:hover { background: var(--rule-2); color: var(--ink); }
.mainnav a[aria-current="page"] { background: var(--ink); color: var(--paper); }

/* ---------- Поиск ---------- */
.searchbox {
  background: var(--surface); border: 1px solid var(--rule); border-radius: 14px;
  padding: clamp(18px, 2.5vw, 28px) clamp(18px, 2.5vw, 32px);
  display: grid; gap: 14px;
}
.searchbox > label { font-family: var(--f-display); font-size: 24px; }
.searchbox .row { display: flex; gap: 10px; flex-wrap: wrap; }
.searchbox .field {
  flex: 1 1 320px; display: flex; align-items: center; gap: 12px;
  background: #fff; border: 1.5px solid var(--ink); border-radius: 10px; padding: 0 16px; min-height: 58px;
}
:root[data-theme="dark"] .searchbox .field, :root[data-theme="dark"] .select { background: var(--paper); }
.searchbox .field input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink);
  font: 400 18px var(--f-ui);
}
.select {
  flex: 0 1 190px; display: flex; flex-direction: column; justify-content: center;
  background: #fff; border: 1px solid var(--rule); border-radius: 10px; padding: 6px 14px; min-height: 58px;
  font-size: 12px; color: var(--ink-2);
}
.select select { border: 0; background: transparent; font: 400 16px var(--f-ui); color: var(--ink); padding: 0; margin: 0; outline: 0; }
.searchbox .hints { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; font-size: 14px; color: var(--ink-2); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 26px; border-radius: 10px; border: 1.5px solid transparent;
  font: 600 16px var(--f-ui); cursor: pointer; text-decoration: none;
}
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-ink); color: var(--on-accent); }
.btn-outline { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-outline:hover { background: var(--ink); color: var(--paper); }
.btn-ghost { background: var(--surface); color: var(--ink); border-color: var(--rule); font-weight: 500; }
.btn-ghost:hover { border-color: var(--ink); color: var(--ink); }
.btn-block { width: 100%; }

.chip {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px;
  border: 1px solid var(--rule); border-radius: 999px; color: var(--ink); text-decoration: none; font-size: 14px;
  background: transparent;
}
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip[aria-current="true"], .chip.is-active { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* ---------- Секции ---------- */
.section { padding-top: clamp(40px, 6vw, 72px); }
.section-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap;
  border-bottom: 1px solid var(--ink); padding-bottom: 10px; margin-bottom: 22px;
}
.section-head h2 { margin: 0; font-family: var(--f-display); font-weight: 400; font-size: clamp(28px, 3vw, 36px); }
.section-head .aside { font-size: 14px; color: var(--ink-2); }
.section-head a.aside { color: var(--accent); text-decoration: none; }

/* ---------- Издания («полка») ---------- */
.editions-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; }
.edition-card {
  --ed: var(--accent);
  display: flex; flex-direction: column; gap: 12px; min-height: 240px;
  padding: 24px 22px; border: 1px solid var(--rule); border-top: 6px solid var(--ed);
  border-radius: 6px 6px 14px 14px; background: var(--surface); color: var(--ink); text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease;
}
.edition-card:hover { color: var(--ink); transform: translateY(-2px); box-shadow: 0 10px 28px rgba(29, 24, 19, .08); }
.edition-card .years { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); }
.edition-card .name { font-family: var(--f-display); font-size: 36px; line-height: 1.05; }
.edition-card .editors { font-size: 14px; color: var(--ink-2); flex: 1; }
.edition-card .foot {
  display: flex; justify-content: space-between; align-items: center;
  border-top: 1px dashed var(--rule); padding-top: 12px; font-size: 15px;
}
.edition-card .foot b { font-weight: 600; }
.edition-card .foot span { color: var(--accent); }

/* ---------- Хронология ---------- */
.years-strip {
  display: grid; grid-template-columns: repeat(var(--cols, 9), minmax(96px, 1fr));
  background: var(--surface); border: 1px solid var(--rule); border-radius: 14px; overflow-x: auto;
}
.year-cell {
  display: flex; flex-direction: column; justify-content: space-between; gap: 14px;
  min-height: 176px; padding: 20px 16px; border-right: 1px solid var(--rule-2);
  color: var(--ink); text-decoration: none;
}
.year-cell:last-child { border-right: 0; }
a.year-cell:hover { background: var(--paper-2); color: var(--ink); }
.year-cell .y { font-family: var(--f-display); font-size: 30px; }
.year-cell .dots { display: flex; flex-wrap: wrap; gap: 6px; }
.year-cell .dot { width: 14px; height: 14px; border-radius: 50%; background: var(--ed, var(--accent)); }
.year-cell .n { font-size: 13px; color: var(--ink-2); }
.year-cell.is-empty { background: var(--paper-2); }
.year-cell.is-empty .y { color: var(--ink-3); }
.legend { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 14px; font-size: 14px; color: var(--ink-2); }
.legend span { display: inline-flex; align-items: center; gap: 8px; }
.legend i { width: 12px; height: 12px; border-radius: 50%; background: var(--ed); display: inline-block; }

/* ---------- Списки номеров ---------- */
.issues { list-style: none; margin: 0; padding: 0; }
.issue-row {
  display: grid; grid-template-columns: 160px minmax(0, 1fr) auto auto; align-items: center; gap: 20px;
  padding: 16px 4px; border-bottom: 1px solid var(--rule-2); color: var(--ink); text-decoration: none;
}
.issue-row:hover { background: var(--paper-2); color: var(--ink); }
.issue-row .date { font-family: var(--f-display); font-size: 17px; color: var(--ink-2); }
.issue-row .t { display: flex; flex-direction: column; gap: 2px; }
.issue-row .t b { font-family: var(--f-display); font-weight: 400; font-size: 22px; }
.issue-row .t small { font-size: 13px; color: var(--ink-2); }
.issue-row .count { font-size: 14px; color: var(--ink-2); white-space: nowrap; }
.issue-row .go { color: var(--accent); white-space: nowrap; }
.issue-row .mark { width: 10px; height: 10px; border-radius: 50%; background: var(--ed); display: inline-block; margin-right: 8px; }

/* Группы архива: издание → год */
.archive-group { border: 1px solid var(--rule); border-radius: 14px; background: var(--surface); margin-bottom: 14px; overflow: hidden; }
.archive-group > summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 18px 22px; border-left: 6px solid var(--ed, var(--accent));
}
.archive-group > summary::-webkit-details-marker { display: none; }
.archive-group > summary .name { font-family: var(--f-display); font-size: 26px; }
.archive-group > summary .meta { font-size: 14px; color: var(--ink-2); }
.archive-group > summary::after { content: "＋"; color: var(--ink-2); font-size: 20px; }
.archive-group[open] > summary::after { content: "－"; }
.archive-group .year-block { padding: 0 22px 12px; }
.archive-group .year-block h3 {
  margin: 16px 0 4px; font-family: var(--f-display); font-weight: 400; font-size: 20px; color: var(--ink-2);
}

/* ---------- Боковые карточки ---------- */
.two-col { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: 48px; align-items: start; }
.quote-card { background: var(--ink); color: var(--paper); border-radius: 14px; padding: 30px 28px; display: grid; gap: 16px; }
:root[data-theme="dark"] .quote-card { background: var(--surface); color: var(--ink); border: 1px solid var(--rule); }
.quote-card .label { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; opacity: .75; }
.quote-card blockquote { margin: 0; font-family: var(--f-read); font-size: 20px; line-height: 1.55; }
.quote-card cite { font-family: var(--f-display); font-style: italic; font-size: 17px; opacity: .8; }
.quote-card a { color: inherit; justify-self: start; }
.panel { border: 1px solid var(--rule); border-radius: 14px; background: var(--surface); padding: 24px 26px; display: grid; gap: 10px; }
.panel h3 { margin: 0; font-family: var(--f-display); font-weight: 400; font-size: 22px; }
.progress { height: 6px; background: var(--rule-2); border-radius: 3px; overflow: hidden; }
.progress > i { display: block; height: 100%; background: var(--accent); }

/* ---------- Пустые состояния / сообщения ---------- */
.empty { text-align: center; padding: 56px 20px; border: 1px dashed var(--rule); border-radius: 14px; color: var(--ink-2); }
.notice { padding: 14px 18px; border-radius: 10px; border: 1px solid var(--rule); background: var(--surface); }
.notice--error { border-color: #C9867A; background: #F8E6E1; color: #6B1E14; }
.notice--ok { border-color: #8DB39A; background: #E5F1E8; color: #1F4A2C; }

/* ---------- Формы (админка, контакты) ---------- */
.form { display: grid; gap: 16px; }
.form label { display: grid; gap: 6px; font-weight: 500; font-size: 15px; }
.form input[type=text], .form input[type=password], .form input[type=email], .form textarea, .form select {
  font: 400 16px var(--f-ui); color: var(--ink); background: #fff;
  border: 1px solid var(--rule); border-radius: 10px; padding: 12px 14px; min-height: 48px;
}
.form input:focus, .form textarea:focus, .form select:focus { border-color: var(--ink); outline: none; box-shadow: 0 0 0 3px rgba(47, 93, 98, .25); }
.form small { color: var(--ink-2); font-weight: 400; }
.hp { position: absolute !important; left: -9999px !important; }

.card-narrow { max-width: 460px; margin: 8vh auto; background: var(--surface); border: 1px solid var(--rule); border-radius: 16px; padding: 36px 34px; }
.card-narrow h1 { margin: 0 0 6px; font-family: var(--f-display); font-weight: 400; font-size: 32px; }

/* ---------- Подвал ---------- */
.site-footer { margin-top: clamp(56px, 8vw, 96px); background: #1D1813; color: #CDBFA8; font-size: 14px; }
.site-footer .wrap { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; padding-top: 40px; padding-bottom: 40px; }
.site-footer .name { font-family: var(--f-display); font-size: 26px; color: #F3EDE1; display: block; margin-bottom: 6px; }
.site-footer nav { display: flex; gap: 22px; flex-wrap: wrap; }
.site-footer a { color: #F3EDE1; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; color: #fff; }

/* ---------- Адаптив ---------- */
@media (max-width: 900px) {
  .two-col { grid-template-columns: 1fr; gap: 32px; }
  .issue-row { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 14px; }
  .issue-row .date { grid-column: 1 / -1; font-size: 15px; }
  .issue-row .count { display: none; }
  .masthead .dateline { justify-content: center; }
  .masthead .dateline .star, .masthead .dateline .updated { display: none; }
}
@media (max-width: 640px) {
  body { padding-bottom: 76px; }
  .utility nav { display: none; }
  .mainnav { display: none; }
  .searchbox .select { flex: 1 1 45%; }
  .searchbox .btn { flex: 1 1 100%; }
  .edition-card { min-height: 0; }
  .years-strip { grid-template-columns: repeat(var(--cols, 9), 88px); }
}

/* Нижняя панель на телефоне */
.tabbar { display: none; }
@media (max-width: 640px) {
  .tabbar {
    display: grid; grid-template-columns: repeat(4, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    background: var(--surface); border-top: 1px solid var(--rule);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .tabbar a {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    min-height: 64px; color: var(--ink-2); text-decoration: none; font-size: 12px;
  }
  .tabbar a[aria-current="page"] { color: var(--accent); font-weight: 600; }
  .tabbar svg { width: 22px; height: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}
@media print {
  .utility, .mainnav, .tabbar, .site-footer, .searchbox { display: none !important; }
  body { background: #fff; color: #000; }
}

/* =========================================================
   Страница номера (читалка)
   ========================================================= */
.reader-bar { position: sticky; top: 0; z-index: 40; background: var(--surface); border-bottom: 1px solid var(--rule); }
.reader-bar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 14px; color: var(--ink-2); align-items: center; }
.crumbs a { color: var(--ink-2); text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }
.crumbs [aria-current] { color: var(--ink); }
.reader-bar form { display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--rule); border-radius: 10px; padding: 0 12px; min-height: 42px; width: min(340px, 45vw); }
:root[data-theme="dark"] .reader-bar form { background: var(--paper); }
.reader-bar input { border: 0; outline: 0; background: transparent; flex: 1; min-width: 0; font: 400 15px var(--f-ui); color: var(--ink); }
.read-progress { height: 3px; background: var(--rule-2); }
.read-progress > i { display: block; height: 100%; background: var(--accent); transition: width .2s; }

.reader { display: grid; grid-template-columns: 300px minmax(0, 1fr) 250px; min-height: 70vh; }
.reader .toc { background: var(--paper-2); border-right: 1px solid var(--rule); padding: 32px 22px; }
.reader .toc-inner { position: sticky; top: 84px; display: grid; gap: 18px; max-height: calc(100vh - 110px); overflow: auto; }
.toc .eyebrow, .tools .eyebrow { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); }
.toc .paper-name { font-family: var(--f-display); font-size: 28px; line-height: 1.1; display: block; }
.toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.toc ol a { display: flex; gap: 10px; padding: 8px 10px; border-radius: 8px; color: var(--ink); text-decoration: none; font-size: 15px; line-height: 1.35; }
.toc ol a:hover { background: var(--rule-2); color: var(--ink); }
.toc ol a[aria-current="page"] { background: var(--rule-2); font-weight: 600; }
.toc ol .num { color: var(--ink-3); min-width: 22px; font-variant-numeric: tabular-nums; }
.toc ol a.has-hit::after { content: "●"; color: var(--accent); margin-left: auto; font-size: 10px; padding-top: 4px; }

.reader .body { padding: clamp(28px, 5vw, 56px) clamp(18px, 5vw, 72px); }
.article { max-width: 700px; margin: 0 auto; display: grid; gap: 20px; }
.article .kicker { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.article h1 { margin: 0; font-family: var(--f-display); font-weight: 400; font-size: clamp(34px, 4.6vw, 56px); line-height: 1.08; }
.article .byline { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 11px 0; font-size: 15px; color: var(--ink-2); }
.article-text { font-family: var(--f-read); font-size: var(--read-size); line-height: 1.75; overflow-wrap: break-word; }
.article-text p { margin: 0 0 1em; }
.article-text h2, .article-text h3, .article-text h4 { font-family: var(--f-display); font-weight: 400; line-height: 1.2; margin: 1.4em 0 .5em; }
.article-text blockquote { margin: 1.2em 0; padding: 14px 28px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); font-family: var(--f-display); font-size: 1.3em; line-height: 1.4; text-align: center; color: var(--accent); }
.article-text img { border-radius: 8px; }
.article-text mark, mark { background: #F3D98B; color: #1D1813; padding: 0 2px; border-radius: 2px; }
.scan-frame { width: 100%; aspect-ratio: 3 / 4; min-height: 520px; border: 1px solid var(--rule); border-radius: 12px; background: var(--surface); }

.pager { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
.pager a { display: grid; gap: 3px; padding: 16px 18px; border: 1px solid var(--rule); border-radius: 12px; background: var(--surface); color: var(--ink); text-decoration: none; }
.pager a:hover { border-color: var(--ink); color: var(--ink); }
.pager a small { font-size: 13px; color: var(--ink-2); }
.pager a b { font-family: var(--f-display); font-weight: 400; font-size: 19px; line-height: 1.25; }
.pager a.next { text-align: right; background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.pager a.next small { color: inherit; opacity: .85; }
.pager a.next:hover { background: var(--accent-ink); }
.pager .spacer { visibility: hidden; }

.reader .tools { border-left: 1px solid var(--rule); padding: 32px 20px; }
.tools-inner { position: sticky; top: 84px; display: grid; gap: 12px; }
.fontsize { display: flex; align-items: center; justify-content: space-between; background: var(--surface); border: 1px solid var(--rule); border-radius: 10px; padding: 3px; }
.fontsize button { width: 48px; height: 42px; border: 0; background: transparent; color: var(--ink); cursor: pointer; font: 500 15px var(--f-ui); border-radius: 8px; }
.fontsize button:hover { background: var(--rule-2); }
.themes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.themes button { height: 42px; border-radius: 8px; border: 1px solid var(--rule); cursor: pointer; font: 500 12px var(--f-ui); }
.themes button[aria-pressed="true"] { outline: 2px solid var(--ink); outline-offset: 1px; }
.tool-btn { display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 0 14px; border: 1px solid var(--rule); border-radius: 10px; background: var(--surface); color: var(--ink); font: 400 15px var(--f-ui); cursor: pointer; text-decoration: none; text-align: left; }
.tool-btn:hover { border-color: var(--ink); color: var(--ink); }
.tool-btn svg { width: 18px; height: 18px; flex: none; }
.tool-btn[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
.cite-box { background: var(--ink); color: var(--paper); border-radius: 12px; padding: 18px; display: grid; gap: 6px; font-size: 14px; line-height: 1.5; margin-top: 8px; }
:root[data-theme="dark"] .cite-box { background: var(--surface); color: var(--ink); border: 1px solid var(--rule); }
.cite-box b { font-family: var(--f-display); font-weight: 400; font-size: 18px; }
.cite-box span { opacity: .8; }
.toast { position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%); background: var(--ink); color: var(--paper); padding: 10px 18px; border-radius: 999px; font-size: 14px; opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 60; }
.toast.show { opacity: 1; }

@media (max-width: 1100px) {
  .reader { grid-template-columns: 260px minmax(0, 1fr); }
  .reader .tools { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--rule); }
  .tools-inner { position: static; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
}
@media (max-width: 780px) {
  .reader { grid-template-columns: 1fr; }
  .reader .toc { border-right: 0; border-bottom: 1px solid var(--rule); padding: 18px var(--gutter); }
  .reader .toc-inner { position: static; max-height: none; }
  .toc details:not([open]) ol { display: none; }
  .reader-bar form { display: none; }
  .pager { grid-template-columns: 1fr; }
}
@media print {
  .reader-bar, .reader .toc, .reader .tools, .pager, .read-progress { display: none !important; }
  .reader { display: block; }
  .article-text { font-size: 12pt; }
}

/* =========================================================
   Поиск
   ========================================================= */
.page-title { font-family: var(--f-display); font-weight: 400; font-size: clamp(32px, 4vw, 48px); line-height: 1.1; margin: 0; }
.page-lead { margin: 8px 0 0; color: var(--ink-2); font-size: 17px; }
.search-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 40px; align-items: start; }
.facets { display: grid; gap: 26px; position: sticky; top: 20px; }
.facet h3 { margin: 0 0 8px; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); font-weight: 500; }
.facet ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.facet a { display: flex; justify-content: space-between; gap: 10px; padding: 7px 10px; border-radius: 8px; color: var(--ink); text-decoration: none; font-size: 15px; }
.facet a:hover { background: var(--rule-2); color: var(--ink); }
.facet a[aria-current="true"] { background: var(--ink); color: var(--paper); }
.facet a .c { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.facet a[aria-current="true"] .c { color: inherit; opacity: .7; }
.facet .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ed); display: inline-block; margin-right: 8px; }

.results-meta { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding-bottom: 12px; border-bottom: 1px solid var(--ink); margin-bottom: 6px; font-size: 15px; color: var(--ink-2); }
.results-meta b { color: var(--ink); font-weight: 600; }
.sort-links { display: flex; gap: 6px; }
.active-filters { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 4px; }
.active-filters a { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px; border-radius: 999px; background: var(--rule-2); color: var(--ink); text-decoration: none; font-size: 14px; }
.active-filters a::after { content: "×"; font-size: 17px; color: var(--ink-2); }

.result { display: grid; gap: 6px; padding: 22px 4px; border-bottom: 1px solid var(--rule-2); }
.result .src { font-size: 13px; color: var(--ink-2); display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.result .src i { width: 9px; height: 9px; border-radius: 50%; background: var(--ed); display: inline-block; }
.result h2 { margin: 0; font-family: var(--f-display); font-weight: 400; font-size: 25px; line-height: 1.2; }
.result h2 a { color: var(--ink); text-decoration: none; }
.result h2 a:hover { color: var(--accent); text-decoration: underline; }
.result .by { font-size: 14px; color: var(--ink-2); }
.result .snip { font-family: var(--f-read); font-size: 16.5px; line-height: 1.65; color: var(--ink); margin: 2px 0 0; }
.result .more { font-size: 13px; color: var(--ink-3); }

.pagination { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin-top: 32px; }
.pagination a, .pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--rule); color: var(--ink); text-decoration: none; background: var(--surface); }
.pagination a:hover { border-color: var(--ink); color: var(--ink); }
.pagination [aria-current="page"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.pagination .gap { border: 0; background: transparent; }

.author-cloud { display: flex; flex-wrap: wrap; gap: 8px; }
.author-cloud a small { color: var(--ink-3); margin-left: 6px; }

/* =========================================================
   Страница издания
   ========================================================= */
.edition-hero { --ed: var(--accent); border-top: 8px solid var(--ed); background: var(--surface); border-radius: 0 0 16px 16px; border-left: 1px solid var(--rule); border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: clamp(24px, 4vw, 44px); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px; align-items: end; }
.edition-hero .eyebrow { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-2); }
.edition-hero h1 { margin: 6px 0 10px; font-family: var(--f-display); font-weight: 700; font-size: clamp(44px, 7vw, 88px); line-height: 1; }
.edition-hero p { margin: 0; max-width: 60ch; color: var(--ink-2); font-size: 17px; }
.edition-hero .facts { display: grid; grid-template-columns: repeat(3, auto); gap: 6px 28px; text-align: right; }
.edition-hero .facts b { display: block; font-family: var(--f-display); font-weight: 400; font-size: 38px; line-height: 1; color: var(--ink); }
.edition-hero .facts span { font-size: 13px; color: var(--ink-2); }
.edition-hero .actions { grid-column: 1 / -1; display: flex; gap: 10px; flex-wrap: wrap; }

.year-tabs { display: flex; gap: 8px; flex-wrap: wrap; position: sticky; top: 0; z-index: 20; background: var(--paper); padding: 12px 0; border-bottom: 1px solid var(--rule); }
.issue-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.issue-card { --ed: var(--accent); display: grid; grid-template-rows: auto 1fr auto; gap: 12px; padding: 20px; border: 1px solid var(--rule); border-radius: 14px; background: var(--surface); color: var(--ink); text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; }
.issue-card:hover { color: var(--ink); transform: translateY(-2px); box-shadow: 0 10px 28px rgba(29, 24, 19, .08); }
.issue-card .top { display: flex; gap: 14px; align-items: center; }
.issue-card .spine { width: 54px; height: 68px; flex: none; border-radius: 4px; background: var(--paper); border: 1px solid var(--rule); border-top: 5px solid var(--ed); display: flex; align-items: center; justify-content: center; font-family: var(--f-display); font-size: 20px; }
.issue-card .top b { font-family: var(--f-display); font-weight: 400; font-size: 21px; display: block; line-height: 1.2; }
.issue-card .top small { color: var(--ink-2); font-size: 13px; }
.issue-card ol { margin: 0; padding: 0 0 0 18px; font-size: 14px; color: var(--ink-2); line-height: 1.45; display: grid; gap: 3px; }
.issue-card .foot { display: flex; justify-content: space-between; align-items: center; font-size: 14px; border-top: 1px dashed var(--rule); padding-top: 10px; }
.issue-card .foot span { color: var(--accent); }
.issue-card .scan { font-size: 12px; border: 1px solid var(--rule); border-radius: 999px; padding: 2px 8px; color: var(--ink-2); }

@media (max-width: 900px) {
  .search-layout { grid-template-columns: 1fr; gap: 20px; }
  .facets { position: static; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
  .edition-hero { grid-template-columns: 1fr; }
  .edition-hero .facts { text-align: left; }
}

/* ---------- Ссылки-фрагменты в результатах поиска ---------- */
.result .snip-link { color: inherit; text-decoration: none; display: block; border-radius: 6px; margin: 0 -6px; padding: 2px 6px; }
.result .snip-link:hover { background: var(--paper-2); }

/* ---------- Подсказки при вводе ---------- */
.suggest-box { position: absolute; z-index: 80; background: var(--surface); border: 1px solid var(--rule); border-radius: 12px; box-shadow: 0 16px 40px rgba(29, 24, 19, .14); padding: 6px; max-height: 60vh; overflow: auto; }
.suggest-box [role="option"] { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 8px; cursor: pointer; color: var(--ink); text-decoration: none; font-size: 15px; }
.suggest-box [role="option"][aria-selected="true"], .suggest-box [role="option"]:hover { background: var(--rule-2); }
.suggest-box small { color: var(--ink-3); }
.suggest-box .grp { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); padding: 8px 12px 4px; }

/* ---------- Навигатор совпадений в читалке ---------- */
.hitbar { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 55; display: flex; align-items: center; gap: 6px; background: var(--ink); color: var(--paper); border-radius: 999px; padding: 6px 8px 6px 18px; box-shadow: 0 12px 30px rgba(0, 0, 0, .25); font-size: 14px; }
.hitbar button, .hitbar a { min-width: 40px; height: 40px; border-radius: 999px; border: 0; background: rgba(255, 255, 255, .12); color: inherit; font: 500 15px var(--f-ui); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; padding: 0 12px; }
.hitbar button:hover, .hitbar a:hover { background: rgba(255, 255, 255, .24); color: inherit; }
mark.hit { scroll-margin: 40vh; }
mark.hit.is-current { background: #E8A33D; box-shadow: 0 0 0 3px rgba(232, 163, 61, .45); }
@media (max-width: 640px) { .hitbar { bottom: 84px; } }

/* =========================================================
   Текстовые страницы, хронология, год, закладки
   ========================================================= */
.prose { max-width: 740px; font-family: var(--f-read); font-size: 18px; line-height: 1.7; }
.prose h2 { font-family: var(--f-display); font-weight: 400; font-size: 30px; line-height: 1.2; margin: 1.6em 0 .5em; }
.prose h3 { font-family: var(--f-ui); font-weight: 600; font-size: 18px; margin: 1.4em 0 .4em; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li { margin: .3em 0; }
.prose .lead { font-size: 21px; color: var(--ink-2); }
.page-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 56px; align-items: start; }
.page-grid aside { position: sticky; top: 20px; display: grid; gap: 16px; }
.toc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font-size: 15px; }
.toc-list a { display: block; padding: 7px 10px; border-radius: 8px; color: var(--ink); text-decoration: none; }
.toc-list a:hover { background: var(--rule-2); }
.faq details { border-bottom: 1px solid var(--rule); padding: 4px 0; }
.faq summary { cursor: pointer; list-style: none; padding: 14px 0; font-family: var(--f-display); font-size: 22px; display: flex; justify-content: space-between; gap: 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "＋"; color: var(--ink-2); }
.faq details[open] summary::after { content: "－"; }
.faq .answer { padding: 0 0 16px; }
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px; margin: 24px 0; }
.stat-row div { background: var(--surface); border: 1px solid var(--rule); border-radius: 12px; padding: 16px 18px; }
.stat-row b { display: block; font-family: var(--f-display); font-weight: 400; font-size: 36px; line-height: 1; }
.stat-row span { font-size: 14px; color: var(--ink-2); font-family: var(--f-ui); }

.tl { position: relative; margin-left: 8px; padding-left: 36px; border-left: 2px solid var(--rule); }
.tl-year { position: relative; padding: 8px 0 28px; }
.tl-year::before { content: ""; position: absolute; left: -46px; top: 18px; width: 18px; height: 18px; border-radius: 50%; background: var(--paper); border: 3px solid var(--ink); }
.tl-year.is-empty::before { border-color: var(--rule); }
.tl-year h2 { margin: 0 0 12px; font-family: var(--f-display); font-weight: 400; font-size: 34px; display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap; }
.tl-year h2 small { font-family: var(--f-ui); font-size: 14px; color: var(--ink-2); }
.tl-year.is-empty h2 { color: var(--ink-3); font-size: 24px; }
.month-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.month { background: var(--surface); border: 1px solid var(--rule); border-radius: 12px; padding: 14px 16px; }
.month h3 { margin: 0 0 8px; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); font-weight: 500; }
.month a { display: flex; align-items: center; gap: 8px; padding: 6px 0; color: var(--ink); text-decoration: none; font-size: 15px; }
.month a:hover { color: var(--accent); }
.month a i { width: 10px; height: 10px; border-radius: 50%; background: var(--ed); flex: none; }
.filter-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 18px 0 28px; }

.fav-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.fav-item { position: relative; }
.fav-item .remove { position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--rule); background: var(--surface); color: var(--ink-2); cursor: pointer; font-size: 18px; }
.fav-item .remove:hover { border-color: var(--accent); color: var(--accent); }

@media (max-width: 900px) {
  .page-grid { grid-template-columns: 1fr; gap: 28px; }
  .page-grid aside { position: static; }
}

/* =========================================================
   Этап 4: заметки, чтение вслух, весь номер, похожие статьи
   ========================================================= */
.sel-bar { position: absolute; z-index: 90; display: flex; gap: 2px; background: var(--ink); border-radius: 10px; padding: 4px; box-shadow: 0 10px 28px rgba(0, 0, 0, .25); }
.sel-bar button { border: 0; background: transparent; color: var(--paper); font: 500 14px var(--f-ui); padding: 9px 12px; border-radius: 7px; cursor: pointer; min-height: 40px; }
.sel-bar button:hover { background: rgba(255, 255, 255, .15); }
mark.note-hl { background: rgba(138, 43, 31, .16); color: inherit; border-bottom: 2px solid var(--accent); cursor: pointer; padding: 0; }
mark.note-hl.has-note { background: rgba(47, 93, 98, .18); border-bottom-color: #2F5D62; }
:root[data-theme="dark"] mark.note-hl { background: rgba(217, 130, 111, .22); }
.note-pop { position: absolute; z-index: 90; max-width: 320px; background: var(--surface); border: 1px solid var(--rule); border-radius: 12px; box-shadow: 0 14px 34px rgba(29, 24, 19, .16); padding: 14px 16px; font-size: 15px; }
.note-pop p { margin: 0 0 10px; white-space: pre-wrap; }
.note-pop .row { display: flex; gap: 8px; }
.note-pop button { border: 1px solid var(--rule); background: transparent; color: var(--ink); border-radius: 8px; padding: 7px 12px; font: 14px var(--f-ui); cursor: pointer; }
.note-pop button:hover { border-color: var(--ink); }
.tts-now { background: rgba(243, 217, 139, .45); border-radius: 6px; box-shadow: 0 0 0 6px rgba(243, 217, 139, .45); }
#ttsBtn[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }

.all-article { padding-top: 36px; margin-top: 20px; border-top: 1px solid var(--rule); scroll-margin-top: 80px; }
.all-title { margin: 0; font-family: var(--f-display); font-weight: 400; font-size: clamp(28px, 3.4vw, 40px); line-height: 1.12; }

.related { margin-top: 40px; padding-top: 22px; border-top: 3px double var(--ink); }
.related h2 { margin: 0 0 8px; font-family: var(--f-display); font-weight: 400; font-size: 26px; }
.related ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.related a { display: grid; gap: 3px; padding: 12px 10px; border-radius: 10px; color: var(--ink); text-decoration: none; }
.related a:hover { background: var(--paper-2); color: var(--ink); }
.related b { font-family: var(--f-display); font-weight: 400; font-size: 20px; line-height: 1.25; }
.related small { color: var(--ink-2); font-size: 13px; display: flex; align-items: center; gap: 7px; }
.related small i { width: 8px; height: 8px; border-radius: 50%; background: var(--ed); flex: none; }

.note-card { background: var(--surface); border: 1px solid var(--rule); border-radius: 12px; padding: 16px 18px; display: grid; gap: 8px; }
.note-card blockquote { margin: 0; font-family: var(--f-read); font-size: 16.5px; line-height: 1.6; border-left: 3px solid var(--accent); padding-left: 12px; }
.note-card .note-text { font-size: 15px; white-space: pre-wrap; }
.note-card .src { font-size: 13px; color: var(--ink-2); }
.note-card .row { display: flex; gap: 8px; flex-wrap: wrap; }
.note-card .row a, .note-card .row button { font-size: 14px; }

@media print {
  .sel-bar, .note-pop, .hitbar, .related, .toast { display: none !important; }
  mark.note-hl { background: none; border: 0; }
  .all-article { break-before: page; border: 0; }
  .all-article:first-of-type { break-before: auto; }
}

/* =========================================================
   Админка
   ========================================================= */
.adm { display: grid; grid-template-columns: 250px minmax(0, 1fr); min-height: 100vh; }
.adm-side { background: #1D1813; color: #CDBFA8; padding: 22px 14px; display: flex; flex-direction: column; gap: 18px; position: sticky; top: 0; height: 100vh; overflow: auto; }
.adm-brand { font-family: var(--f-display); font-size: 24px; color: #F3EDE1; text-decoration: none; padding: 0 10px; display: grid; }
.adm-brand small { font-family: var(--f-ui); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #9C8E7A; }
.adm-side nav { display: grid; gap: 2px; }
.adm-side nav a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 9px; color: #E4D9C6; text-decoration: none; font-size: 15px; min-height: 42px; }
.adm-side nav a:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.adm-side nav a[aria-current="page"] { background: #F3EDE1; color: #1D1813; font-weight: 600; }
.adm-side nav svg { width: 18px; height: 18px; flex: none; }
.adm-badge { margin-left: auto; background: #D9826F; color: #1D1813; border-radius: 999px; font-size: 12px; padding: 1px 8px; }
.adm-side-foot { margin-top: auto; display: grid; gap: 4px; padding: 0 10px; font-size: 14px; }
.adm-side-foot a { color: #CDBFA8; text-decoration: none; padding: 4px 0; }
.adm-side-foot a:hover { color: #fff; }
.adm-main { padding: 28px clamp(18px, 3vw, 40px) 60px; min-width: 0; }
.adm-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.adm-head h1 { margin: 0; font-family: var(--f-display); font-weight: 400; font-size: clamp(30px, 3vw, 40px); }
.adm-head p { margin: 4px 0 0; color: var(--ink-2); }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin-bottom: 22px; }
.kpi { background: var(--surface); border: 1px solid var(--rule); border-radius: 14px; padding: 16px 18px; display: grid; gap: 4px; text-decoration: none; color: var(--ink); }
a.kpi:hover { border-color: var(--ink); color: var(--ink); }
.kpi b { font-family: var(--f-display); font-weight: 400; font-size: 36px; line-height: 1; }
.kpi span { font-size: 14px; color: var(--ink-2); }
.kpi small { font-size: 13px; }
.kpi .up { color: #2F6B3A; } .kpi .down { color: #8A2B1F; }
.kpi.warn { border-color: #C9867A; background: #FBEDE9; }
:root[data-theme="dark"] .kpi.warn { background: #3A231E; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 18px; }
.card { background: var(--surface); border: 1px solid var(--rule); border-radius: 14px; padding: 20px 22px; min-width: 0; }
.card h2 { margin: 0 0 12px; font-family: var(--f-display); font-weight: 400; font-size: 24px; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.card h2 a, .card h2 small { font-family: var(--f-ui); font-size: 14px; }
.card.wide { grid-column: 1 / -1; }
.chart { width: 100%; height: 160px; display: block; }
.chart-axis { display: flex; justify-content: space-between; font-size: 12px; color: var(--ink-3); margin-top: 6px; }
.rank { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.rank li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px 6px; border-bottom: 1px solid var(--rule-2); font-size: 15px; }
.rank li:last-child { border-bottom: 0; }
.rank .bar { height: 4px; background: var(--rule-2); border-radius: 2px; margin-top: 5px; overflow: hidden; }
.rank .bar i { display: block; height: 100%; background: var(--accent); }
.rank small { color: var(--ink-2); }
.rank b { font-variant-numeric: tabular-nums; }
.tbl { width: 100%; border-collapse: collapse; font-size: 15px; }
.tbl th { text-align: left; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); font-weight: 500; padding: 10px 10px; border-bottom: 1px solid var(--ink); white-space: nowrap; }
.tbl td { padding: 11px 10px; border-bottom: 1px solid var(--rule-2); vertical-align: top; }
.tbl tr:hover td { background: var(--paper-2); }
.tbl .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbl .actions { white-space: nowrap; text-align: right; }
.tbl .actions a, .tbl .actions button { font-size: 14px; margin-left: 10px; }
.table-wrap { overflow-x: auto; }
.btn-sm { min-height: 36px; padding: 0 14px; font-size: 14px; }
.tag { display: inline-block; font-size: 12px; padding: 2px 8px; border-radius: 999px; background: var(--rule-2); color: var(--ink-2); white-space: nowrap; }
.tag.ok { background: #E5F1E8; color: #1F4A2C; } .tag.bad { background: #F8E6E1; color: #6B1E14; } .tag.warn { background: #FBF0D9; color: #6B4A10; }
.issue-list { display: grid; gap: 10px; }
.issue-list .it { border: 1px solid var(--rule); border-radius: 12px; background: var(--surface); padding: 14px 16px; }
.issue-list .it h3 { margin: 0 0 6px; font-size: 16px; }
.issue-list .it p { margin: 4px 0; font-size: 14px; color: var(--ink-2); }
.toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.toolbar input[type=search], .toolbar select { min-height: 42px; padding: 0 12px; border: 1px solid var(--rule); border-radius: 10px; font: 15px var(--f-ui); background: var(--surface); color: var(--ink); }
.log-line { font: 13.5px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
@media (max-width: 900px) {
  .adm { grid-template-columns: 1fr; }
  .adm-side { position: static; height: auto; }
  .adm-side nav { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .cards { grid-template-columns: 1fr; }
}

/* ---------- Админка: сообщения ---------- */
  .msg { border: 1px solid var(--rule); border-radius: 12px; background: var(--surface); padding: 18px 20px; display: grid; gap: 8px; }
  .msg.unread { border-color: var(--ink); }
  .msg header { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: baseline; }
  .msg h2 { margin: 0; font-family: var(--f-display); font-weight: 400; font-size: 22px; }
  .msg .who { font-size: 14px; color: var(--ink-2); }
  .msg .text { white-space: pre-wrap; font-family: var(--f-read); font-size: 16px; line-height: 1.6; }
  .msg .row { display: flex; gap: 8px; flex-wrap: wrap; }
  .msg .row .btn { min-height: 38px; padding: 0 14px; font-size: 14px; }
  .badge { display: inline-block; background: var(--accent); color: var(--on-accent); border-radius: 999px; font-size: 12px; padding: 2px 9px; margin-left: 6px; vertical-align: middle; }

/* ---------- Админка: редактор номера ---------- */
.editor-head { position: sticky; top: 0; z-index: 30; background: var(--paper); padding: 14px 0; margin-top: -14px; border-bottom: 1px solid var(--rule); }
.editor-actions { display: flex; align-items: center; gap: 14px; }
.editor-grid { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 22px; align-items: start; margin-top: 18px; }
.editor-meta { position: sticky; top: 96px; }
.editor-meta .form label { font-size: 14px; }
.editor-meta .form input, .editor-meta .form select, .editor-meta .form textarea { min-height: 42px; padding: 9px 12px; font-size: 15px; }
.art-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.art { background: var(--surface); border: 1px solid var(--rule); border-radius: 14px; overflow: hidden; }
.art.dragging { opacity: .5; border-style: dashed; }
.art.is-empty { border-color: #D8B06A; }
.art-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--rule-2); }
.art-handle { cursor: grab; color: var(--ink-3); font-size: 18px; padding: 4px; user-select: none; }
.art-no { color: var(--ink-3); font-variant-numeric: tabular-nums; min-width: 26px; }
.art-title { flex: 1; min-width: 0; border: 1px solid transparent; background: transparent; font: 400 21px var(--f-display); color: var(--ink); padding: 6px 8px; border-radius: 8px; }
.art-title:hover, .art-title:focus { border-color: var(--rule); background: #fff; outline: none; }
:root[data-theme="dark"] .art-title:focus { background: var(--paper); }
.art-meta { font-size: 13px; white-space: nowrap; }
.art-tools { display: flex; gap: 2px; }
.art-tools button { width: 34px; height: 34px; border: 1px solid transparent; background: transparent; border-radius: 8px; cursor: pointer; color: var(--ink-2); font-size: 15px; }
.art-tools button:hover { border-color: var(--rule); color: var(--ink); }
.art-tools .danger:hover { color: #8A2B1F; border-color: #C9867A; }
.art-body { padding: 12px 14px 14px; display: grid; gap: 10px; }
.art.is-collapsed .art-body { display: none; }
.art.is-collapsed .art-head { border-bottom: 0; cursor: pointer; }
.art-author { border: 1px solid var(--rule); border-radius: 8px; padding: 8px 12px; font: 15px var(--f-ui); background: #fff; color: var(--ink); max-width: 460px; }
:root[data-theme="dark"] .art-author, :root[data-theme="dark"] .rte, :root[data-theme="dark"] .rte-raw { background: var(--paper); }
.rte-bar { display: flex; flex-wrap: wrap; gap: 2px; border: 1px solid var(--rule); border-bottom: 0; border-radius: 10px 10px 0 0; padding: 4px; background: var(--paper-2); position: sticky; top: 92px; z-index: 5; }
.rte-bar button { min-width: 36px; height: 34px; border: 0; background: transparent; border-radius: 7px; cursor: pointer; font: 600 15px var(--f-ui); color: var(--ink); }
.rte-bar button:hover, .rte-bar button.on { background: var(--rule-2); }
.rte, .rte-raw { border: 1px solid var(--rule); border-radius: 0 0 10px 10px; padding: 14px 18px; min-height: 180px; max-height: 70vh; overflow: auto; background: #fff; font: 17px/1.65 var(--f-read); color: var(--ink); }
.rte:focus, .rte-raw:focus { outline: 2px solid var(--focus); outline-offset: -1px; }
.rte p { margin: 0 0 .8em; }
.rte blockquote { margin: .8em 0; padding-left: 14px; border-left: 3px solid var(--accent); }
.rte h3 { font: 600 19px var(--f-ui); margin: 1em 0 .4em; }
.rte-raw { width: 100%; font: 13.5px/1.5 ui-monospace, Menlo, Consolas, monospace; min-height: 300px; resize: vertical; }
.art-add { display: flex; gap: 10px; flex-wrap: wrap; margin: 14px 0 6px; }
dialog.card { max-width: 720px; width: calc(100% - 32px); border: 1px solid var(--rule); color: var(--ink); }
dialog::backdrop { background: rgba(29, 24, 19, .45); }
@media (max-width: 1100px) {
  .editor-grid { grid-template-columns: 1fr; }
  .editor-meta { position: static; }
  .rte-bar { top: 80px; }
}

/* ---------- Плавные переходы между страницами (View Transitions API) ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .18s; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

/* ---------- Распознать номер ---------- */
.rc-steps { display: flex; gap: 8px; list-style: none; padding: 0; margin: 0 0 18px; counter-reset: s; flex-wrap: wrap; }
.rc-steps li { counter-increment: s; font-size: 14px; color: var(--ink-2); background: var(--surface); border: 1px solid var(--rule); border-radius: 999px; padding: 6px 14px; }
.rc-steps li::before { content: counter(s) ". "; font-weight: 600; color: var(--accent); }
.rc-card { margin-bottom: 18px; }
.rc-card h2 small { font-family: var(--f-ui); font-size: 15px; }
.rc-src { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: stretch; }
.rc-drop { display: grid; gap: 6px; place-content: center; text-align: center; min-height: 150px; border: 2px dashed var(--rule); border-radius: 14px; padding: 20px; cursor: pointer; background: var(--paper-2); position: relative; }
.rc-drop:hover, .rc-drop.over { border-color: var(--accent); background: var(--surface); }
.rc-drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.rc-drop b { font-size: 18px; } .rc-drop span { font-size: 14px; color: var(--ink-2); }
.rc-cam { align-self: center; }
.rc-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.rc-row input[type=text] { min-height: 46px; padding: 0 14px; border: 1px solid var(--rule); border-radius: 10px; font: 15px var(--f-ui); background: #fff; color: var(--ink); min-width: 0; }
.rc-opts { margin-top: 12px; font-size: 14px; }
.rc-opts summary { cursor: pointer; color: var(--ink-2); }
.rc-opts label { display: flex; gap: 8px; align-items: center; margin: 8px 0; flex-wrap: wrap; }
.rc-opts input[type=number], .rc-opts select { min-height: 34px; border: 1px solid var(--rule); border-radius: 8px; padding: 0 8px; background: var(--surface); color: var(--ink); }
.rc-inline { margin: 0; align-self: center; }
.rc-progress { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; align-items: center; margin-top: 14px; }
.rc-progress .progress { grid-column: 1 / -1; height: 8px; }
.rc-progress span { font-size: 14px; color: var(--ink-2); }
.rc-note { font-size: 13.5px; margin: 12px 0 0; }
.rc-tools { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-start; margin-bottom: 12px; }
.rc-edit { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 14px; }
.rc-edit:has(.rc-flags[hidden]) { grid-template-columns: 1fr; }
#rcText { width: 100%; min-height: 60vh; resize: vertical; border: 1px solid var(--rule); border-radius: 12px; padding: 16px 18px; font: 16px/1.6 var(--f-read); background: #fff; color: var(--ink); }
:root[data-theme="dark"] #rcText, :root[data-theme="dark"] .rc-row input[type=text] { background: var(--paper); }
.rc-flags { border: 1px solid var(--rule); border-radius: 12px; background: var(--paper-2); padding: 12px; max-height: 60vh; overflow: auto; }
.rc-flags h3 { margin: 0 0 8px; font-size: 15px; }
.rc-flags ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.rc-flags button { width: 100%; text-align: left; display: grid; gap: 2px; border: 1px solid transparent; background: transparent; border-radius: 8px; padding: 6px 8px; cursor: pointer; color: var(--ink); font: 14px var(--f-ui); }
.rc-flags button:hover { border-color: var(--rule); background: var(--surface); }
.rc-flags button b { font-weight: 600; overflow-wrap: anywhere; } .rc-flags button small { color: var(--ink-2); font-size: 12.5px; }
.rc-flags li.seen button { opacity: .5; }
.rc-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 16px; }
.rc-arts { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; counter-reset: a; }
.rc-art { counter-increment: a; border: 1px solid var(--rule); border-radius: 12px; padding: 12px 14px 12px 50px; position: relative; background: var(--surface); }
.rc-art::before { content: counter(a); position: absolute; left: 16px; top: 12px; font-family: var(--f-display); font-size: 20px; color: var(--ink-3); }
.rc-art.warn { border-color: #D8B06A; }
.rc-art-head { display: flex; justify-content: space-between; gap: 10px; }
.rc-art-head b { font-family: var(--f-display); font-weight: 400; font-size: 20px; }
.rc-art p { margin: 6px 0 0; font-size: 14px; color: var(--ink-2); }
.rc-art .rc-warn { color: #8A5A10; }
.rc-final { margin-top: 16px; }
@media (max-width: 900px) {
  .rc-src { grid-template-columns: 1fr; }
  .rc-edit { grid-template-columns: 1fr; }
  .rc-flags { max-height: 280px; }
  .rc-meta { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) { .rc-meta { grid-template-columns: 1fr; } }

/* =========================================================
   Оформление статей из редактора — одинаково в редакторе (.rte) и на сайте (.article-text)
   ========================================================= */
.article-text .al-left { text-align: left; }
.article-text .al-center { text-align: center; }
.article-text .al-right { text-align: right; }
.article-text .al-justify { text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
.text-justify .article-text p:not([class*="al-"]):not(.poem):not(.sign) { text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
.article-text .lead { font-size: 1.12em; color: var(--ink-2); }
.article-text .epigraph { margin-left: auto; max-width: 70%; font-style: italic; font-size: .92em; color: var(--ink-2); text-align: right; }
.article-text .poem { font-style: italic; margin: 1em 0 1em 2em; text-align: left; white-space: normal; line-height: 1.6; }
.article-text .sign { text-align: right; font-variant: small-caps; letter-spacing: .06em; margin-top: .6em; }
.article-text .footnote { font-size: .85em; color: var(--ink-2); border-top: 1px solid var(--rule); padding-top: .5em; margin-top: 1.4em; }
.article-text .dropcap::first-letter { float: left; font-family: var(--f-display); font-size: 3.4em; line-height: .85; padding: .06em .08em 0 0; color: var(--accent); }
.article-text .spaced { letter-spacing: .22em; }
.article-text .caps { font-variant: small-caps; letter-spacing: .03em; }
.article-text .hl { background: #F3D98B; color: #1D1813; padding: 0 .1em; border-radius: 2px; }
.article-text hr { border: 0; text-align: center; margin: 1.6em 0; }
.article-text hr::after { content: "✦  ✦  ✦"; color: var(--ink-3); letter-spacing: .3em; }
.article-text figure { margin: 1.2em auto; max-width: 100%; }
.article-text figure img { display: block; width: 100%; height: auto; border-radius: 6px; }
.article-text figcaption { font-family: var(--f-ui); font-size: .8em; color: var(--ink-2); text-align: center; margin-top: .5em; line-height: 1.4; }
.article-text .fig.w25 { width: 25%; } .article-text .fig.w33 { width: 33%; } .article-text .fig.w50 { width: 50%; }
.article-text .fig.w75 { width: 75%; } .article-text .fig.w100 { width: 100%; }
.article-text .fig-left { float: left; margin: .3em 1.4em .8em 0; }
.article-text .fig-right { float: right; margin: .3em 0 .8em 1.4em; }
.article-text .fig-center { margin-left: auto; margin-right: auto; }
.article-text .fig-full { width: 100% !important; float: none; }
.article-text::after { content: ""; display: table; clear: both; }
.article-text .tbl { width: 100%; border-collapse: collapse; margin: 1.2em 0; font-size: .92em; font-family: var(--f-ui); }
.article-text .tbl th, .article-text .tbl td { border: 1px solid var(--rule); padding: .45em .6em; vertical-align: top; }
.article-text .tbl th { background: var(--paper-2); font-weight: 600; text-align: left; }
@media (max-width: 640px) {
  .article-text .fig-left, .article-text .fig-right { float: none; margin: 1em auto; }
  .article-text .fig.w25, .article-text .fig.w33, .article-text .fig.w50 { width: 70%; }
  .article-text .poem { margin-left: 1em; }
  .article-text .tbl { display: block; overflow-x: auto; }
}

/* ---------- Редактор (админка) ---------- */
.rte-wrap { position: relative; }
.rte-bar { display: flex; flex-wrap: wrap; gap: 4px; border: 1px solid var(--rule); border-bottom: 0; border-radius: 10px 10px 0 0; padding: 5px; background: var(--paper-2); position: sticky; top: 92px; z-index: 6; }
.rte-bar .g { display: inline-flex; gap: 1px; padding-right: 4px; margin-right: 2px; border-right: 1px solid var(--rule); align-items: center; }
.rte-bar .g:last-child { border-right: 0; }
.rte-bar button { min-width: 34px; height: 34px; border: 0; background: transparent; border-radius: 7px; cursor: pointer; font: 600 14px var(--f-ui); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; padding: 0 6px; }
.rte-bar button:hover { background: var(--rule-2); }
.rte-bar button.on { background: var(--ink); color: var(--paper); }
.rte-bar select { height: 34px; border: 1px solid var(--rule); border-radius: 7px; background: var(--surface); color: var(--ink); font: 14px var(--f-ui); padding: 0 6px; max-width: 190px; }
.rte-bar .hl-ico { background: #F3D98B; color: #1D1813; padding: 0 4px; border-radius: 3px; }
.rte { border: 1px solid var(--rule); border-radius: 0; padding: 18px 22px; min-height: 220px; max-height: 75vh; overflow: auto; background: #fff; color: var(--ink); font-family: var(--f-read); font-size: 17px; line-height: 1.7; }
.rte.drag { outline: 3px dashed var(--accent); outline-offset: -6px; }
.rte:focus { outline: 2px solid var(--focus); outline-offset: -1px; }
.rte figure { cursor: pointer; position: relative; }
.rte figure.rte-sel { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.rte figure.rte-uploading { border: 2px dashed var(--rule); border-radius: 8px; padding: 30px 10px; }
.rte .tbl td:empty::after, .rte .tbl th:empty::after { content: "\00a0"; }
.rte-raw { width: 100%; border: 1px solid var(--rule); padding: 14px 18px; min-height: 320px; resize: vertical; background: #fff; color: var(--ink); font: 13.5px/1.5 ui-monospace, Menlo, Consolas, monospace; }
:root[data-theme="dark"] .rte, :root[data-theme="dark"] .rte-raw { background: var(--paper); }
.rte-status { border: 1px solid var(--rule); border-top: 0; border-radius: 0 0 10px 10px; padding: 6px 12px; font: 13px var(--f-ui); color: var(--ink-2); background: var(--paper-2); }
.rte-figbar { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; padding: 6px 4px 2px; margin-top: 4px; border-top: 2px solid var(--accent); font: 13px var(--f-ui); }
.rte-figbar[hidden] { display: none; }
.rte-figbar span { color: var(--ink-2); margin: 0 2px 0 6px; }
.rte-figbar button { border: 1px solid var(--rule); background: var(--paper-2); color: var(--ink); border-radius: 7px; padding: 5px 9px; font: 13px var(--f-ui); cursor: pointer; }
.rte-figbar button.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.rte-figbar .danger { color: #8A2B1F; }
.rte-pop { position: absolute; z-index: 95; background: var(--surface); border: 1px solid var(--rule); border-radius: 12px; box-shadow: 0 14px 34px rgba(29, 24, 19, .18); padding: 12px; display: grid; gap: 8px; min-width: 250px; max-width: 360px; font: 14px var(--f-ui); color: var(--ink); }
.rte-pop label { display: flex; gap: 8px; align-items: center; justify-content: space-between; }
.rte-pop input[type=text], .rte-pop input[type=number] { min-height: 34px; border: 1px solid var(--rule); border-radius: 7px; padding: 0 8px; font: 14px var(--f-ui); background: #fff; color: var(--ink); flex: 1; min-width: 0; }
.rte-pop button { border: 1px solid var(--rule); background: var(--paper-2); color: var(--ink); border-radius: 8px; padding: 8px 10px; font: 14px var(--f-ui); cursor: pointer; text-align: left; }
.rte-pop button:hover { border-color: var(--ink); }
.rte-pop .chars { display: grid; grid-template-columns: repeat(8, 1fr); gap: 3px; }
.rte-pop .chars button { text-align: center; padding: 6px 0; font-size: 17px; }
.rte-pop .row { display: flex; gap: 6px; }
.rte-pop p { margin: 0; font-size: 12.5px; }
.rte-full { position: fixed; inset: 0; z-index: 90; background: var(--paper); padding: 12px clamp(8px, 4vw, 60px); display: flex; flex-direction: column; }
.rte-full .rte-bar { position: static; }
.rte-full .rte { flex: 1; max-height: none; max-width: 860px; width: 100%; margin: 0 auto; }
.rte-full .rte-status { max-width: 860px; width: 100%; margin: 0 auto; }
body.rte-noscroll { overflow: hidden; }
@media (max-width: 640px) { .rte-bar { top: 70px; } .rte-bar .g { border-right: 0; } .rte { padding: 14px; } }

/* ---------- Окно скана (сайт и редактор) ---------- */
.scan-dlg { width: min(1200px, 96vw); height: min(92vh, 1100px); max-width: none; max-height: none; padding: 0; border: 1px solid var(--rule); border-radius: 14px; background: var(--surface); color: var(--ink); display: none; }
.scan-dlg[open] { display: flex; flex-direction: column; }
.scan-dlg::backdrop { background: rgba(20, 16, 12, .72); }
.scan-dlg-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 14px; border-bottom: 1px solid var(--rule); font: 15px var(--f-ui); }
.scan-dlg-head span { display: flex; gap: 12px; align-items: center; }
.scan-dlg iframe { flex: 1; width: 100%; border: 0; background: #111; border-radius: 0 0 14px 14px; }
.scan-field { display: grid; gap: 6px; font-size: 14px; font-weight: 500; }
.scan-field small { font-weight: 400; color: var(--ink-2); line-height: 1.4; }
.scan-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.scan-mini { width: 100%; aspect-ratio: 4 / 3; border: 1px solid var(--rule); border-radius: 10px; background: #111; margin-top: 6px; }
.scan-find { max-width: 760px; width: calc(100% - 24px); }
.scan-results { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; max-height: 55vh; overflow: auto; }
.scan-results li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; align-items: center; border: 1px solid var(--rule); border-radius: 10px; padding: 8px 10px; }
.scan-results li.muted { display: block; border: 0; }
.scan-results b { display: block; font-weight: 600; font-size: 15px; } .scan-results small { color: var(--ink-2); font-size: 12.5px; overflow-wrap: anywhere; }
@media (max-width: 640px) { .scan-dlg { width: 100vw; height: 100dvh; border-radius: 0; } .scan-results li { grid-template-columns: 1fr 1fr; } .scan-results li > div { grid-column: 1 / -1; } }

/* ---------- Цвет, размер, сноски; окна редактора ---------- */
.article-text .c-red, .rte-pop .c-red { color: #8A2B1F; } .article-text .c-blue, .rte-pop .c-blue { color: #2B4C7E; }
.article-text .c-green, .rte-pop .c-green { color: #2F5D3A; } .article-text .c-gold, .rte-pop .c-gold { color: #9A6B12; }
.article-text .c-gray, .rte-pop .c-gray { color: #6B5E50; }
:root[data-theme="dark"] .article-text .c-red { color: #E39A8A; } :root[data-theme="dark"] .article-text .c-blue { color: #9DB6E0; }
:root[data-theme="dark"] .article-text .c-green { color: #9CC7A6; } :root[data-theme="dark"] .article-text .c-gold { color: #E0B868; }
.article-text .fs-sm { font-size: .85em; } .article-text .fs-lg { font-size: 1.2em; } .article-text .fs-xl { font-size: 1.45em; line-height: 1.35; }
.article-text sup.fn { color: var(--accent); font-weight: 600; padding: 0 1px; }
.article-text .footnote + .footnote { border-top: 0; padding-top: 0; margin-top: .3em; }
.inlink-list { display: grid; gap: 4px; max-height: 280px; overflow: auto; }
.inlink-list button { display: grid; gap: 2px; }
.inlink-list small { color: var(--ink-2); font-size: 12px; }
.rte-preview { width: min(900px, 96vw); max-height: 92vh; padding: 0; border: 1px solid var(--rule); border-radius: 14px; background: var(--paper); color: var(--ink); overflow: auto; }
.rte-preview::backdrop { background: rgba(20, 16, 12, .6); }
.rte-preview-head { position: sticky; top: 0; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 16px; background: var(--surface); border-bottom: 1px solid var(--rule); font: 15px var(--f-ui); z-index: 1; }
.rte-preview .article { padding: 24px clamp(16px, 4vw, 48px) 40px; }

/* =========================================================
   Отклики читателей
   ========================================================= */
.feedback { margin-top: 40px; padding-top: 22px; border-top: 3px double var(--ink); }
.feedback h2 { margin: 0 0 12px; font-family: var(--f-display); font-weight: 400; font-size: 28px; }
.fb-react { display: flex; flex-wrap: wrap; gap: 8px; }
.fb-r { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 1px solid var(--rule); border-radius: 999px; background: var(--surface); color: var(--ink); font: 500 15px var(--f-ui); cursor: pointer; transition: transform .1s ease; }
.fb-r:hover { border-color: var(--ink); }
.fb-r:active { transform: scale(.97); }
.fb-r b { font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.fb-r b:empty { display: none; }
.fb-r[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.fb-r[aria-pressed="true"] b { color: inherit; }
.fb-react-note { font-size: 14px; margin: 10px 0 0; }
.fb-sub { font-family: var(--f-ui); font-size: 18px; font-weight: 600; margin: 28px 0 10px; }
.fb-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.fb-c { border: 1px solid var(--rule); border-radius: 12px; background: var(--surface); padding: 14px 16px; }
.fb-c.pending { border-style: dashed; }
.fb-c-head { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 14px; }
.fb-c-head b { font-size: 15px; }
.fb-c-text { font-family: var(--f-read); font-size: 16.5px; line-height: 1.6; margin-top: 6px; overflow-wrap: anywhere; }
.fb-c-text p { margin: 0 0 .6em; } .fb-c-text p:last-child { margin: 0; }
.fb-pending { font-size: 13px; color: #8A5A10; margin: 6px 0 0; }
.fb-reply { margin-top: 10px; padding: 10px 14px; border-left: 3px solid var(--accent); background: var(--paper-2); border-radius: 0 10px 10px 0; font-size: 15px; }
.fb-reply b { display: block; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); margin-bottom: 4px; }
.fb-reply p { margin: 0 0 .5em; } .fb-reply p:last-child { margin: 0; }
.fb-own { display: flex; gap: 6px; margin-top: 8px; }
.fb-empty { padding: 6px 0; }
.fb-form { display: grid; gap: 12px; margin-top: 18px; padding: 18px; border: 1px solid var(--rule); border-radius: 14px; background: var(--paper-2); }
.fb-form label { display: grid; gap: 6px; font: 500 15px var(--f-ui); }
.fb-form input, .fb-form textarea { font: 16px var(--f-ui); color: var(--ink); background: #fff; border: 1px solid var(--rule); border-radius: 10px; padding: 10px 12px; min-height: 46px; }
:root[data-theme="dark"] .fb-form input, :root[data-theme="dark"] .fb-form textarea { background: var(--paper); }
.fb-form textarea { resize: vertical; line-height: 1.5; }
.fb-rules { margin: 0; font-size: 14px; color: var(--ink-2); line-height: 1.5; }
.fb-hp { position: absolute !important; left: -9999px !important; }
.fb-form-foot { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.fb-msg { font-size: 14px; color: var(--ink-2); }
@media print { .feedback { display: none !important; } }
.fb-top { margin: 0; padding-left: 1.2em; display: grid; gap: 10px; font-size: 15px; }
.fb-top a { font-family: var(--f-display); font-size: 18px; color: var(--ink); text-decoration: none; }
.fb-top a:hover { color: var(--accent); }
.fb-top small { display: block; color: var(--ink-2); font-size: 13px; }
.cm-head { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: center; }
.cm-text { font-family: var(--f-read); font-size: 16px; line-height: 1.6; overflow-wrap: anywhere; }
.cm-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-start; margin-top: 12px; }
.cm-more { flex-basis: 100%; }
.cm-more > summary { list-style: none; display: inline-flex; }
.cm-more > summary::-webkit-details-marker { display: none; }
.cm-more:not([open]) { flex-basis: auto; }

/* ---------- Выпадающий список с поиском (редакторы, авторы) ---------- */
.combo-wrap { position: relative; display: flex; width: 100%; max-width: 100%; }
.combo-wrap > input { flex: 1; min-width: 0; padding-right: 40px !important; }
.combo-btn { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border: 0; border-radius: 8px; background: transparent; color: var(--ink-2); font-size: 16px; cursor: pointer; }
.combo-btn:hover { background: var(--rule-2); color: var(--ink); }
.combo-box { position: absolute; z-index: 120; max-height: 300px; overflow: auto; background: var(--surface); border: 1px solid var(--rule); border-radius: 12px; box-shadow: 0 14px 34px rgba(29, 24, 19, .16); padding: 5px; display: grid; gap: 1px; }
.combo-box[hidden] { display: none; }
.combo-box button { text-align: left; border: 0; background: transparent; color: var(--ink); font: 15px var(--f-ui); padding: 9px 11px; border-radius: 8px; cursor: pointer; min-height: 40px; }
.combo-box button:hover, .combo-box button.active { background: var(--rule-2); }
.combo-box button.cur { font-weight: 600; }
.combo-box button.cur::after { content: "  ✓"; color: var(--accent); }
.combo-empty { margin: 0; padding: 9px 11px; font: 14px var(--f-ui); color: var(--ink-2); }
.art-body .combo-wrap { max-width: 460px; }
.login-card { position: relative; padding-top: 44px; }
.login-rules { position: absolute; left: 34px; right: 34px; top: 18px; height: 6px; border-top: 3px solid var(--ink); border-bottom: 1px solid var(--ink); }