/* РПСЦ — Электронная библиотека: просмотрщик */

.rpsc-book { width: 100%; }
.rpsc-book-head { max-width: 60rem; margin: 0 auto 1rem; }
.rpsc-book-title { margin: 0 0 .35em; line-height: 1.15; }
.rpsc-book-meta { display: flex; flex-wrap: wrap; gap: .4em 1.1em; color: #6a6258; font-size: .95rem; }
.rpsc-book-meta a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.rpsc-book-annot { max-width: 50rem; margin: 1.6rem auto 0; }

/* ---- reader shell ---- */
.rpsc-reader {
	--accent: #7c2d2d;
	--bar: #efe9dd;
	--bar-line: #ddd3c0;
	--ink: #3a342b;
	--stage: #36332e;
	position: relative;
	display: flex;
	flex-direction: column;
	height: min(82vh, 1100px);
	min-height: 460px;
	border: 1px solid var(--bar-line);
	border-radius: 12px;
	overflow: hidden;
	background: var(--bar);
	box-shadow: 0 10px 34px rgba(0,0,0,.12);
	outline: none;
}
.rpsc-reader:fullscreen { height: 100vh; border-radius: 0; border: none; }
.rpsc-reader:-webkit-full-screen { height: 100vh; border-radius: 0; }

/* ---- toolbar ---- */
.rpsc-toolbar {
	display: flex; align-items: center; justify-content: space-between;
	gap: .5rem; padding: .45rem .6rem;
	background: var(--bar); border-bottom: 1px solid var(--bar-line);
	flex-wrap: wrap;
}
.rpsc-tb-group { display: flex; align-items: center; gap: .25rem; }
.rpsc-tb-center { flex: 1 1 auto; justify-content: center; }

.rpsc-tb-btn {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 36px; height: 36px; padding: 0 .5rem;
	border: 1px solid transparent; border-radius: 8px;
	background: transparent; color: var(--ink);
	font-size: 18px; line-height: 1; cursor: pointer; text-decoration: none;
	transition: background .15s, border-color .15s, opacity .15s;
}
.rpsc-tb-btn:hover { background: rgba(124,45,45,.10); border-color: rgba(124,45,45,.25); }
.rpsc-tb-btn:disabled { opacity: .3; cursor: default; }
.rpsc-tb-btn[aria-pressed="true"], .rpsc-tb-btn[aria-expanded="true"] { background: var(--accent); color: #fff; }
.rpsc-tb-catalog { font-size: 20px; }
.rpsc-act-dl { color: var(--accent); }

.rpsc-pagebox { display: inline-flex; align-items: center; gap: .35rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.rpsc-page-input {
	width: 3.4em; height: 34px; text-align: center;
	border: 1px solid var(--bar-line); border-radius: 7px; background: #fff;
	font-size: 15px; padding: 0 .2em;
}
.rpsc-page-total { color: #8a8170; }
.rpsc-page-sep { color: #b6ac98; }

/* ---- settings menu ---- */
.rpsc-settings { position: relative; display: inline-flex; }
.rpsc-menu {
	position: absolute; top: calc(100% + 8px); right: 0; z-index: 30;
	min-width: 232px; background: #fff; border: 1px solid var(--bar-line);
	border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.2); padding: 6px;
}
.rpsc-menu-item {
	display: flex; align-items: center; gap: .6rem; width: 100%;
	padding: .6rem .7rem; border: none; background: transparent; border-radius: 7px;
	font-size: 15px; color: var(--ink); cursor: pointer; text-align: left;
}
.rpsc-menu-item:hover { background: rgba(124,45,45,.08); }
.rpsc-menu-item.is-active { background: rgba(124,45,45,.13); color: var(--accent); font-weight: 600; }
.rpsc-mi-ico { font-size: 17px; width: 22px; text-align: center; flex: 0 0 22px; }

/* ---- body ---- */
/* position:relative — выезжающая панель миниатюр на мобильных от тела, не перекрывает тулбар. */
.rpsc-body { flex: 1 1 auto; display: flex; min-height: 0; position: relative; }

/* ---- thumbnails: две колонки ---- */
.rpsc-thumbs {
	width: 248px; flex: 0 0 248px; overflow-y: auto; overflow-x: hidden;
	background: #2d2a26; padding: .55rem; scrollbar-width: thin;
	display: flex; flex-wrap: wrap; align-content: flex-start; gap: .55rem;
}
.rpsc-thumb {
	position: relative; flex: 0 0 calc(50% - .28rem); width: calc(50% - .28rem);
	padding: 0; cursor: pointer; line-height: 0; overflow: hidden;
	border: 2px solid transparent; border-radius: 6px; background: #1f1d1a;
}
.rpsc-thumb img { width: 100%; height: auto; display: block; min-height: 40px; background: #555; }
.rpsc-thumb-num {
	position: absolute; right: 4px; bottom: 4px; line-height: 1;
	font-size: 11px; color: #fff; background: rgba(0,0,0,.6);
	padding: 1px 5px; border-radius: 10px;
}
.rpsc-thumb:hover { border-color: #b98; }
.rpsc-thumb.is-active { border-color: #e7b96b; }

/* ---- stage + прокручиваемый вьюпорт ---- */
.rpsc-stage { position: relative; flex: 1 1 auto; display: flex; min-width: 0; background: var(--stage); }
.rpsc-viewport {
	position: relative; flex: 1 1 auto; min-width: 0;
	overflow: auto; display: flex;
	touch-action: pan-x pan-y;            /* нативный скролл 1 пальцем; pinch обрабатываем сами */
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
}
.rpsc-reader.is-zoomed .rpsc-viewport { cursor: grab; }
.rpsc-reader.is-dragging .rpsc-viewport { cursor: grabbing; }
.rpsc-canvas { margin: auto; line-height: 0; }
.rpsc-page-img {
	display: block; background: #fff; user-select: none; -webkit-user-drag: none;
	box-shadow: 0 4px 22px rgba(0,0,0,.45);
}

/* edge nav */
.rpsc-edge {
	position: absolute; top: 0; bottom: 0; width: 64px; z-index: 4;
	display: flex; align-items: center; justify-content: center;
	border: none; background: transparent; color: #fff; cursor: pointer;
	font-size: 40px; opacity: 0; transition: opacity .15s, background .15s;
	text-shadow: 0 1px 6px rgba(0,0,0,.6);
}
.rpsc-edge-prev { left: 0; }
.rpsc-edge-next { right: 0; }
.rpsc-stage:hover .rpsc-edge { opacity: .6; }
.rpsc-edge:hover { opacity: 1; background: linear-gradient(90deg, rgba(0,0,0,.22), transparent); }
.rpsc-edge-next:hover { background: linear-gradient(270deg, rgba(0,0,0,.22), transparent); }
.rpsc-edge:disabled { opacity: 0 !important; cursor: default; }

/* loader */
.rpsc-loader {
	position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center;
	background: rgba(40,38,34,.35); pointer-events: none;
}
.rpsc-spin {
	width: 42px; height: 42px; border-radius: 50%;
	border: 4px solid rgba(255,255,255,.25); border-top-color: #fff;
	animation: rpsc-spin 0.8s linear infinite;
}
@keyframes rpsc-spin { to { transform: rotate(360deg); } }

/* notices */
.rpsc-notice { padding: 1.4rem; border-radius: 10px; background: #f3efe7; color: #4a4337; text-align: center; }
.rpsc-notice-error { background: #f7e7e7; color: #7c2d2d; }

/* ---- mobile ---- */
@media (max-width: 782px) {
	.rpsc-reader { height: 80vh; min-height: 440px; }
	/* Боковые стрелки скрыты на мобильных (мешают просмотру) — листать кнопками тулбара ‹ › или тапом по краям. */
	.rpsc-edge { display: none; }
	.rpsc-thumbs {
		position: absolute; z-index: 6; top: 0; bottom: 0; left: 0;
		width: 196px; flex-basis: 196px; box-shadow: 6px 0 18px rgba(0,0,0,.4);
	}
	.rpsc-tb-center { order: 3; flex-basis: 100%; }
	.rpsc-menu { min-width: 210px; }
}