/* =========================================================
   DarkRomans — FB2 Reader
   Стилизация под карточку книги: бордовый/розовый акцент,
   мягкие тени, скруглённые формы, светлая и тёмная темы.
   ========================================================= */

:root {
	/* Светлая тема */
	--dr-bg:           #fdf5f7;
	--dr-bg-soft:      #fbeef2;
	--dr-card:         #ffffff;
	--dr-card-elev:    #ffffff;
	--dr-border:       #f3dde4;
	--dr-border-soft:  #faeaef;
	--dr-text:         #2a1a22;
	--dr-text-soft:    #6b5560;
	--dr-text-mute:    #9c8a92;
	--dr-accent:       #a01548;
	--dr-accent-hov:   #8b1240;
	--dr-accent-soft:  #fce4ec;
	--dr-accent-text:  #ffffff;
	--dr-quote-bg:     #fdf1f5;
	--dr-quote-bar:    #c2185b;
	--dr-note:         #c2185b;
	--dr-shadow-sm:    0 1px 2px rgba(160,21,72,.06), 0 1px 3px rgba(0,0,0,.04);
	--dr-shadow-md:    0 4px 16px rgba(160,21,72,.08), 0 2px 6px rgba(0,0,0,.04);
	--dr-shadow-lg:    0 12px 40px rgba(160,21,72,.12), 0 4px 12px rgba(0,0,0,.06);
	--dr-radius-sm:    10px;
	--dr-radius-md:    14px;
	--dr-radius-lg:    20px;
	--dr-radius-pill:  999px;
}

[data-theme="dark"] {
	--dr-bg:           #140a11;
	--dr-bg-soft:      #1c1018;
	--dr-card:         #1f1219;
	--dr-card-elev:    #261620;
	--dr-border:       #3a1f2c;
	--dr-border-soft:  #2b1721;
	--dr-text:         #f1e3eb;
	--dr-text-soft:    #b89aa6;
	--dr-text-mute:    #8a6f7b;
	--dr-accent:       #ec4899;
	--dr-accent-hov:   #f06ba9;
	--dr-accent-soft:  #3a1525;
	--dr-accent-text:  #ffffff;
	--dr-quote-bg:     #2a1320;
	--dr-quote-bar:    #ec4899;
	--dr-note:         #f06ba9;
	--dr-shadow-sm:    0 1px 2px rgba(0,0,0,.4);
	--dr-shadow-md:    0 6px 20px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.3);
	--dr-shadow-lg:    0 16px 50px rgba(0,0,0,.55), 0 6px 16px rgba(0,0,0,.35);
}

* { box-sizing: border-box; margin: 0; padding: 0; outline: none; }

html, body { min-height: 100%; }

body.fb2-page {
	background: var(--dr-bg);
	color: var(--dr-text);
	font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, Arial, sans-serif;
	font-size: 15px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	opacity: 0;
	transition: opacity .25s ease, background-color .3s ease, color .3s ease;
}

.wrap {
	max-width: 1200px;
	width: 100%;
	margin: 32px auto;
	padding: 0 20px;
}

/* ---------- Speedbar (хлебные крошки) ---------- */
.speedbar {
	margin: 0 0 20px;
	font-size: 14px;
	color: var(--dr-text-soft);
	padding: 0 4px;
}
.speedbar a {
	color: var(--dr-accent);
	text-decoration: none;
	font-weight: 500;
	transition: color .2s ease;
}
.speedbar a:hover { color: var(--dr-accent-hov); }

/* ---------- Карточка читалки ---------- */
.fb2-area {
	background: var(--dr-card);
	border: 1px solid var(--dr-border-soft);
	border-radius: var(--dr-radius-lg);
	box-shadow: var(--dr-shadow-md);
	padding: 28px clamp(20px, 4vw, 56px) 40px;
	position: relative;
	transition: background-color .3s ease, border-color .3s ease, box-shadow .3s ease;
}

