/* =========== Читалка =========== */
.reader-body { --r-size: 19px; --r-lh: 1.75; --r-font: var(--f-read); background: #0a0e1a; padding-bottom: 0; }
.reader-body[data-theme="sepia"] { --r-paper: #f3e9d4; --r-ink: #2b2118; --r-accent: #8a5a1c; --r-chrome: #1a1510; }
.reader-body[data-theme="light"] { --r-paper: #fbfaf6; --r-ink: #1d1f24; --r-accent: #8a5a1c; --r-chrome: #14161c; }
.reader-body[data-theme="night"] { --r-paper: #141a2c; --r-ink: #d9d3c4; --r-accent: #e3b56a; --r-chrome: #080b15; }
.reader-body[data-font="sans"] { --r-font: var(--f-ui); }

.rbar {
  position: sticky; top: 0; z-index: 40; height: 60px; display: flex; align-items: center; gap: 14px; padding: 0 18px;
  background: rgba(10, 14, 26, .92); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line);
}
.rbar__title { display: flex; align-items: center; gap: 12px; min-width: 0; }
.rbar__title img { width: 28px; border-radius: 2px 3px 3px 2px; }
.rbar__title b { font: 500 20px var(--f-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rbar__title span { font-size: 12px; color: var(--muted); white-space: nowrap; }
.rbar__tools { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.rbar .icon-btn { width: 38px; height: 38px; }
.rbar__font { font: 600 15px var(--f-display); }
.rbar__font small { font-size: 11px; }
.rprogress { position: absolute; left: 0; bottom: -1px; height: 2px; width: 0; background: linear-gradient(90deg, var(--gold-3), var(--gold-2)); transition: width .1s; }

.settings {
  position: absolute; right: 18px; top: 66px; width: 280px; padding: 18px; border-radius: 14px;
  background: var(--panel-solid); border: 1px solid var(--line-2); box-shadow: var(--shadow); display: none;
}
.settings.is-open { display: block; }
.settings h5 { margin: 0 0 10px; font: 600 11px var(--f-ui); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.settings__row { display: flex; gap: 8px; margin-bottom: 18px; }
.settings__row:last-child { margin-bottom: 0; }
.swatch { flex: 1; height: 44px; border-radius: 10px; border: 2px solid transparent; font: 600 13px var(--f-display); }
.swatch[aria-pressed="true"] { border-color: var(--gold); }
.swatch--sepia { background: #f3e9d4; color: #2b2118; }
.swatch--light { background: #fbfaf6; color: #1d1f24; }
.swatch--night { background: #141a2c; color: #d9d3c4; border-color: var(--line); }
.settings .chip { flex: 1; justify-content: center; height: 40px; }
.settings .chip[aria-pressed="true"] { background: rgba(227, 181, 106, .16); }

.stage { position: relative; padding: 40px 20px 120px; isolation: isolate; }
.stage::before { content: ""; position: fixed; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(8,11,20,.8), rgba(8,11,20,.96)), url("../img/bg/bg-reader.svg") center/cover; }
.page {
  position: relative; width: min(780px, 100%); margin: 0 auto; padding: 70px clamp(24px, 7vw, 86px) 60px;
  background: var(--r-paper); color: var(--r-ink); border-radius: 6px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .55), inset 0 0 120px rgba(120, 80, 30, .12);
  transition: background .3s, color .3s;
}
.reader-body[data-theme="sepia"] .page {
  background-image: radial-gradient(ellipse at top left, rgba(255,255,255,.4), transparent 60%), radial-gradient(ellipse at bottom right, rgba(160,110,50,.12), transparent 60%);
}
.page::before, .page::after { content: ""; position: absolute; left: 10px; right: 10px; height: 8px; background: var(--r-paper); opacity: .6; border-radius: 0 0 6px 6px; filter: brightness(.9); }
.page::before { bottom: -6px; } .page::after { bottom: -12px; left: 20px; right: 20px; opacity: .35; }
.page__ch { font: 500 15px var(--f-display); letter-spacing: .3em; text-transform: uppercase; color: var(--r-accent); text-align: center; }
.page h1 { font: 500 clamp(34px, 5vw, 46px)/1.1 var(--f-display); text-align: center; margin: 10px 0 8px; color: var(--r-ink); }
.page__orn { display: flex; justify-content: center; margin: 18px 0 40px; color: var(--r-accent); }
.page__orn svg { width: 160px; height: 18px; }
.text { font: 400 var(--r-size)/var(--r-lh) var(--r-font); hyphens: auto; text-align: justify; }
.text p { margin: 0; text-indent: 1.6em; }
.text p + p { margin-top: .35em; }
.text p.first { text-indent: 0; }
.text p.first::first-letter { float: left; font: 500 4.3em/.82 var(--f-display); margin: .06em .1em 0 0; color: var(--r-accent); }
.text .dialog { text-indent: 1.6em; }
.text .quote { margin: 2em auto; max-width: 80%; text-align: center; text-indent: 0; font: italic 1.1em/1.5 var(--f-display); color: var(--r-accent); }
.text .stars { text-align: center; text-indent: 0; letter-spacing: 1em; margin: 1.6em 0; color: var(--r-accent); }
.page__more { margin-top: 40px; padding: 18px; border: 1px dashed currentColor; border-radius: 10px; font: 14px var(--f-ui); opacity: .7; text-align: center; }

.pnav { width: min(780px, 100%); margin: 30px auto 0; display: flex; justify-content: space-between; gap: 12px; }
.pnav a { display: flex; align-items: center; gap: 10px; padding: 14px 20px; border-radius: 12px; border: 1px solid var(--line-2); color: var(--gold-2); font-size: 14px; background: rgba(10,14,26,.8); }
.pnav a:hover { background: rgba(227,181,106,.1); }
.pnav svg { width: 18px; }
.pnav small { display: block; font-size: 11px; color: var(--muted); }

.toc-drawer .drawer__panel { width: min(380px, 90vw); }
.toc-drawer .toc a { font: 500 18px var(--f-display); border-bottom-style: solid; padding: 14px 0; }
.toc-drawer .toc a.is-current { color: var(--gold); }

@media (max-width: 700px) {
  .rbar__title span, .rbar__title img { display: none; }
  .rbar { gap: 8px; padding: 0 10px; }
  .rbar .icon-btn { width: 34px; height: 34px; }
  .stage { padding: 0 0 100px; }
  .page { border-radius: 0; padding-top: 44px; box-shadow: none; }
  .page::before, .page::after { display: none; }
  .text { text-align: left; }
  .pnav { padding: 0 12px; }
  .settings { right: 8px; left: 8px; width: auto; }
}