/* ==========================================================================
   Knigi.ws  |  страница книги  |  fullstory.tpl, relatednews.tpl, comments.tpl,
   addcomments.tpl, litres.tpl, custom-series.tpl
   Подключается в main.tpl только при [available=showfull], ПОСЛЕ knigi2.css.
   Цвета только через переменные тем (knigi2.css, раздел 1). Корешки и обложки
   берут цвет из --spine-1..8 / --cover.

   Оглавление
   1. Каркас страницы и заголовки секций
   2. Шапка книги (обложка, автор, оценка, кнопки)
   3. Кнопка «Добавить в список» (super_lists)
   4. Вкладки-якоря
   5. О книге, таблица метаданных
   6. Скачать и читать
   7. Серия (полка корешков)
   8. Похожие книги
   9. Отзывы, оценка, комментарии, форма
  10. Реклама на странице книги
  11. Блоки будущих модулей (стили готовы, разметка закомментирована в fullstory.tpl)
  12. Телефон
   ========================================================================== */


/* 1. КАРКАС
   -------------------------------------------------------------------------- */
.kb { display: flex; flex-direction: column; gap: 64px; min-width: 0; }
.kb > * { min-width: 0; }
.kb h2 { font-size: 30px; line-height: 1.15; letter-spacing: -0.03em; }
.kb-sec { display: flex; flex-direction: column; gap: 16px; scroll-margin-top: 16px; }
.kb-sec__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.kb-sec h2 a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.kb-sec h2 a:hover { text-decoration-thickness: 2px; }
#about, #download, #series, #similar, #reviews, #quotes { scroll-margin-top: 16px; }

/* Карточка-поверхность внутри страницы книги */
.kb-box { padding: 24px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }

/* Список через запятую (форматы) */
.kb-list > span + span::before { content: ", "; }

.kb-removed {
	padding: 16px 20px; border: 1px solid var(--danger); border-radius: var(--radius);
	background: var(--surface); color: var(--danger); font-size: 17px;
}
.kb-nofile { color: var(--muted); }


/* 2. ШАПКА КНИГИ
   -------------------------------------------------------------------------- */