/* ---------- Тулбар ---------- */
.fb2-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-bottom: 18px;
	margin-bottom: 22px;
	border-bottom: 1px solid var(--dr-border-soft);
	flex-wrap: wrap;
}
.fb2-toolbar__left,
.fb2-toolbar__right {
	display: flex;
	align-items: center;
	gap: 10px;
	position: relative;
}

.fb2-page-indicator {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	color: var(--dr-text-soft);
	background: var(--dr-bg-soft);
	border: 1px solid var(--dr-border-soft);
	padding: 8px 14px;
	border-radius: var(--dr-radius-pill);
	font-weight: 500;
}
.fb2-page-indicator b {
	color: var(--dr-accent);
	font-weight: 700;
}
.fb2-page-indicator .ico { width: 16px; height: 16px; color: var(--dr-accent); }

/* ---------- Кнопки ---------- */
.fb2-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 600;
	font-family: inherit;
	padding: 9px 16px;
	border-radius: var(--dr-radius-pill);
	border: 1px solid transparent;
	cursor: pointer;
	text-decoration: none !important;
	transition: all .2s ease;
	user-select: none;
	line-height: 1;
}
.fb2-btn .ico { width: 16px; height: 16px; }
.fb2-btn--ghost {
	background: var(--dr-bg-soft);
	color: var(--dr-accent);
	border-color: var(--dr-border);
}
.fb2-btn--ghost:hover {
	background: var(--dr-accent-soft);
	border-color: var(--dr-accent);
	transform: translateY(-1px);
	box-shadow: var(--dr-shadow-sm);
}
.fb2-btn--primary {
	background: var(--dr-accent);
	color: var(--dr-accent-text);
}
.fb2-btn--primary:hover {
	background: var(--dr-accent-hov);
	transform: translateY(-1px);
	box-shadow: var(--dr-shadow-md);
}

/* ---------- Панель настроек ---------- */
.fb2-cfg {
	position: relative;
	display: inline-flex;
	align-items: center;
}
.fb2-cfg-wrap {
	position: absolute;
	right: 0;
	top: calc(100% + 10px);
	z-index: 50;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity .22s ease, transform .22s ease, visibility .22s;
	pointer-events: none;
}
.fb2-cfg.js-open .fb2-cfg-wrap {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	pointer-events: auto;
}

.fb2-cfg-ul {
	list-style: none;
	background: var(--dr-card-elev);
	border: 1px solid var(--dr-border);
	border-radius: 18px;
	box-shadow: var(--dr-shadow-lg);
	padding: 10px;
	width: 340px;
	max-width: calc(100vw - 40px);
	color: var(--dr-text);
	backdrop-filter: blur(8px);
}
.fb2-cfg-ul li {
	padding: 14px 16px;
	border: 0;
	border-radius: 12px;
	font-size: 14px;
	transition: background-color .2s ease;
}
.fb2-cfg-ul li + li { margin-top: 2px; }
.fb2-cfg-ul li:hover { background: var(--dr-bg-soft); }
.fb2-cfg-ul li:last-child:hover { background: transparent; }

.fb2-cfg-label {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-weight: 600;
	color: var(--dr-text);
	margin-bottom: 12px;
	font-size: 13px;
	letter-spacing: .01em;
}
.fb2-cfg-label .ico {
	width: 16px;
	height: 16px;
	color: var(--dr-accent);
	background: var(--dr-accent-soft);
	border-radius: 8px;
	padding: 5px;
	box-sizing: content-box;
}

/* ---------- Select шрифта ---------- */
#fb2-book-font {
	width: 100%;
	display: block;
	padding: 9px 36px 9px 12px;
	font-size: 14px;
	font-family: inherit;
	color: var(--dr-text);
	background: var(--dr-bg-soft);
	border: 1px solid var(--dr-border);
	border-radius: var(--dr-radius-sm);
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a01548' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
	background-repeat: no-repeat;
	background-position: right 12px center;
	transition: border-color .2s, background-color .2s;
}
[data-theme="dark"] #fb2-book-font {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ec4899' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
}
#fb2-book-font:hover,
#fb2-book-font:focus { border-color: var(--dr-accent); }

