:root { --bar:#2b3a55; --ink:#1f2633; --navy:#2b3a55; --sand:#f3d9a4; --bg:#f7f3ec; --card:#fff; --line:#e2dbcf; --muted:#6b6f78; --fs:19px; }
body.sepia { --bar:#6b5536; --bg:#f1e7d0; --card:#f8f0dc; --ink:#3b2f1e; --line:#dccfb0; }
body.dark { --bar:#232933; --bg:#15181e; --card:#1e232b; --ink:#d9d6cf; --line:#2c323c; --muted:#8a8f99; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust:100%; text-size-adjust:100%; }
[hidden] { display:none !important; }
body { margin:0; font:16px/1.45 -apple-system, "Segoe UI", Roboto, sans-serif; color:var(--ink); background:var(--bg); }
.top { position:sticky; top:0; z-index:5; display:flex; gap:12px; align-items:center; padding:12px 18px; padding-top:max(12px, env(safe-area-inset-top)); background:var(--bar); color:#fff; transition:background .2s; }
.brand { font-weight:600; flex:1; }
.net { font-size:13px; opacity:.85; }
button.link { flex:1; text-align:left; background:none; border:0; color:#fff; padding:0; font:inherit; cursor:pointer; }
main { max-width:640px; margin:0 auto; padding:20px 18px 40px; }
h1 { font:600 26px/1.2 Georgia, serif; margin:4px 0 16px; }
.muted { color:var(--muted); }
.small { font-size:14px; }
.err { color:#c44; min-height:1.4em; }
form { display:flex; flex-direction:column; gap:10px; }
input#email, input#otp { font-size:18px; padding:12px; border:1px solid var(--line); border-radius:10px; background:var(--card); color:var(--ink); }
input#otp { letter-spacing:.3em; }
button { font:inherit; border:0; border-radius:10px; padding:10px 14px; background:var(--navy); color:#fff; cursor:pointer; }
button.ghost { background:transparent; color:var(--ink); border:1px solid var(--line); }
button.wide { width:100%; margin-top:14px; }
a { color:inherit; }

.shelf { display:grid; gap:12px; }
.book { display:flex; gap:14px; align-items:center; text-align:left; background:var(--card); color:var(--ink); border:1px solid var(--line); border-radius:14px; padding:12px; }
.cover { flex:none; width:64px; height:88px; border-radius:6px; background:var(--navy); color:var(--sand); display:flex; align-items:center; justify-content:center; font-size:26px; }
.book .bt { font-weight:600; }
.book .bm { font-size:14px; color:var(--muted); }

.resume { display:flex; gap:10px; align-items:center; justify-content:space-between; background:var(--card); border:1px solid var(--sand); border-radius:12px; padding:10px 12px; margin-bottom:14px; }
.now { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:16px; }
.nowTitle { font-weight:600; margin-bottom:8px; }
input#seek { width:100%; accent-color:var(--navy); }
.times { display:flex; justify-content:space-between; font-size:13px; color:var(--muted); font-variant-numeric:tabular-nums; }
.controls { display:flex; justify-content:center; align-items:center; gap:14px; margin-top:10px; }
.controls button { min-width:56px; background:transparent; color:var(--ink); border:1px solid var(--line); }
.controls .play { width:64px; height:64px; border-radius:50%; font-size:24px; background:var(--navy); color:#fff; border:0; }
.chapters { list-style:none; padding:0; margin:18px 0 0; }
.chapters li { display:flex; align-items:center; gap:10px; padding:10px 4px; border-bottom:1px solid var(--line); }
.chapters .t { flex:1; cursor:pointer; padding:4px 0; }
.chapters .off { font-size:13px; padding:6px 10px; font-weight:400; }
.chapters li.active { font-weight:600; }

/* читалка: текст нельзя выделить, скопировать и распечатать */
.rbar { position:sticky; top:var(--hdr, 46px); z-index:4; display:flex; gap:8px; padding:8px 0; background:var(--bg); }
.rbar select { flex:1; min-width:0; font:inherit; padding:8px; border-radius:10px; border:1px solid var(--line); background:var(--card); color:var(--ink); }
.page { font:var(--fs)/var(--lh, 1.6) var(--ff, Georgia, "Times New Roman", serif); hyphens:auto; text-align:justify;
  -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
.page h2 { font-size:1.2em; text-align:center; margin:1em 0; }
.page p { margin:0 0 .8em; text-indent:1.5em; }
.rnav { display:flex; justify-content:space-between; align-items:center; margin-top:20px; }
.wm { position:fixed; inset:0; pointer-events:none; z-index:3; opacity:.07; overflow:hidden; color:var(--ink);
  font:14px sans-serif; line-height:90px; white-space:pre; transform:rotate(-24deg) scale(1.6); }
@media print { body * { display:none !important; } body::after { content:"Печать недоступна"; display:block; } }

/* библиотека Усковой */
.cover img { width:100%; height:100%; object-fit:cover; border-radius:6px; display:block; }
.cover.big { width:96px; height:132px; }
.phead { display:flex; gap:16px; align-items:center; margin-bottom:16px; }
.phead h1 { margin:0 0 4px; }
.load { font-size:12px; }
.chapters .d { font-size:13px; color:var(--muted); font-variant-numeric:tabular-nums; }
.box { margin-top:16px; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:10px 14px; }
.box summary { cursor:pointer; font-weight:600; }
.box form { margin-top:10px; }
.box input { font-size:16px; padding:10px; border:1px solid var(--line); border-radius:10px; background:var(--bg); color:var(--ink); }
#serial { font-size:16px; padding:12px; border:1px solid var(--line); border-radius:10px; background:var(--card); color:var(--ink); width:100%; }
#serialBox { display:flex; flex-direction:column; gap:6px; }
#serialBox[hidden] { display:none; }
#loginTabs { margin:14px 0 4px; }
.devices { list-style:none; padding:0; margin:10px 0 0; }
.devices li { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--line); font-size:14px; }
.devices .off, .chapters .off { font-size:13px; padding:6px 10px; }
.page figure { margin:1.2em 0; text-align:center; }
.page figure img { max-width:100%; height:auto; border-radius:6px; pointer-events:none; }
.page p.c { text-indent:0; text-align:center; font-style:italic; margin:0 0 .2em; }
.page p.note { text-indent:0; font-size:.8em; color:var(--muted); }
.page p.q { margin-left:.3em; padding-left:.8em; border-left:2px solid var(--line); }

/* плеер: скорость рядом с названием главы, переход по главам */
.nowRow { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.nowRow .nowTitle { flex:1; margin:0; }
button.speed { padding:4px 10px; font-size:14px; background:transparent; color:var(--ink); border:1px solid var(--line); }
.controls { gap:8px; }
.controls button { min-width:46px; padding:10px 8px; }
.controls button:disabled { opacity:.35; cursor:default; }

/* реклама книг */
.promo { margin-top:28px; }
.promo h2 { font:600 20px/1.2 Georgia, serif; margin:0 0 4px; }
.promoList { display:grid; grid-template-columns:repeat(auto-fill, minmax(130px, 1fr)); gap:12px; margin-top:12px; }
.promoList a { display:flex; flex-direction:column; gap:4px; text-decoration:none; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:8px; }
.promoList img { width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:6px; }
.promoList b { font-size:15px; }
.promoList span { font-size:13px; color:var(--muted); }
.promoAll { display:inline-block; margin-top:12px; font-weight:600; }

/* подвал */
.foot { max-width:640px; margin:0 auto; padding:20px 18px max(28px, env(safe-area-inset-bottom)); border-top:1px solid var(--line); font-size:13px; color:var(--muted); text-align:center; }
.foot p { margin:6px 0; }
.cpLogo img { height:40px; width:auto; }
.cpLogo .onDark, body.dark .cpLogo .onLight { display:none; }
body.dark .cpLogo .onDark { display:inline; }
.controls svg { display:block; margin:0 auto; }

/* смена темы в шапке, на всех экранах */
.themeBtn { background:transparent; border:1px solid rgba(255,255,255,.35); color:#fff; padding:5px 7px; border-radius:9px; line-height:0; }
.themeBtn svg { display:block; }
.foot .ver { opacity:.6; font-size:12px; }

/* читалка постранично: экран без прокрутки, страницы листаются по горизонтали.
   Шапка, оглавление и нижнее меню лежат поверх текста и прячутся при листании (body.immersive) */
body.reading { overflow:hidden; }
body.reading .foot { display:none; }
body.reading .top { position:fixed; left:0; right:0; }
body.reading #reader { position:fixed; inset:0; z-index:1; display:flex; flex-direction:column; max-width:640px; margin:0 auto;
  padding:calc(env(safe-area-inset-top) + 14px) 18px 0; background:var(--bg); }
body.reading .rbar { position:fixed; top:var(--hdr, 46px); left:0; right:0; z-index:4; max-width:640px; margin:0 auto; padding:8px 18px; border-bottom:1px solid var(--line); }
.pageBox { flex:1; min-height:0; overflow:hidden; position:relative; touch-action:pan-y; cursor:pointer; }
.pageBox .page { height:100%; column-fill:auto; will-change:transform; }
.page h2 { margin-top:0; }
.page figure { break-inside:avoid; }
.page figure img { max-height:60vh; }
.rfoot { flex:none; height:calc(30px + env(safe-area-inset-bottom)); padding-top:6px; text-align:center; cursor:pointer; }
#pct { white-space:nowrap; }
.rmenu { position:fixed; left:0; right:0; bottom:calc(30px + env(safe-area-inset-bottom)); z-index:4; max-width:640px; margin:0 auto;
  padding:8px 18px; background:var(--bg); border-top:1px solid var(--line); }
.rmenu .rnav { margin:0; }
.rmenu .rnav button { padding:6px 12px; font-size:14px; }
.rmenu #saveText { margin:8px 0 0; padding:6px; font-size:13px; min-height:2.4em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
body.reading .top, body.reading .rbar, .rmenu { transition:opacity .2s, transform .2s, background .2s; }
body.immersive .top { transform:translateY(-100%); }
body.immersive .rbar, body.immersive .rmenu { opacity:0; pointer-events:none; }

/* Android: без синей вспышки при касании и без «прыжков» высоты из-за панели браузера */
button, .pageBox { -webkit-tap-highlight-color: transparent; }
body.reading #reader { bottom:auto; height:100vh; height:100dvh; }
.pageBox:focus { outline:none; }

/* кнопка установки в шапке */
.installBtn { display:flex; align-items:center; gap:6px; line-height:1; font-size:14px; padding:5px 9px; }
@media (max-width: 400px) { .installBtn span { display:none; } }
.installGuide ol { margin:6px 0 12px; padding-left:22px; font-size:14px; }
.installGuide li { margin:3px 0; }
.installGuide .installNow { width:100%; margin:10px 0 4px; }
.installGuide .others summary { cursor:pointer; font-size:14px; color:var(--muted); margin:4px 0; }
.installBox > summary { font-weight:600; }

/* вкладки полки */
.tabs { display:flex; gap:4px; padding:4px; margin:-4px 0 14px; background:var(--card); border:1px solid var(--line); border-radius:12px; }
.tabs button { flex:1; background:transparent; color:var(--ink); padding:9px 6px; font-size:15px; border-radius:9px; }
.tabs button[aria-selected="true"] { background:var(--navy); color:#fff; }
body.dark .tabs button[aria-selected="true"] { background:#3a4a68; }

/* настройки чтения, как в книжных приложениях: режим, размер, интервал, шрифт */
.rset { position:fixed; top:calc(var(--hdr, 46px) + 56px); left:0; right:0; z-index:6; max-width:604px; margin:0 auto; width:calc(100% - 24px);
  background:var(--card); border:1px solid var(--line); border-radius:14px; padding:12px 14px; box-shadow:0 8px 30px rgba(0,0,0,.18); }
.rset .row { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; font-size:14px; }
.seg { display:flex; align-items:center; gap:4px; background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:3px; }
.seg button { background:transparent; color:var(--ink); padding:6px 10px; font-size:14px; border-radius:8px; }
.seg button[aria-pressed="true"] { background:var(--navy); color:#fff; }
.seg b { min-width:2em; text-align:center; font-variant-numeric:tabular-nums; }
.fonts { display:grid; grid-template-columns:repeat(3, 1fr); gap:6px; }
.fonts button { background:var(--bg); color:var(--ink); border:1px solid var(--line); padding:9px 4px; font-size:16px; }
.fonts button[aria-pressed="true"] { border-color:var(--navy); box-shadow:inset 0 0 0 1px var(--navy); font-weight:600; }
body.dark .seg button[aria-pressed="true"] { background:#3a4a68; }
body.dark .fonts button[aria-pressed="true"] { border-color:#8fa3c7; box-shadow:inset 0 0 0 1px #8fa3c7; }
.rbar #setBtn { font:600 16px Georgia, serif; padding:6px 12px; }
.rbar #fsBtn { padding:6px 9px; line-height:0; }

/* режим прокрутки: обычная лента, в конце главы кнопка перехода */
.chEnd { display:none; }
body.reading.scroll .pageBox { overflow-y:auto; overscroll-behavior:contain; cursor:auto; }
body.reading.scroll .pageBox .page { height:auto; padding-top:calc(var(--hdr, 46px) + 44px); padding-bottom:2em; }
/* полоса прокрутки всегда у края окна, а не у края текста */
body.reading.scroll #reader { max-width:none; padding-left:0; padding-right:0; }
body.reading.scroll .pageBox .page { max-width:676px; margin:0 auto; padding-left:18px; padding-right:18px; }
body.reading.scroll .chEnd { display:block; margin:1.5em 0 0; text-indent:0; }
body.reading.scroll .chEnd button { width:100%; font:15px/1.3 -apple-system, "Segoe UI", Roboto, sans-serif; text-align:center; }

/* компьютер: книга на всю ширину окна, в режиме листания разворот из двух страниц */
@media (min-width: 1000px) {
  body.reading #reader, body.reading .rbar, .rmenu { max-width:none; }
  body.reading #reader { padding-left:clamp(24px, 5vw, 96px); padding-right:clamp(24px, 5vw, 96px); }
  body.reading .rbar, .rmenu { padding-left:clamp(24px, 5vw, 96px); padding-right:clamp(24px, 5vw, 96px); }
  /* прокрутка: полоса у правого края окна, текст на всю ширину с полями */
  body.reading.scroll #reader { padding-left:0; padding-right:0; }
  body.reading.scroll .pageBox .page { max-width:none; padding-left:clamp(24px, 5vw, 96px); padding-right:clamp(24px, 5vw, 96px); }
}

/* полоса прокрутки в цвет темы */
:root { color-scheme:light; }
body.dark { color-scheme:dark; }
.pageBox, html { scrollbar-color:var(--line) var(--bg); }
.pageBox::-webkit-scrollbar { width:10px; }
.pageBox::-webkit-scrollbar-track { background:var(--bg); }
.pageBox::-webkit-scrollbar-thumb { background:var(--line); border-radius:5px; border:2px solid var(--bg); }
.pageBox::-webkit-scrollbar-thumb:hover { background:var(--muted); }
.installGuide a.btnLink { display:block; text-align:center; padding:10px 14px; border-radius:10px; background:var(--navy); color:#fff; text-decoration:none; }
.updateBtn { background:var(--sand); color:#2b3a55; border-color:var(--sand); }

.inapp .installBox, .inapp .installHint, .inapp #installBtn { display:none !important; }
.installCta { margin:14px 0 14px; }
.installCta p { margin:0 0 8px; }
.installCta button { width:100%; margin:4px 0 10px; }
.inapp .installCta { display:none !important; }
a.btnLink { display:block; text-align:center; text-decoration:none; border-radius:10px; padding:10px 14px; margin:4px 0 10px; background:var(--navy); color:#fff; }

/* мини-плеер на полке: внизу экрана, нажатие на название открывает плеер */
.mini { position:fixed; left:0; right:0; bottom:0; z-index:5; display:flex; align-items:center; gap:6px; max-width:640px; margin:0 auto;
  padding:8px 10px calc(8px + env(safe-area-inset-bottom)); background:var(--card); border-top:1px solid var(--line); box-shadow:0 -6px 20px rgba(0,0,0,.12); }
@media (min-width: 641px) { .mini { bottom:12px; border:1px solid var(--line); border-radius:14px; padding-bottom:8px; } }
.miniBar { position:absolute; left:0; right:0; top:0; height:3px; background:var(--line); overflow:hidden; border-radius:14px 14px 0 0; }
.miniBar i { display:block; height:100%; width:0; background:var(--navy); }
body.dark .miniBar i { background:#8fa3c7; }
.miniOpen { flex:1; min-width:0; display:flex; align-items:center; gap:10px; background:transparent; color:var(--ink); padding:2px; text-align:left; }
.miniOpen .cover { width:40px; height:54px; border-radius:4px; }
.miniOpen .cover svg { width:20px; height:20px; }
.miniText { min-width:0; display:flex; flex-direction:column; }
.miniText b, .miniText span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.miniText b { font-size:15px; }
.miniText span { font-size:13px; color:var(--muted); font-variant-numeric:tabular-nums; }
.miniBtn { flex:none; min-width:42px; padding:9px 6px; font-size:14px; background:transparent; color:var(--ink); border:1px solid var(--line); }
.miniBtn.miniPlay { width:46px; height:46px; min-width:0; border-radius:50%; padding:0; font-size:18px; background:var(--navy); color:#fff; border:0; }
body.hasMini .foot { padding-bottom:calc(96px + env(safe-area-inset-bottom)); }
.miniClose { flex:none; width:30px; height:30px; padding:0; margin-left:-2px; border-radius:50%; background:transparent; color:var(--muted); line-height:0; }
.miniClose svg { display:block; margin:auto; }
@media (max-width: 380px) { .mini { gap:4px; padding-left:8px; padding-right:6px; } .miniBtn { min-width:38px; } .miniOpen { gap:8px; } }

/* чтение вслух: панель над номером страницы, текущее предложение подсвечено */
.ttsBar { flex:none; display:flex; align-items:center; justify-content:center; gap:10px; padding:6px 0 0; }
.ttsBar button { min-width:44px; height:40px; padding:0 8px; background:transparent; color:var(--ink); border:1px solid var(--line); line-height:0; }
.ttsBar button svg { display:block; margin:auto; }
.ttsBar .play { width:46px; height:46px; min-width:0; border-radius:50%; padding:0; font-size:18px; line-height:1; background:var(--navy); color:#fff; border:0; }
.ttsBar .speed { line-height:1; font-size:14px; }
.ttsBar .miniClose { min-width:0; width:34px; height:34px; border:0; color:var(--muted); }
body.dark .ttsBar .play { background:#3a4a68; }
body.tts .rmenu { bottom:calc(82px + env(safe-area-inset-bottom)); }
/* слой подсветки позади текста (z-index:-1 внутри #reader) */
.ttsHl { position:absolute; left:0; top:0; width:0; height:0; z-index:-1; pointer-events:none; }
.ttsHl i { position:absolute; border-radius:4px; background:rgba(240, 200, 120, .55); }
body.dark .ttsHl i { background:rgba(143, 163, 199, .3); }
.rbar #ttsBtn { padding:6px 9px; line-height:0; }
.ttsVoiceRow select { flex:1; min-width:0; max-width:60%; font:inherit; font-size:14px; padding:6px; border-radius:8px; border:1px solid var(--line); background:var(--bg); color:var(--ink); }
.rset .ttsVoiceRow { margin:10px 0 0; }

/* демо-версия и мои файлы */
.demo { display:flex; gap:14px; align-items:flex-start; margin-top:24px; padding:14px; }
.demo img { width:84px; border-radius:6px; flex:none; }
.demoBody { flex:1; min-width:0; }
.demoBody h2 { font:600 18px/1.25 Georgia, serif; margin:4px 0; }
.demoBody p { margin:0 0 8px; }
.demoBody audio { width:100%; margin-bottom:6px; }
.demoTag { display:inline-block; padding:2px 8px; border-radius:6px; background:var(--navy); color:#fff; font-size:12px; font-weight:600; }
.mineAdd { padding:12px 14px; margin-bottom:12px; }
.mineAdd .btnLink { display:block; cursor:pointer; text-align:center; border-radius:10px; padding:10px 14px; margin:0 0 8px; background:var(--navy); color:#fff; font-weight:600; }
.mineAdd .busy { opacity:.6; pointer-events:none; }
.mineRow { display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.mineRow .book { flex:1; min-width:0; margin:0; }
.mineRow .off { flex:none; }