.kb-hero {
	display: grid; grid-template-columns: 232px minmax(0, 1fr); column-gap: 36px; row-gap: 0; grid-template-rows: auto 1fr; align-items: start;
}
.kb-hero__cover { grid-row: 1 / 3; width: 232px; }
.kb-hero__cover .k-cover { width: 100%; }
.kb-hero__main { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.kb-actions { grid-column: 2; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; margin-top: 20px; }

/* Обложка-заглушка, когда постера нет */
.kb-cover__name { font-size: 26px; line-height: 1.1; font-weight: 600; letter-spacing: -0.02em; }
.kb-cover__by { margin-top: 10px; font-size: 13px; font-weight: 400; opacity: .9; }
.k-cover__t { gap: 4px; padding: 20px; }

.kb-h1 { font-size: 34px; line-height: 1.15; font-weight: 600; letter-spacing: -0.035em; text-wrap: balance; overflow-wrap: anywhere; }
.kb-edit { display: inline-flex; vertical-align: middle; margin-left: 10px; color: var(--muted); }
.kb-h1 a { display: inline-flex; align-items: center; }
.kb-h1 a:hover .kb-edit { color: var(--text); }

.kb-by { display: flex; flex-wrap: wrap; gap: 2px 8px; font-size: 17px; }
.kb-by__a a { color: var(--accent-text); }
.kb-by__a a:hover { text-decoration: underline; text-underline-offset: 3px; }
.kb-by__s { color: var(--muted); }
.kb-by__s a { color: var(--muted); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.kb-by__s a:hover { color: var(--text); }

.kb-rating { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font-size: 14px; color: var(--muted); }
.kb-rating[hidden] { display: none; }
.kb-rating__main { display: inline-flex; align-items: center; gap: 6px; color: var(--text); }
.kb-rating__main b { font-size: 16px; font-weight: 500; margin-right: -2px; }
.kb-rating__more { color: var(--muted); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.kb-rating__more:hover { color: var(--text); }

.kb-facts { display: flex; flex-wrap: wrap; font-size: 14px; color: var(--muted); }
.kb-facts > span + span::before, .kb-facts > span + .kb-list::before { content: "\00b7"; margin: 0 8px; }
.kb-facts > .kb-list:empty { display: none; }

.kb-act { padding: 0 16px; font-weight: 500; }
.kb-act--read { padding: 0 20px; }
.kb-act--icon { min-width: 44px; padding: 0 12px; }
.kb-act svg { flex: 0 0 auto; }
.kb-share__msg { font-size: 14px; font-weight: 400; color: var(--muted); }
.kb-share__msg:empty { display: none; }
.kb-banner-img:empty { display: none; }


/* 3. «ДОБАВИТЬ В СПИСОК» (super_lists)
   Теги модуля остались прежними. Здесь перекрашены кнопка и выпадающий список,
   стили модуля (super_lists.css) подключены раньше и перебиваются по специфичности.
   -------------------------------------------------------------------------- */
.kb-shelfbtn.watchlist_parent { position: relative; width: auto; }
.kb-shelfbtn .super__watchlist-menu { display: flex; margin: 0; }
.kb-shelfbtn .super__watchlist-select {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex-basis: auto;
	min-height: 44px; padding: 0 12px 0 16px; border: 1px solid var(--line); border-radius: var(--radius);
	background: transparent; color: var(--text); box-shadow: none;
	font-size: 16px; font-weight: 500; line-height: 1.2; cursor: pointer;
	transition: background-color 140ms ease, border-color 140ms ease;
}
.kb-shelfbtn .super__watchlist-select:hover { background: var(--hover); color: var(--text); box-shadow: none; }
.kb-shelfbtn .super__watchlist-select.watchlist_btn_success { background: var(--accent-soft); border-color: var(--ribbon); }
.kb-shelfbtn .super__watchlist-select i { display: none; }
.kb-shelfbtn .super__watchlist-select::before,
.kb-shelfbtn .super__watchlist-select::after {
	content: ""; flex: 0 0 auto; width: 18px; height: 18px; background: currentColor;
	-webkit-mask: var(--kb-ico) center / contain no-repeat; mask: var(--kb-ico) center / contain no-repeat;
}
.kb-shelfbtn .super__watchlist-select::before { --kb-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h12v18l-6-4-6 4z'/%3E%3C/svg%3E"); }
.kb-shelfbtn .super__watchlist-select::after { --kb-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); width: 16px; height: 16px; }

.kb-shelfbtn .dropdown-content {
	position: absolute; left: 0; top: calc(100% + 6px); z-index: 20; min-width: 0; width: 264px; padding: 6px;
	border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface2); box-shadow: var(--shadow);
	overflow: visible;
}
.kb-shelfbtn .dropdown-content.show_it { display: block; width: 264px; left: 0; border-radius: var(--radius-lg); opacity: 1; }
.kb-shelfbtn .dropdown-content li { min-height: 44px; margin: 0; color: var(--text); }
.kb-shelfbtn .dropdown-content li > a, .kb-shelfbtn .dropdown-content li > span {
	display: flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: var(--radius);
	font-size: 16px; line-height: 1.2; color: var(--text);
}
.kb-shelfbtn .dropdown-content li > a:hover { background: var(--hover); }
.kb-shelfbtn .dropdown-content li.dropdown-title {
	min-height: 0; padding: 10px 12px 6px; font-size: 14px; font-weight: 400; color: var(--muted);
}
.kb-shelfbtn .dropdown-content li.dropdown-title { cursor: default; }
.kb-shelfbtn .dropdown-content .watchlist_btn_success { color: var(--accent-text); }
.watchlist_parent.kb-shelfbtn .dropdown-content li.active a { color: var(--accent-text); }
.kb-shelfbtn .dropdown-content li.delete-watchlist { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); }
.watchlist_parent.kb-shelfbtn .dropdown-content li.delete-watchlist a { color: var(--muted); }


/* 4. ВКЛАДКИ-ЯКОРЯ
   -------------------------------------------------------------------------- */
.kb-tabs {
	display: flex; flex-wrap: nowrap; margin-top: -16px; border-bottom: 1px solid var(--border);
	overflow-x: auto; scrollbar-width: none;
}
.kb-tabs::-webkit-scrollbar { display: none; }
.kb-tabs a {
	flex: 0 0 auto; display: flex; align-items: center; gap: 6px; height: 44px; padding: 0 12px;
	border-radius: var(--radius) var(--radius) 0 0; color: var(--text); white-space: nowrap;
	transition: background-color 140ms ease;
}
.kb-tabs a:hover { background: var(--hover); }
.kb-tabs__n { font-size: 13px; color: var(--muted); }


/* 5. О КНИГЕ
   -------------------------------------------------------------------------- */
.kb-about { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 32px 48px; margin-top: -16px; }
.kb-about__text { grid-column: span 8; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.kb-meta { grid-column: span 4; align-self: start; display: flex; flex-direction: column; margin: 0; font-size: 15px; }
.kb-meta > div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.kb-meta dt { flex: 0 0 auto; color: var(--muted); }
.kb-meta dd { min-width: 0; margin: 0; text-align: right; overflow-wrap: anywhere; }
.kb-meta dd a { color: var(--text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.kb-meta dd a:hover { text-decoration-thickness: 2px; }
.kb-meta > div:has(> dd:empty) { display: none; }

.kb-about .ftext, .kb-read {
	max-width: 62ch; font-family: var(--font-read); font-size: 16px; line-height: 1.6; white-space: pre-line;
}
.kb-about .svert { padding: 3px 0; }
.kb-about .svert-link {
	display: inline-flex; align-items: center; min-height: 44px; color: var(--accent-text);
	text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.kb-about #player { margin-top: 8px; }


/* 6. СКАЧАТЬ И ЧИТАТЬ
   Иконка скачивания рисуется маской на ссылке из поля fb2/epub (её разметку задаёт
   attachment.tpl и include epub-demand-link.php). Префикс .kb-dl нужен, чтобы
   перебить общие правила .btn / .fdl-btn.
   -------------------------------------------------------------------------- */
.kb-dl { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px; }
.kb-dl__main { grid-column: span 7; display: flex; flex-direction: column; gap: 16px; }
.kb-dl__side { grid-column: span 5; display: flex; flex-direction: column; padding-top: 8px; padding-bottom: 8px; }
.kb-dl--solo .kb-dl__side { grid-column: 1 / -1; }

/* Какой формат крупный: переключает скрипт (data-main), по умолчанию FB2 */
.kb-dl[data-main="fb2"] .kb-fmt[data-fmt="epub"],
.kb-dl[data-main="fb2"] .kb-alt[data-fmt="fb2"],
.kb-dl[data-main="epub"] .kb-fmt[data-fmt="fb2"],
.kb-dl[data-main="epub"] .kb-alt[data-fmt="epub"] { display: none; }

.kb-fmt { display: flex; flex-direction: column; gap: 16px; flex: 1; }
.kb-fmt__t { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.kb-fmt__t h3 { font-size: 34px; line-height: 1; letter-spacing: -0.04em; }
.kb-fmt__t p { max-width: 44ch; color: var(--muted); }
.kb-fmt__tag { display: none; align-items: center; min-height: 28px; margin-bottom: 8px; padding: 0 10px; border-radius: var(--radius); background: var(--accent-soft); color: var(--accent-text); font-size: 14px; }
.kb-dl[data-auto] .kb-fmt__tag { display: inline-flex; }
.kb-fmt__act { margin-top: auto; }

.kb-dl a.btn, .kb-dl a.fdl-btn, .kb-dl .kb-fmt__act a, .kb-dl .kb-alt__act a {
	height: auto; line-height: 1.2; font-weight: 500; text-decoration: none; text-transform: capitalize;
}
.kb-dl .kb-fmt__act a {
	display: block; width: 100%; min-height: 52px; padding: 15px 16px; border: 0; border-radius: var(--radius);
	background: var(--accent); color: var(--on-accent); font-size: 17px; text-align: center;
	transition: opacity 140ms ease, transform 140ms var(--ease);
}
.kb-dl .kb-fmt__act a:hover { background: var(--accent); color: var(--on-accent); opacity: .9; }
.kb-dl .kb-fmt__act a::before {
	content: ""; display: inline-block; width: 20px; height: 20px; margin-right: 10px; vertical-align: -4px; background: currentColor;
	-webkit-mask: var(--kb-dl-ico) center / contain no-repeat; mask: var(--kb-dl-ico) center / contain no-repeat;
}
.kb-dl .kb-alt__act a {
	display: block; min-width: 120px; min-height: 44px; padding: 11px 12px; white-space: nowrap;
	border: 1px solid var(--line); border-radius: var(--radius); background: transparent; color: var(--text); font-size: 16px; text-align: center;
}
.kb-dl .kb-alt__act a:hover { background: var(--hover); color: var(--text); opacity: 1; }
.kb-dl .kb-alt__act a:not(.kb-alt__read)::before {
	content: ""; display: inline-block; width: 16px; height: 16px; margin-right: 8px; vertical-align: -3px; background: currentColor;
	-webkit-mask: var(--kb-dl-ico) center / contain no-repeat; mask: var(--kb-dl-ico) center / contain no-repeat;
}
.kb-dl .kb-alt__act a.kb-alt__read::before {
	content: ""; display: inline-block; width: 16px; height: 16px; margin-right: 8px; vertical-align: -3px; background: currentColor;
	-webkit-mask: var(--kb-read-ico) center / contain no-repeat; mask: var(--kb-read-ico) center / contain no-repeat;
}
.kb-dl, .kb-lit {
	--kb-dl-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12M7 10l5 5 5-5M5 21h14'/%3E%3C/svg%3E");
	--kb-read-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 5h7a3 3 0 0 1 3 3v12a2 2 0 0 0-2-2H2zM22 5h-7a3 3 0 0 0-3 3v12a2 2 0 0 1 2-2h8z'/%3E%3C/svg%3E");
}
.kb-fmt__act br, .kb-alt__act br { display: none; }

.kb-alt { display: flex; align-items: center; gap: 12px; min-height: 72px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.kb-alt__t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.kb-alt__t h3 { font-size: 17px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.3; }
.kb-alt__t span { font-size: 15px; color: var(--muted); }
.kb-alt__act { flex: 0 0 auto; }
.kb-dl__help { display: flex; flex-direction: column; gap: 6px; padding: 14px 0 10px; font-size: 15px; }
.kb-dl__help a { color: var(--accent-text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; align-self: flex-start; padding: 4px 0; }
.kb-dl__help a:hover { text-decoration-thickness: 2px; }


/* 7. СЕРИЯ
   Полка использует .k-shelf / .k-spine из knigi2.css. Цвет корешков идёт по кругу.
   -------------------------------------------------------------------------- */
.kb-series__body { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 28px 48px; align-items: end; }
.kb-series__body[hidden] { display: none; }
.kb-series__body .kb-shelf { grid-column: span 5; margin: 0; }
.kb-series__list { grid-column: span 7; margin: 0; display: flex; flex-direction: column; }
.kb-series__list li { display: flex; align-items: baseline; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--border); }
.kb-series__num { flex: 0 0 24px; color: var(--muted); }
.kb-series__list a, .kb-series__list li > span:not([class]) { flex: 1; min-width: 0; }
.kb-series__list a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.kb-series__list li.is-current > span:not([class]) { font-weight: 600; }
.kb-series__note { font-size: 14px; color: var(--muted); white-space: nowrap; }
.kb-series__legend { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); }
.kb-shelf li:nth-child(8n+1) .k-spine { --cover: var(--spine-1); }
.kb-shelf li:nth-child(8n+2) .k-spine { --cover: var(--spine-2); }
.kb-shelf li:nth-child(8n+3) .k-spine { --cover: var(--spine-3); }
.kb-shelf li:nth-child(8n+4) .k-spine { --cover: var(--spine-4); }
.kb-shelf li:nth-child(8n+5) .k-spine { --cover: var(--spine-5); }
.kb-shelf li:nth-child(8n+6) .k-spine { --cover: var(--spine-6); }
.kb-shelf li:nth-child(8n+7) .k-spine { --cover: var(--spine-7); }
.kb-shelf li:nth-child(8n+8) .k-spine { --cover: var(--spine-8); }
.kb-shelf .k-spine { color: var(--cloth-text); }


/* 8. ПОХОЖИЕ КНИГИ
   -------------------------------------------------------------------------- */
.kb-similar { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px 16px; }
.kb-rel .k-card__title { font-size: 14px; line-height: 1.3; }
.kb-rel .k-card__author { font-size: 13px; }
.kb-rel .k-cover__t { padding: 10px; font-size: 13px; line-height: 1.2; }


/* 9. ОТЗЫВЫ
   -------------------------------------------------------------------------- */
.kb-revtop { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px; }
.kb-revtop > .kb-rate { grid-column: 1 / -1; }
.kb-revtop > .kb-traits { grid-column: span 4; }
.kb-revtop > .kb-traits ~ .kb-rate { grid-column: span 8; }

.kb-rate { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.kb-rate h3 { font-size: 16px; font-weight: 500; letter-spacing: -0.01em; }
.kb-rate__btns { display: flex; flex-wrap: wrap; gap: 8px; }
.kb-rate .fr-likes { display: flex; flex-wrap: wrap; gap: 8px; }
.kb-rate .fr-count, .kb-rate .fr-votes { display: none; }
.kb-vote {
	display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px;
	border: 1px solid var(--line); border-radius: var(--radius); background: transparent; color: var(--text);
	font: inherit; font-weight: 400; cursor: pointer;
	transition: background-color 140ms ease, border-color 140ms ease, transform 140ms var(--ease);
}
.kb-vote:hover { background: var(--hover); }
.kb-vote:active { transform: translateY(1px); }
.kb-vote--up:hover { border-color: var(--success); }
.kb-vote--down:hover { border-color: var(--danger); }
.kb-vote .psc, .kb-vote .msc { display: none; }
.kb-n { color: var(--muted); font-size: 14px; }
.kb-n:empty { display: none; }

.kb-rvbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.kb-rvbar__n { color: var(--muted); }
.kb-rvhint { margin-top: -8px; font-size: 15px; color: var(--muted); max-width: 62ch; }
.kb-rvlist { display: flex; flex-direction: column; margin: 0; }

/* Форма отзыва (addcomments.tpl). Показ и скрытие делает libs.js по .add-comm-btn */
.kb-addform { padding: 24px; }
.kb-addform__t { margin-bottom: 16px; font-size: 16px; font-weight: 500; letter-spacing: -0.01em; }
.kb-addform .ac-inputs { flex-wrap: wrap; }
.kb-addform .ac-inputs input { flex: 1 1 200px; }
.kb-addform .ac-protect { margin-bottom: 12px; }
.kb-addform .form-item { margin-bottom: 12px; }
.kb-addform .form-item label { display: block; margin-bottom: 6px; font-size: 15px; }
.kb-addform .ac-submit { display: flex; }

/* Отзыв (comments.tpl). Базовые .comm-* лежат в knigi2.css, здесь только карточка на странице книги */
.kb-reviews .comm-item {
	margin: 0 0 12px; padding: 16px 20px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface);
}
.kb-reviews .comm-two { margin: 6px 0 4px; font-size: 16px; line-height: 1.55; overflow-wrap: anywhere; }
.kb-reviews .comm-two p { margin-bottom: 8px; }
.kb-reviews .comm-two blockquote, .kb-reviews .comm-two .quote {
	margin: 8px 0; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius);
	background: var(--surface2); color: var(--muted);
}
.kb-rv__group { padding: 0 8px; border-radius: var(--radius); background: var(--chip); color: var(--text); font-size: 13px; line-height: 20px; }
.kb-rv .reply { gap: 6px; padding: 0 8px 0 0; }
.kb-rv .comm-rate3 { gap: 8px; }
.kb-rv .comm-rate3 a { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; min-height: 32px; border-radius: var(--radius); }
.kb-rv .comm-rate3 a:hover { background: var(--hover); }
.kb-rv .comm-letter { background: var(--spine-5); }
.comments-tree-list .kb-rv { margin-top: 8px; background: var(--surface2); }


/* 10. РЕКЛАМА
   A1 под скачиванием (баннер {banner_full_download}), A2 между отзывами, A4 «Лента» в конце.
   Высоту держит .ad-slot__body (--ad-h). Пустой A1 (баннер выключен) скрывается целиком.
   -------------------------------------------------------------------------- */
.kb-ad:has(> .ad-slot__body:empty) { display: none; }
.kb-ad--a1 { --ad-h: 200px; }
.kb-ad--a2 { --ad-h: 250px; }
.kb-ad--a4 { --ad-h: 260px; }


/* 11. БЛОКИ БУДУЩИХ МОДУЛЕЙ (разметка в fullstory.tpl закомментирована)
   -------------------------------------------------------------------------- */
/* Подписка на серию */
.kb-follow[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--ribbon); }

/* Отправка на почту или Kindle */
.kb-send { display: flex; flex-direction: column; gap: 8px; padding-top: 16px; border-top: 1px solid var(--border); }
.kb-send__open { align-self: flex-start; }
.kb-send__form { display: flex; flex-direction: column; gap: 6px; }
.kb-send__form[hidden] { display: none; }
.kb-send__form label { font-size: 15px; }
.kb-send__row { display: flex; flex-wrap: wrap; gap: 8px; }
.kb-send__row input { flex: 1 1 200px; min-width: 0; }
.kb-send__msg { min-height: 1.5em; font-size: 15px; color: var(--danger); }
.kb-send__msg.is-ok { color: var(--success); }

/* Метки читателей «хвалят / ругают» */
.kb-traits { display: flex; flex-direction: column; gap: 16px; }
.kb-traits__g { display: flex; flex-direction: column; gap: 10px; }
.kb-traits__g h3 { font-size: 16px; font-weight: 500; letter-spacing: -0.01em; }
.kb-traits__g ul { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.kb-traits__g li { display: flex; flex-direction: column; gap: 5px; font-size: 15px; }
.kb-traits__row { display: flex; justify-content: space-between; gap: 12px; }
.kb-traits__row > span:last-child { color: var(--muted); }
.kb-traits__bar { height: 3px; background: var(--chip); }
.kb-traits__bar > span { display: block; height: 100%; background: var(--success); }
.kb-traits__g--neg .kb-traits__bar > span { background: var(--danger); }

/* Цитаты: пустое состояние */
.kb-empty { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.kb-empty__ico { display: flex; flex: 0 0 auto; color: var(--muted); }
.kb-empty__t { flex: 1 1 240px; display: flex; flex-direction: column; min-width: 0; }
.kb-empty__t > span:first-child { font-weight: 500; }
.kb-empty__t > span:last-child { color: var(--muted); font-size: 15px; }


/* 12. ПЛАНШЕТ И ТЕЛЕФОН
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
	.kb-similar { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 719px) {
	.kb { gap: 48px; }
	.kb h2 { font-size: 24px; }
	.kb-box { padding: 16px; }

	.kb-hero { grid-template-columns: 108px minmax(0, 1fr); column-gap: 16px; }
	.kb-hero__cover { grid-row: auto; width: 108px; }
	.kb-cover__name { font-size: 13px; }
	.kb-cover__by { font-size: 11px; margin-top: 6px; }
	.k-cover__t { padding: 10px; }
	.kb-h1 { font-size: 24px; }
	.kb-by { font-size: 15px; }
	.kb-actions { grid-column: 1 / -1; gap: 8px; margin-top: 16px; }
	.kb-act { min-height: 48px; }
	.kb-act--read, .kb-act--dl { flex: 1 1 100%; }
	.kb-act--icon { flex: 0 0 48px; padding: 0; }
	.kb-shelfbtn.watchlist_parent, .kb-mybooks.kb-act { flex: 1 1 0; min-width: 0; }
	.kb-shelfbtn .super__watchlist-menu, .kb-shelfbtn .super__watchlist-select { width: 100%; min-height: 48px; }
	.kb-shelfbtn .dropdown-content, .kb-shelfbtn .dropdown-content.show_it { width: 100%; }
	.kb-follow.kb-act { flex: 0 0 48px; padding: 0; }
	.kb-follow.kb-act span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

	.kb-about { grid-template-columns: minmax(0, 1fr); gap: 32px; }
	.kb-about__text, .kb-meta { grid-column: 1; }
	.kb-about .ftext, .kb-read { font-size: 16px; }

	.kb-dl { grid-template-columns: minmax(0, 1fr); }
	.kb-dl__main, .kb-dl__side { grid-column: 1; }
	.kb-dl__side { padding-left: 16px; padding-right: 16px; }
	.kb-dl .kb-alt__act a { min-width: 112px; }
	.kb-alt { min-height: 68px; }

	.kb-series__body { grid-template-columns: minmax(0, 1fr); gap: 20px; }
	.kb-series__body .kb-shelf, .kb-series__list { grid-column: 1; }
	.kb-series__body .kb-shelf { max-width: 100%; }

	.kb-similar { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; }

	.kb-revtop { grid-template-columns: minmax(0, 1fr); }
	.kb-revtop > .kb-traits, .kb-revtop > .kb-rate, .kb-revtop > .kb-traits ~ .kb-rate { grid-column: 1; }
	.kb-rate .fr-likes { width: 100%; }
	.kb-rate .kb-vote { flex: 1 1 140px; justify-content: center; }
	.kb-reviews .comm-item { padding: 14px 14px; gap: 12px; }
	.kb-addform { padding: 16px; }

	.kb-ad--a1 { --ad-h: 250px; }
}

@media (prefers-reduced-motion: reduce) {
	.kb-vote:active { transform: none; }
}

/* Knigi Tags: дописать в конец templates/knigi2/style/k-book.css (блок .kb-traits там уже есть). */
.kb-traits__note { margin: 0; color: var(--muted); font-size: 14px; }

.kb-tagpick { display: flex; flex-direction: column; gap: 12px; margin: 0 0 16px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); }
.kb-tagpick legend { padding: 0 6px; font-size: 16px; font-weight: 500; color: var(--text); }
.kb-tagpick legend span { color: var(--muted); font-weight: 400; font-size: 14px; }
.kb-tagpick__g { display: flex; flex-direction: column; gap: 8px; }
.kb-tagpick__h { font-size: 14px; color: var(--muted); }
.kb-tagpick__list { display: flex; flex-wrap: wrap; gap: 8px; }
.kb-tagpick__msg { margin: 0; min-height: 1.4em; color: var(--muted); font-size: 14px; }
.kb-tagpick__msg.is-error { color: var(--danger); }

.kb-chip {
	display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px;
	border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--text);
	font: inherit; font-size: 15px; cursor: pointer;
	transition: background-color .14s ease, border-color .14s ease;
}
.kb-chip:hover { background: var(--hover); }
.kb-chip:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.kb-chip[aria-pressed="true"] { border-color: var(--success); background: var(--chip); }
.kb-tagpick__g--neg .kb-chip[aria-pressed="true"] { border-color: var(--danger); }
.kb-chip[aria-busy="true"] { opacity: .6; cursor: progress; }

/* Knigi Tags: эмодзи меток. Fluent Emoji 3D (Microsoft, лицензия MIT), спрайт images/kt-emoji.webp: 12 картинок 48×48 сверху вниз.
   Номер картинки --e задаётся по ключу метки. У новой метки без номера остаётся пустое место (var(--e, 99) за краем спрайта). */
[data-kt-tag="plot"], [data-tag="plot"] { --e: 0; }
[data-kt-tag="heroes"], [data-tag="heroes"] { --e: 1; }
[data-kt-tag="language"], [data-tag="language"] { --e: 2; }
[data-kt-tag="ending"], [data-tag="ending"] { --e: 3; }
[data-kt-tag="atmosphere"], [data-tag="atmosphere"] { --e: 4; }
[data-kt-tag="humor"], [data-tag="humor"] { --e: 5; }
[data-kt-tag="idea"], [data-tag="idea"] { --e: 6; }
[data-kt-tag="slow"], [data-tag="slow"] { --e: 7; }
[data-kt-tag="typos"], [data-tag="typos"] { --e: 8; }
[data-kt-tag="weak_end"], [data-tag="weak_end"] { --e: 9; }
[data-kt-tag="boring"], [data-tag="boring"] { --e: 10; }
[data-kt-tag="illogical"], [data-tag="illogical"] { --e: 11; }

.kb-chip[data-kt-tag]::before,
.kb-traits li[data-tag] .kb-traits__row > span:first-child::before {
	content: ""; flex: none; width: var(--es); height: var(--es);
	background: url(../images/kt-emoji.webp?v=1) no-repeat 0 calc(var(--e, 99) * var(--es) * -1) / var(--es) auto;
}
.kb-chip[data-kt-tag] {
	--es: 24px; gap: 8px; padding: 0 16px 0 10px;
	transition: background-color .14s ease, border-color .14s ease, transform .14s ease;
}
.kb-chip[data-kt-tag]::before { transition: transform .2s cubic-bezier(.3, 1.6, .5, 1); }
.kb-chip[data-kt-tag]:hover::before { transform: scale(1.12) rotate(-6deg); }
.kb-chip[data-kt-tag]:active { transform: scale(.97); }
.kb-chip[data-kt-tag][aria-pressed="true"] {
	background: var(--chip); background: color-mix(in srgb, var(--success) 14%, transparent);
}
.kb-tagpick__g--neg .kb-chip[data-kt-tag][aria-pressed="true"] {
	background: var(--chip); background: color-mix(in srgb, var(--danger) 14%, transparent);
}
.kb-chip[data-kt-tag][aria-pressed="true"]::before { animation: kt-pop .32s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes kt-pop { 0% { transform: scale(.6); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }

.kb-traits li[data-tag] { --es: 20px; }
.kb-traits li[data-tag] .kb-traits__row > span:first-child { display: inline-flex; align-items: center; gap: 8px; }

@media (prefers-reduced-motion: reduce) {
	.kb-chip[data-kt-tag], .kb-chip[data-kt-tag]::before { transition: none; }
	.kb-chip[data-kt-tag]:hover::before, .kb-chip[data-kt-tag]:active { transform: none; }
	.kb-chip[data-kt-tag][aria-pressed="true"]::before { animation: none; }
}

/* Админский блок LitRes ([group=1] в fullstory): у книг без LitRes litres.tpl пустой, рамку не показываем */
.kb-admin-litres:not(:has(.kb-dl__side > *)) { display: none; }

/* Колонка справа от «О книге»: таблица данных + «В списках читателей» (super_lists [lists_html]) */
.kb-aboutside { grid-column: span 4; display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.kb-aboutside > .kb-meta { grid-column: auto; }
.kb-inlists { padding: 16px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.kb-inlists__h { margin: 0 0 12px; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.kb-inlists .watchlist-stats { display: flex; flex-direction: column; gap: 10px; }
.kb-inlists .watchlist-stats__item { display: grid; grid-template-columns: 92px 1fr 32px; align-items: center; gap: 10px; font-size: 14px; }
.kb-inlists .watchlist-stats__type { color: var(--text); }
.kb-inlists .watchlist-stats__bar { height: 6px; border-radius: 3px; background: var(--chip); overflow: hidden; }
.kb-inlists .watchlist-stats__bar-fill { height: 100%; border-radius: 3px; background: var(--ribbon); }
.kb-inlists .watchlist-stats__percent { color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 1023px) { .kb-aboutside { grid-column: 1; } }