/* ---------- Сброс настроек ---------- */
#fb2-book-reset {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 16px;
	padding: 8px 14px;
	color: var(--dr-accent);
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	border-radius: var(--dr-radius-pill);
	background: var(--dr-accent-soft);
	transition: all .2s ease;
}
#fb2-book-reset .ico { width: 13px; height: 13px; }
#fb2-book-reset:hover {
	color: #fff;
	background: var(--dr-accent);
}

/* ---------- Range-слайдеры (новый дизайн) ---------- */
._range {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 6px;
	background: var(--dr-border);
	border-radius: var(--dr-radius-pill);
	cursor: pointer;
	margin: 6px 0 2px;
	outline: 0;
	transition: background .2s;
}
._range::-webkit-slider-runnable-track {
	height: 6px;
	border-radius: var(--dr-radius-pill);
	background: transparent;
}
._range::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 18px;
	height: 18px;
	margin-top: -6px;
	border-radius: 50%;
	background: var(--dr-accent);
	border: 3px solid var(--dr-card);
	box-shadow: 0 2px 8px rgba(160,21,72,.35);
	cursor: pointer;
	transition: transform .15s, box-shadow .15s, background .2s;
}
._range::-webkit-slider-thumb:hover { transform: scale(1.12); }
._range::-webkit-slider-thumb:active { background: var(--dr-accent-hov); }
[data-theme="dark"] ._range::-webkit-slider-thumb {
	border-color: var(--dr-card-elev);
	box-shadow: 0 2px 8px rgba(236,72,153,.45);
}

._range::-moz-range-track {
	height: 6px;
	background: var(--dr-border);
	border-radius: var(--dr-radius-pill);
	border: 0;
}
._range::-moz-range-progress {
	height: 6px;
	background: var(--dr-accent);
	border-radius: var(--dr-radius-pill);
}
._range::-moz-range-thumb {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--dr-accent);
	border: 3px solid var(--dr-card);
	box-shadow: 0 2px 8px rgba(160,21,72,.35);
	cursor: pointer;
}
[data-theme="dark"] ._range::-moz-range-thumb { border-color: var(--dr-card-elev); }

/* Прогресс заливается через JS актуальным акцентным цветом темы */

/* ---------- Контент книги ---------- */
.fb2-book {
	margin: 0 auto;
	width: 100%;
	max-width: 760px;
	font-size: 17px;
	line-height: 1.75;
	color: var(--dr-text);
	font-family: Georgia, "Times New Roman", serif;
	padding: 16px 0 24px;
}
.fb2-book p { margin: 0 0 1em; text-indent: 1.5em; }
.fb2-book p:first-child { text-indent: 0; }

.fb2-book .title,
.fb2-book h1, .fb2-book h2, .fb2-book h3 {
	font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif;
	font-weight: 700;
	color: var(--dr-text);
	line-height: 1.25;
	margin: 1.4em 0 .6em;
	text-indent: 0;
}
.fb2-book .title { font-size: 22px; margin: .2em 0 1em; }
.fb2-book h1 { font-size: 24px; }
.fb2-book h2 { font-size: 20px; color: var(--dr-accent); }
.fb2-book h3 { font-size: 18px; }

.fb2-book em, .fb2-book i { font-style: italic; }
.fb2-book strong, .fb2-book b { font-weight: 700; }

.fb2-book sup {
	color: var(--dr-note);
	vertical-align: super;
	font-size: 12px;
	font-weight: 600;
}
.fb2-book sup a { color: var(--dr-note); text-decoration: none; }
.fb2-book sup a:hover { text-decoration: underline; }

/* Цитата */
.fb2-book .quote,
.fb2-book blockquote {
	background: var(--dr-quote-bg);
	border-left: 3px solid var(--dr-quote-bar);
	border-radius: 0 var(--dr-radius-sm) var(--dr-radius-sm) 0;
	font-style: italic;
	margin: 1em 0;
	padding: 14px 18px;
	color: var(--dr-text);
}

/* Сноски */
.book-notes {
	margin-top: 24px;
	padding: 16px 18px;
	font-size: 13px;
	line-height: 1.55;
	font-style: italic;
	background: var(--dr-bg-soft);
	border-left: 3px solid var(--dr-note);
	border-radius: 0 var(--dr-radius-sm) var(--dr-radius-sm) 0;
	color: var(--dr-text-soft);
}
.book-notes span { color: var(--dr-note); font-weight: 700; font-style: normal; margin-right: 4px; }

/* ---------- Пагинация ---------- */
.navigation { margin: 24px 0 8px; }
.pages {
	text-align: center;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
}
.pages a,
.pages span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 14px;
	font-size: 14px;
	font-weight: 600;
	font-family: inherit;
	border-radius: var(--dr-radius-pill);
	text-decoration: none !important;
	transition: all .2s ease;
	line-height: 1;
}
.pages a {
	background: var(--dr-card);
	color: var(--dr-text) !important;
	border: 1px solid var(--dr-border);
	box-shadow: var(--dr-shadow-sm);
}
.pages a:hover {
	background: var(--dr-accent-soft);
	border-color: var(--dr-accent);
	color: var(--dr-accent) !important;
	transform: translateY(-1px);
	box-shadow: var(--dr-shadow-md);
}
.pages span {
	background: var(--dr-accent);
	color: #fff;
	border: 1px solid var(--dr-accent);
	box-shadow: 0 4px 14px rgba(160,21,72,.25);
}
[data-theme="dark"] .pages span { box-shadow: 0 4px 16px rgba(236,72,153,.35); }

.pages .nav_ext {
	background: transparent;
	color: var(--dr-text-mute);
	border: 0;
	box-shadow: none;
	min-width: auto;
	padding: 0 6px;
}

/* ---------- Кнопка «наверх» ---------- */
.fb2-scroll-top {
	position: fixed;
	right: 24px;
	bottom: 24px;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--dr-accent);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 8px 24px rgba(160,21,72,.35);
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity .25s, transform .25s, visibility .25s, background-color .2s;
	z-index: 100;
	text-decoration: none;
}
.fb2-scroll-top svg { width: 22px; height: 22px; }
.fb2-scroll-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.fb2-scroll-top:hover {
	background: var(--dr-accent-hov);
	transform: translateY(-2px);
}
[data-theme="dark"] .fb2-scroll-top { box-shadow: 0 8px 24px rgba(236,72,153,.4); }

/* ---------- Сноска/ссылки внутри книги ---------- */
.fb2-book a {
	color: var(--dr-accent);
	text-decoration: none;
	border-bottom: 1px dashed var(--dr-accent);
	transition: color .2s, border-color .2s;
}
.fb2-book a:hover { color: var(--dr-accent-hov); border-color: var(--dr-accent-hov); }

/* ---------- Выделение текста ---------- */
::selection { background: var(--dr-accent); color: #fff; }

/* ---------- Адаптив ---------- */
@media (max-width: 720px) {
	.wrap { margin: 16px auto; padding: 0 12px; }
	.fb2-area {
		padding: 18px 16px 28px;
		border-radius: var(--dr-radius-md);
	}
	.fb2-toolbar {
		padding-bottom: 14px;
		margin-bottom: 16px;
	}
	.fb2-book { font-size: 16px; padding: 8px 0 16px; }
	.fb2-cfg-ul { width: calc(100vw - 32px); }
	.pages a, .pages span { min-width: 36px; height: 36px; padding: 0 10px; font-size: 13px; }
	.fb2-page-indicator { font-size: 13px; padding: 7px 12px; }
	.fb2-btn { font-size: 13px; padding: 8px 14px; }
	.fb2-scroll-top { right: 14px; bottom: 14px; width: 44px; height: 44px; }
}