/* Книги — общие стили. Без внешних шрифтов и CDN: сервер слабый, сайт лёгкий. */

:root{
  --bg:#0a0f1e;
  --bg2:#121a31;
  --ink:#e8ecf6;
  --muted:#9aa7c4;
  --amber:#ffb454;
  --amber2:#ffd27a;
  --cyan:#6fd6c9;
  --line:#243052;
  --card:#101828;
  --head-bg:rgba(10,15,30,.78);
  --serif:Georgia,"Times New Roman",serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --fs:1.15rem; /* размер шрифта читалки, меняется кнопками */
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  line-height:1.6;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
/* сцена занимает всю ширину контейнера — и видео, и растровая картинка.
   Без width:100% растр (постер 832px) уже рамки, в отличие от тянущегося SVG */
.scene video,.scene img{max-width:100%;width:100%;height:auto;display:block}
.scene video{background:#070b14}
a{color:var(--amber2);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:4px}

/* ---------- звёздное небо (фон всех страниц) ---------- */
/* Звёзд нет под текстом: у звёздных слоёв вырезана центральная колонка — та,
   в которой идёт текст (ширина совпадает с колонкой чтения, края растушёваны).
   Именно вырез, а не подложка: подложка своим цветом спорила бы с фоном темы
   «под книгу» (там у body градиент) и выглядела бы прямоугольной заплаткой.
   На узком экране текст занимает почти всю ширину — остаётся звёздная рамка. */
:root{--sky-gap:min(48rem,100vw - 3rem)}
.sky{position:fixed;inset:-10% 0;z-index:-2;pointer-events:none;will-change:transform;
  -webkit-mask-image:linear-gradient(90deg,#000 0,
    #000 calc(50% - var(--sky-gap)/2 - 1.5rem),
    transparent calc(50% - var(--sky-gap)/2),
    transparent calc(50% + var(--sky-gap)/2),
    #000 calc(50% + var(--sky-gap)/2 + 1.5rem),#000 100%);
  mask-image:linear-gradient(90deg,#000 0,
    #000 calc(50% - var(--sky-gap)/2 - 1.5rem),
    transparent calc(50% - var(--sky-gap)/2),
    transparent calc(50% + var(--sky-gap)/2),
    #000 calc(50% + var(--sky-gap)/2 + 1.5rem),#000 100%)}
.sky i{position:absolute;border-radius:50%;background:#dfe9ff}
.sky-a i{width:2px;height:2px;opacity:.7;
  box-shadow:4vw 12vh 0 #dfe9ff,12vw 68vh 0 #dfe9ff,17vw 32vh 0 #cfe3ff,23vw 85vh 0 #dfe9ff,
  29vw 15vh 0 #fff,36vw 51vh 0 #dfe9ff,41vw 8vh 0 #cfe3ff,48vw 71vh 0 #dfe9ff,
  53vw 28vh 0 #fff,61vw 90vh 0 #dfe9ff,66vw 42vh 0 #cfe3ff,73vw 12vh 0 #dfe9ff,
  79vw 61vh 0 #fff,86vw 34vh 0 #dfe9ff,92vw 78vh 0 #cfe3ff,97vw 22vh 0 #dfe9ff,
  8vw 45vh 0 #dfe9ff,57vw 18vh 0 #cfe3ff,84vw 5vh 0 #dfe9ff,33vw 95vh 0 #cfe3ff}
.sky-b i{width:1px;height:1px;opacity:.5;
  box-shadow:6vw 25vh 0 #9fb6e8,14vw 55vh 0 #9fb6e8,21vw 5vh 0 #9fb6e8,27vw 74vh 0 #9fb6e8,
  34vw 38vh 0 #9fb6e8,44vw 92vh 0 #9fb6e8,51vw 60vh 0 #9fb6e8,59vw 35vh 0 #9fb6e8,
  64vw 80vh 0 #9fb6e8,71vw 48vh 0 #9fb6e8,77vw 25vh 0 #9fb6e8,83vw 88vh 0 #9fb6e8,
  90vw 58vh 0 #9fb6e8,95vw 42vh 0 #9fb6e8,3vw 82vh 0 #9fb6e8,39vw 20vh 0 #9fb6e8,
  68vw 8vh 0 #9fb6e8,88vw 15vh 0 #9fb6e8,11vw 95vh 0 #9fb6e8,47vw 45vh 0 #9fb6e8}
.nebula{position:fixed;inset:0;z-index:-3;pointer-events:none;
  background:
    radial-gradient(60vw 40vh at 78% 12%, rgba(111,214,201,.07), transparent 60%),
    radial-gradient(70vw 50vh at 15% 75%, rgba(255,180,84,.05), transparent 60%),
    radial-gradient(50vw 40vh at 55% 40%, rgba(90,120,220,.08), transparent 60%);
}

/* ---------- режим правки текста (только для админа/редактора) ---------- */
#edit-toggle{position:fixed;right:1rem;bottom:1rem;z-index:60;
  background:var(--card);color:var(--ink);border:1px solid var(--line);
  border-radius:999px;padding:.5rem .9rem;font-size:.85rem;cursor:pointer;
  box-shadow:0 8px 24px rgba(0,0,0,.35)}
#edit-toggle.on{border-color:var(--amber);color:var(--amber2)}
body.edit-mode [data-editable]{outline:1px dashed rgba(255,180,84,.35);outline-offset:4px;
  border-radius:6px}
.edit-pen{background:transparent;border:0;color:var(--amber2);cursor:pointer;
  font-size:1.05rem;padding:.15rem .4rem;min-width:32px;min-height:28px;opacity:.7;
  vertical-align:middle;touch-action:manipulation}
.edit-pen:hover{opacity:1}
/* в режиме правки карандаш заметнее — легче попасть пальцем на планшете */
body.edit-mode .edit-pen{opacity:.9;background:color-mix(in srgb,var(--amber) 18%,transparent);
  border-radius:6px}
.edit-box{display:block;text-align:left;text-indent:0}
.edit-ta{width:100%;background:var(--card);color:var(--ink);border:1px solid var(--line);
  border-radius:10px;padding:.6rem .7rem;font:inherit;font-size:1rem;line-height:1.5}
.edit-row{display:flex;align-items:center;gap:.5rem;margin-top:.5rem;flex-wrap:wrap}
.edit-msg{flex:1;color:var(--muted);font-size:.82rem;font-family:var(--sans);
  font-style:normal;text-indent:0}
@media print{#edit-toggle,.edit-pen{display:none}}

/* глазок у поля пароля */
.pw-wrap{position:relative;display:block}
.pw-wrap input{width:100%;padding-right:2.6rem}
.pw-eye{position:absolute;right:.4rem;top:50%;transform:translateY(-50%);
  background:transparent;border:0;color:var(--muted);font-size:1.05rem;cursor:pointer;
  padding:.25rem .35rem;line-height:1}
.pw-eye:hover{color:var(--amber2)}

/* ---------- шапка ---------- */
.top{
  position:sticky;top:0;z-index:10;
  display:flex;align-items:center;gap:.8rem;
  padding:.65rem clamp(1rem,4vw,2.5rem);
  background:var(--head-bg);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.top .mark{font-family:var(--serif);font-size:1.05rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.top .mark b{color:var(--amber)}
.top .crumb{color:var(--muted);font-size:.92rem}
.top .spacer{flex:1}
.top a.btn{margin:0}

/* ---------- герой ---------- */
.hero{
  min-height:86vh;display:flex;flex-direction:column;justify-content:center;align-items:center;
  text-align:center;padding:4rem 1.2rem 3rem;position:relative;
}
.hero .kicker{color:var(--cyan);letter-spacing:.32em;text-transform:uppercase;font-size:.8rem;margin:0 0 1rem}
.hero h1{
  font-family:var(--serif);font-weight:600;
  font-size:clamp(2.6rem,7.5vw,4.6rem);
  letter-spacing:.28em;text-indent:.28em;
  margin:.1em 0 .25em;text-shadow:0 0 34px rgba(255,180,84,.25);
}
.hero .sub{color:var(--muted);font-size:clamp(1rem,2.2vw,1.2rem);max-width:34rem;margin:0 auto 2rem}
.hero .scene{width:min(920px,94vw);margin:0 auto 2.2rem;border-radius:18px;overflow:hidden;
  border:1px solid rgba(36,48,82,.7);box-shadow:0 22px 70px rgba(0,0,0,.55),0 0 60px rgba(90,120,220,.12)}
.hero .actions{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center}

.btn{
  display:inline-block;padding:.78rem 1.7rem;border-radius:999px;
  font-weight:600;font-size:1rem;letter-spacing:.02em;
  background:linear-gradient(135deg,var(--amber),var(--btn-2,#e8925a));color:#22150a;
  border:none;cursor:pointer;transition:transform .25s,box-shadow .25s;
  box-shadow:0 6px 24px rgba(255,180,84,.28);
}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(255,180,84,.4);text-decoration:none}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line);box-shadow:none}
.btn.ghost:hover{border-color:var(--amber);color:var(--amber2)}
.btn.small{padding:.45rem 1.1rem;font-size:.9rem}

.scroll-hint{position:absolute;bottom:1.4rem;left:50%;transform:translateX(-50%);color:var(--muted);font-size:1.4rem;animation:hint 2.4s ease-in-out infinite}
@keyframes hint{0%,100%{transform:translate(-50%,0);opacity:.5}50%{transform:translate(-50%,8px);opacity:1}}

/* ---------- секции-панели презентации ---------- */
.panel{padding:clamp(3.5rem,9vh,6.5rem) 1.2rem;display:flex;flex-direction:column;align-items:center}
.panel .scene{width:min(860px,94vw);border-radius:16px;overflow:hidden;
  border:1px solid rgba(36,48,82,.7);box-shadow:0 18px 60px rgba(0,0,0,.5)}
.panel .txt{max-width:680px;text-align:center;margin-top:2.2rem}
.panel .num{color:var(--cyan);letter-spacing:.3em;font-size:.78rem;text-transform:uppercase;margin:0 0 .6rem}
.panel h2{font-family:var(--serif);font-size:clamp(1.6rem,4vw,2.3rem);font-weight:600;margin:0 0 1rem}
.panel p{color:var(--muted);font-size:1.08rem;margin:.4rem 0}
.panel blockquote{
  font-family:var(--serif);font-style:italic;font-size:clamp(1.15rem,2.6vw,1.45rem);
  color:var(--ink);margin:1.4rem 0 .4rem;padding:0 1rem;line-height:1.55;
}
.panel blockquote::before{content:"«"}
.panel blockquote::after{content:"»"}
.panel .q-src{color:var(--muted);font-size:.9rem}

/* ---------- карточки библиотеки ---------- */
.shelf{max-width:1060px;margin:0 auto;padding:2.5rem 1.2rem 5rem}
.shelf h2{font-family:var(--serif);font-size:2rem;text-align:center;margin:0 0 2.2rem}
.shelf-controls{display:flex;gap:.8rem;flex-wrap:wrap;max-width:1060px;margin:0 auto 1.6rem}
.shelf-controls input,.shelf-controls select{background:var(--card);color:var(--ink);
  border:1px solid var(--line);border-radius:10px;padding:.6rem .9rem;font:inherit}
.shelf-controls input{flex:1;min-width:14rem}
.shelf-controls input:focus,.shelf-controls select:focus{border-color:var(--amber);outline:none}
/* телефон: компактная сетка контролов «2 в ряд», без «лесенки» — кнопка вида
   больше НЕ уезжает вправо (убираем margin-left:auto), всё выровнено слева */
@media (max-width:560px){
  .shelf-controls{gap:.5rem;margin-bottom:1rem}
  .shelf-controls input{flex:1 1 100%;min-width:0}          /* поиск — на всю строку */
  .shelf-controls select,#shelf-random,#shelf-filters,.view-tog{
    flex:1 1 calc(50% - .25rem);margin-left:0;min-width:0}  /* остальное — по половине строки */
  /* сортировка («По новизне…») и раскладка («От центра…») — В ОДНУ строку (v0.136):
     порядок строк задаём через order, а не DOM (в DOM раскладка стоит последней) */
  #shelf-search{order:0}
  #shelf-sort,#shelf-order{order:1;font-size:.9rem;padding:.55rem .5rem;
    text-overflow:ellipsis;white-space:nowrap}
  #shelf-random,#shelf-filters{order:2}
  @media (max-width:380px){#shelf-sort,#shelf-order{font-size:.85rem;padding:.55rem .35rem}}
  .view-tog{display:flex;order:3}
  .view-tog button{flex:1;padding:.5rem .4rem;text-align:center}
}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:1.6rem}
.card{
  background:linear-gradient(180deg,rgba(19,27,49,.9),rgba(13,19,36,.9));
  border:1px solid rgba(36,48,82,.8);border-radius:18px;overflow:hidden;
  display:flex;flex-direction:column;transition:transform .3s,box-shadow .3s,border-color .3s;
}
.card:hover{transform:translateY(-6px);box-shadow:0 20px 50px rgba(0,0,0,.5);border-color:rgba(255,180,84,.5)}
.card .cover{aspect-ratio:800/420;overflow:hidden;border-bottom:1px solid rgba(36,48,82,.6);position:relative}
.nb-cover{position:relative}
.grid-scene{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .25s;pointer-events:none}
.playing .grid-scene{opacity:1}
.nb-time{color:var(--amber2);font-size:.82rem;margin:.15rem 0 0;display:flex;align-items:center;gap:.35rem;flex-wrap:wrap}
/* значок-календарь с реальной датой публикации (вместо эмодзи 📅=«17 июля») */
.cal-ico{display:inline-flex;flex-direction:column;align-items:stretch;justify-content:flex-start;
  width:1.55em;border-radius:.26em;overflow:hidden;background:#fbf7ee;color:#22150a;
  vertical-align:-.5em;line-height:1;box-shadow:0 1px 2px rgba(0,0,0,.45);
  font-family:var(--sans);flex:0 0 auto}
.cal-ico b{text-align:center;background:#d9482f;color:#fff;font-size:.5em;font-weight:700;
  letter-spacing:.03em;padding:.22em 0 .16em}
.cal-ico i{font-style:normal;font-weight:700;font-size:.86em;text-align:center;padding:.06em 0 .1em}
.pub-date .cal-ico{margin-right:.15rem}
/* активная кнопка-фильтр «с озвучкой» */
#shelf-audio.on{background:var(--amber);color:#22150a;border-color:var(--amber)}
.card .body{padding:1.2rem 1.3rem 1.4rem;display:flex;flex-direction:column;gap:.55rem;flex:1}
.card h3{font-family:var(--serif);font-size:1.5rem;margin:0}
.card .meta{color:var(--cyan);font-size:.82rem;letter-spacing:.18em;text-transform:uppercase}
.card .anno{color:var(--muted);font-size:.98rem;flex:1}
.card .row{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:.5rem}
.card.soon{border-style:dashed;align-items:center;justify-content:center;min-height:260px;color:var(--muted);text-align:center;padding:2rem}
.card.soon .big{font-size:2rem;opacity:.6}
.card-draft{border-style:dashed}
.cover-none{aspect-ratio:800/420;display:flex;align-items:center;justify-content:center;
  font-size:3rem;color:var(--line);background:var(--bg2)}

/* ---------- Полка-«корешки» (книжный шкаф) ---------- */
/* Тумблер вида «полка / сетка» */
.view-tog{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;margin-left:auto}
.view-tog button{background:transparent;border:0;color:var(--muted);font-family:var(--sans);
  font-size:.9rem;padding:.5rem .95rem;cursor:pointer;transition:background .2s,color .2s}
.view-tog button.on{background:linear-gradient(135deg,var(--amber),var(--btn-2,#e8925a));color:#22150a;font-weight:600}

/* шкаф — на всю ширину окна (точную ширину/сдвиг ставит JS fitWidth) */
/* атрибут hidden должен побеждать display:grid/flex у .cards/.bookcase и т.п. */
[hidden]{display:none!important}
.bookcase{position:relative;margin-bottom:1.4rem}
.case-rail{display:flex;align-items:flex-end;gap:12px;
  overflow-x:auto;overflow-y:visible;
  padding:22px 8px 14px;scroll-snap-type:x proximity;overflow-anchor:none;perspective:1400px;
  scrollbar-width:thin;scrollbar-color:var(--line) transparent;-webkit-overflow-scrolling:touch}
/* пустые «поля» по обоим краям (v0.143): при любой раскладке и фильтрации крайнюю
   книгу можно отмотать до середины экрана. shelf.js ставит data-pad="both", когда
   книги не влезают в ряд; влезают — полей нет, группа стоит по центру. */
.case-rail[data-pad="both"]::before,
.case-rail[data-pad="both"]::after{content:"";flex:0 0 calc(50% - 45px);pointer-events:none}
.case-rail::-webkit-scrollbar{height:8px}
.case-rail::-webkit-scrollbar-thumb{background:var(--line);border-radius:8px}
/* деревянная полка потолще, «как настоящая» */
.case-board{height:26px;border-radius:0 0 10px 10px;position:relative;z-index:1;
  background:linear-gradient(180deg,#5a4026 0%,#43301c 40%,#2b1f12 100%);
  box-shadow:0 22px 40px -16px #000, inset 0 2px 0 rgba(255,225,180,.22),
    inset 0 -5px 9px rgba(0,0,0,.55)}
.case-board::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;
  background:linear-gradient(180deg,rgba(255,225,180,.28),transparent)}
.case-board::after{content:"";position:absolute;left:0;right:0;bottom:0;height:7px;border-radius:0 0 10px 10px;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.5))}
/* подборки под полкой */
.case-collections{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;align-items:center;
  padding:.8rem 1rem 0;max-width:1060px;margin:0 auto}
.cc-label{color:var(--muted);font-size:.82rem;margin-right:.2rem}
.cc-chip{background:var(--card);border:1px solid var(--line);border-left:5px solid var(--cc,var(--amber));
  color:var(--ink);font-family:var(--sans);font-size:.85rem;border-radius:6px;padding:.32rem .7rem;cursor:pointer;
  transition:border-color .2s,transform .1s}
.cc-chip:hover{border-color:var(--cc,var(--amber));transform:translateY(-1px)}
.cc-chip i{color:var(--muted);font-style:normal;font-size:.78rem}
/* стрелки листания (ПК) — внизу, чуть над полкой */
/* Стрелки листания приподняты над нарисованной полкой (доской) и заметнее:
   янтарная заливка, тёмная стрелка, свечение и тень. */
.case-arrow{position:absolute;bottom:52px;z-index:5;width:46px;height:46px;border-radius:50%;
  border:none;background:linear-gradient(180deg,var(--amber),var(--amber2));color:#22150a;cursor:pointer;
  font-size:1.5rem;font-weight:700;line-height:1;display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 18px -4px rgba(0,0,0,.7),0 0 0 3px rgba(255,180,84,.18);
  transition:transform .15s ease,box-shadow .2s,opacity .2s}
.case-arrow:hover{transform:translateY(-2px) scale(1.06);
  box-shadow:0 10px 24px -4px rgba(0,0,0,.8),0 0 0 4px rgba(255,180,84,.3)}
.case-arrow.l{left:1.4vw}.case-arrow.r{right:1.4vw}
.case-arrow[hidden]{display:none}
/* при раскрытой книге стрелки мешают — прячем */
.bookcase.has-open .case-arrow{display:none}
/* Планшет/телефон: полка ниже и «Подборки»-фильтры идут СРАЗУ под ней — при
   позиционировании от низа стрелки наезжали на фильтры. Ставим их на уровень
   книг (по вертикали — середина ряда), чтобы чуть наезжали на корешки, а не на
   чипы под полкой. Десктоп (≥820) не трогаем — там места хватает. */
@media (max-width:819px){.case-arrow{top:262px;bottom:auto}}   /* середина корешков +30% (v0.138) */
@media (max-width:560px){.case-arrow{top:262px;width:42px;height:42px}}
@media (prefers-reduced-motion:reduce){.case-arrow{transition:none}.case-arrow:hover{transform:none}}
/* «шторки» по краям */
.case-edge{position:absolute;top:0;bottom:26px;width:6vw;min-width:32px;pointer-events:none;z-index:4}
.case-edge.l{left:0;background:linear-gradient(270deg,transparent,var(--bg))}
.case-edge.r{right:0;background:linear-gradient(90deg,transparent,var(--bg))}

/* корешок */
.spine{scroll-snap-align:center;flex:0 0 auto;position:relative;cursor:pointer;
  width:var(--w,96px);border-radius:7px 7px 3px 3px;border:1px solid var(--line);
  background:var(--bg,#101828);display:flex;flex-direction:column;
  box-shadow:0 12px 16px -10px rgba(0,0,0,.9);
  transition:transform .2s ease, box-shadow .2s ease}
.spine:hover,.spine:focus-visible{transform:translateY(-7px);
  box-shadow:0 22px 28px -14px rgba(0,0,0,.95);outline:none;z-index:3}
.spine::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;z-index:3;border-radius:7px 0 0 3px;
  background:linear-gradient(180deg,var(--ac,var(--amber)),color-mix(in srgb,var(--ac,#ffb454) 45%,#000));
  box-shadow:1px 0 0 rgba(255,255,255,.14) inset}
.spine-inner{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;
  overflow:hidden;border-radius:6px 6px 3px 3px}
.s-face{display:flex;flex-direction:column}
.s-front{flex:1;overflow:hidden}
.s-front::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.05;
  background:repeating-linear-gradient(90deg,#fff 0 1px,transparent 1px 3px)}
.s-front>*{position:relative;z-index:2}
.spine .s-cover{width:100%;background:var(--bg2);background-size:cover;background-position:center;
  border-bottom:1px solid rgba(0,0,0,.45)}
.spine .s-cover img{width:100%;height:100%;object-fit:cover;display:block}
.spine .s-none{display:flex;align-items:center;justify-content:center;color:var(--ac,var(--line));font-size:1.6rem;opacity:.6}
.spine .s-txt{padding:.5rem .5rem .5rem .62rem;display:flex;flex-direction:column;gap:.16rem;flex:1;min-width:0}
/* фон корешка — всегда тёмный тон «настроения», поэтому текст на нём всегда
   светлый (в т.ч. на светлой теме, иначе название сливалось с фоном) */
.spine .s-title{font-family:var(--serif);font-weight:600;font-size:.9rem;line-height:1.13;
  color:#eef1f8;word-break:normal;overflow-wrap:normal;hyphens:none;
  text-shadow:0 1px 3px rgba(0,0,0,.7)}
.spine .s-year{color:#c2ccdf;font-size:calc(.68rem * var(--k,1));font-variant:small-caps;letter-spacing:.05em}
.spine .s-genre{color:var(--ac,var(--amber2));font-size:calc(.62rem * var(--k,1));letter-spacing:.08em;text-transform:uppercase;
  white-space:nowrap;filter:brightness(1.35)}
.spine .s-foot{margin-top:auto;display:flex;align-items:baseline;gap:.22rem;padding-top:.4rem;
  border-top:1px solid var(--line)}
.spine .s-rate{font-weight:600;font-size:calc(.9rem * var(--k,1));color:var(--amber2)}
.spine .s-star{color:var(--amber);font-size:calc(.78rem * var(--k,1))}
.spine.draft{border-style:dashed;opacity:.62}
.spine.draft .s-cover{filter:grayscale(.4) brightness(.82)}
.spine .s-badge{position:absolute;top:5px;left:10px;z-index:4;font-size:.56rem;letter-spacing:.06em;
  background:rgba(10,15,30,.82);border:1px solid var(--line);color:var(--muted);padding:.02rem .32rem;border-radius:4px}

/* Кольцо дочитанности + бейдж «офлайн» в верхнем правом углу корешка/карточки */
.s-corner{position:absolute;top:4px;right:6px;z-index:4;display:flex;flex-direction:column;
  align-items:flex-end;gap:3px;pointer-events:none}
.prog-ring{display:inline-flex;filter:drop-shadow(0 1px 2px rgba(0,0,0,.6))}
.prog-ring .pr-bg{fill:rgba(10,15,30,.6);stroke:rgba(255,255,255,.22);stroke-width:2}
.prog-ring .pr-fg{fill:none;stroke:var(--amber,#e0a955);stroke-width:3;stroke-linecap:round;
  transition:stroke-dashoffset .4s}
.prog-ring.done .pr-fg{stroke:#37c26b}
.prog-ring .pr-check{fill:none;stroke:#37c26b;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.s-offline{font-size:.72rem;line-height:1;background:rgba(10,15,30,.78);border:1px solid var(--line);
  border-radius:6px;padding:.06rem .2rem}
/* в карточке сетки — тот же угол */
.card .s-corner{top:8px;right:8px}

/* Каталог: книга раскрывается НА МЕСТЕ (в ряду), соседи раздвигаются по
   горизонтали, полка НЕ шатается по вертикали — высота рельсы зарезервирована
   (`.case-rail{min-height}` ниже), а карточка ограничена по высоте (max-height +
   внутренняя прокрутка), поэтому её рост не двигает страницу. Корешок при
   раскрытии слегка приподнимается — «сходит с полки». Не модал: всё в потоке. */
.s-back{display:none;background:linear-gradient(180deg,rgba(21,30,54,.99),rgba(13,19,36,.99));
  transform-origin:center bottom}
.spine.open{width:340px;z-index:6;transform:translateY(-8px);
  box-shadow:0 26px 50px -16px rgba(0,0,0,.9)}
@media (min-width:820px){ .spine.open{width:360px} }
@media (max-width:560px){ .spine.open{width:84vw} }
.spine.open .s-front{display:none}
/* карточка — ЦЕЛИКОМ, без внутренней прокрутки (v0.137); тряску при переборе
   гасит shelf.js lockRail (рельса держит максимальную высоту, пока книга открыта) */
.spine.open .s-back{display:block;position:relative;
  animation:cardIn .34s cubic-bezier(.2,.7,.2,1)}
@keyframes cardIn{from{opacity:0;transform:perspective(900px) rotateY(28deg) scale(.97)}to{opacity:1;transform:none}}
/* зарезервированная высота ряда: рост раскрытой карточки укладывается в неё —
   страница под полкой не прыгает (полка не «шатается») */
.case-rail{min-height:470px}                       /* +30% книги (v0.138) */
@media (min-width:820px){ .case-rail{min-height:600px} }
/* keyframes coFade/coIn используются модалом цитаты и каруселью писем — не удалять */
@keyframes coFade{from{opacity:0}to{opacity:1}}
@keyframes coIn{from{opacity:0;transform:translate(-50%,-50%) perspective(900px) rotateY(34deg) scale(.96)}
  to{opacity:1;transform:translate(-50%,-50%)}}
.s-card{position:relative;display:flex;flex-direction:column}
.s-card .sc-cover{aspect-ratio:800/420;overflow:hidden;background:var(--bg2);border-bottom:1px solid var(--line)}
.s-card .sc-cover img{width:100%;height:100%;object-fit:cover;display:block}
.s-card .sc-media{aspect-ratio:800/420;overflow:hidden;background:#0a0e18;border-bottom:1px solid var(--line)}
.s-card .sc-media .sc-scene-vid,.s-card .sc-media .sc-scene-img{width:100%;height:100%;object-fit:cover;display:block}
.s-card .sc-body{padding:.85rem 1rem 1rem;display:flex;flex-direction:column;gap:.45rem}
.s-card .sc-meta{color:var(--cyan);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase}
.s-card h3{font-family:var(--serif);font-size:1.2rem;margin:0;line-height:1.15}
.s-card .sc-rate{color:var(--amber2);font-size:.85rem;margin:0}
.s-card .sc-rate i{color:var(--muted);font-style:normal}
.s-card .sc-anno{color:var(--muted);font-size:.88rem;line-height:1.5;margin:0}
.s-card .sc-row{display:flex;gap:.55rem;flex-wrap:wrap;margin-top:.2rem}
.s-card .sc-close{position:absolute;top:.4rem;right:.5rem;z-index:3;width:26px;height:26px;border-radius:50%;
  border:1px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer;font-size:1rem;line-height:1}
.s-card .sc-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:30px;height:44px;
  border:1px solid var(--line);background:rgba(10,15,30,.6);color:var(--amber2);cursor:pointer;font-size:1.3rem;
  display:flex;align-items:center;justify-content:center}
.s-card .sc-nav.prev{left:0;border-radius:0 8px 8px 0}
.s-card .sc-nav.next{right:0;border-radius:8px 0 0 8px}
.s-card .sc-nav:hover,.s-card .sc-close:hover{border-color:var(--amber);color:var(--amber)}

/* полка черновиков (только админ видит) */
.drafts-shelf{margin-top:1.2rem}
.drafts-shelf .ds-head{max-width:1060px;margin:0 auto .2rem;color:var(--muted);font-size:.9rem;
  display:flex;align-items:center;gap:.5rem}
.drafts-shelf .ds-head b{color:var(--amber2);font-weight:600}

html.light .case-board{background:linear-gradient(180deg,#9a6f42,#6b4a29 40%,#4a3420)}
html.light .s-back{background:linear-gradient(180deg,#fdf8ee,#f4ecdb)}
html.light .cc-chip{background:#fbf5e8}
html.light .case-edge.l{background:linear-gradient(270deg,transparent,#faf4e6)}
html.light .case-edge.r{background:linear-gradient(90deg,transparent,#faf4e6)}
@media (prefers-reduced-motion:reduce){.spine.open .s-back,.quote-modal .qm-box{animation:none}}

/* ---------- появление при скролле (только при работающем JS) ---------- */
html.js .reveal{opacity:0;transform:translateY(28px);transition:opacity .9s ease,transform .9s ease}
html.js .reveal.in{opacity:1;transform:none}
html.js .reveal.d1{transition-delay:.12s}
html.js .reveal.d2{transition-delay:.24s}
html.js .reveal.d3{transition-delay:.36s}

/* ---------- читалка ---------- */
.rbar{
  position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:.9rem;
  padding:.55rem clamp(1rem,4vw,2rem);
  background:var(--head-bg);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);font-size:.95rem;
}
.rbar .title{font-family:var(--serif);letter-spacing:.06em}
.rbar .spacer{flex:1}
.rbar button{
  background:transparent;border:1px solid var(--line);color:var(--ink);
  border-radius:8px;padding:.3rem .7rem;font-size:.9rem;cursor:pointer;
}
.rbar button:hover{border-color:var(--amber);color:var(--amber2)}
#progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:20;
  background:linear-gradient(90deg,var(--amber),var(--cyan))}
#resume-bar{position:fixed;left:50%;bottom:1.2rem;transform:translateX(-50%);z-index:30;
  display:flex;align-items:center;gap:.8rem;max-width:92vw;
  background:var(--card);border:1px solid var(--amber);border-radius:12px;
  padding:.7rem 1rem;box-shadow:0 10px 30px rgba(0,0,0,.4);font-size:.92rem;color:var(--ink)}
#resume-bar button{background:var(--amber);color:#22150a;border:none;border-radius:8px;
  padding:.35rem .8rem;cursor:pointer;font-weight:600}
#resume-bar #resume-x{background:transparent;color:var(--muted);padding:.35rem .5rem;font-weight:400}

.reader{max-width:var(--reader-width,46rem);margin:0 auto;padding:3rem 1.3rem 5rem}
.reader h1{font-family:var(--serif);text-align:center;letter-spacing:.3em;text-indent:.3em;
  font-size:clamp(2rem,6vw,3rem);font-weight:600;margin:.5rem 0 .4rem}
.reader .byline{text-align:center;color:var(--muted);margin:0 0 2.6rem;font-style:italic}
.reader article{font-family:var(--serif);font-size:var(--fs);line-height:var(--reader-lh,1.78)}
.reader article p{margin:0 0 .5em;text-indent:1.6em}
.reader article p.noind{text-indent:0}
.reader .scene{margin:2.6rem auto;border-radius:14px;overflow:hidden;
  border:1px solid rgba(36,48,82,.7);box-shadow:0 14px 44px rgba(0,0,0,.45)}
.reader .dates{text-align:right;color:var(--muted);font-style:italic;margin-top:2.4rem}
.reader .afterword{
  margin-top:3rem;padding:1.4rem 1.6rem;border-left:3px solid var(--amber);
  background:rgba(255,180,84,.06);border-radius:0 12px 12px 0;
}
.reader .afterword .lbl{font-family:var(--sans);font-size:.8rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--amber2);margin:0 0 .6rem}
.reader .afterword p{text-indent:0;font-style:italic}
/* картинка к приписке автора: во всю ширину блока, как сцена, но скромнее */
.reader .afterword .aw-img{margin-top:1.1rem;border-radius:10px;overflow:hidden;
  border:1px solid var(--line)}
.reader .afterword .aw-img img{width:100%;height:auto;display:block}
.reader nav.endnav{display:flex;justify-content:space-between;gap:1rem;margin-top:3.5rem;flex-wrap:wrap}

/* ---------- светлая (тёплая) тема — глобально для всего сайта ---------- */
html.light{
  --bg:#f2ead9;
  --bg2:#e8dcc2;
  --ink:#2c2620;
  --muted:#6b5f4c;
  --amber:#b0763a;
  --amber2:#8a5a24;
  --cyan:#2f7d72;
  --line:#d8ccb4;
  --card:#fbf5e8;
  --head-bg:rgba(242,234,217,.9);
}
html.light .nebula,html.light .sky{display:none}
html.light body{background:var(--bg)}
/* шапка теперь берёт фон из --bg (color-mix), отдельный светлый фон не нужен */
html.light .rbar button,html.light .btn.ghost{color:#2c2620;border-color:#c9bda2}
html.light .hero h1{text-shadow:0 0 30px rgba(176,118,58,.2)}
html.light .card{background:linear-gradient(180deg,#fbf5e8,#f2ead9);border-color:#d8ccb4}
html.light .scene,html.light .hero .scene{border-color:#d8ccb4;box-shadow:0 12px 34px rgba(80,60,20,.18)}
html.light .reader .afterword{background:rgba(160,110,40,.1);border-left-color:#b0763a}
html.light #progress{background:linear-gradient(90deg,#b0763a,#2f7d72)}
html.light .btn{color:#fff4e4}

/* ---------- ченджлог ---------- */
.clog{max-width:46rem;margin:0 auto;padding:3rem 1.3rem 4rem}
.clog h1{font-family:var(--serif);font-size:clamp(1.9rem,5vw,2.6rem);margin:.4rem 0 .4rem}
.clog .lead{color:var(--muted);margin:0 0 2rem}
.clog h2{font-family:var(--serif);font-size:1.25rem;color:var(--amber2);
  border-top:1px solid rgba(36,48,82,.6);padding-top:1.4rem;margin:2rem 0 .7rem}
.clog ul{margin:.4rem 0 1rem;padding-left:1.3rem;color:var(--ink)}
.clog li{margin:.3rem 0}
.clog p{color:var(--muted)}
.clog code{background:rgba(36,48,82,.5);padding:.1em .4em;border-radius:6px;font-size:.92em}

/* ---------- прочее ---------- */
.about{max-width:680px;margin:0 auto;padding:1rem 1.2rem 4rem;text-align:center;color:var(--muted)}
.about h2{font-family:var(--serif);color:var(--ink);font-size:1.7rem}
.sep{display:flex;justify-content:center;gap:1rem;color:var(--line);margin:2.5rem 0;font-size:.9rem;letter-spacing:.5em}
footer.site{
  border-top:1px solid rgba(36,48,82,.6);padding:2rem 1.2rem 2.6rem;text-align:center;
  color:var(--muted);font-size:.92rem;
}
footer.site .heart{color:var(--amber)}

/* ---------- авторизация в шапке ---------- */
.auth-slot{display:flex;align-items:center;gap:.5rem}
.auth-name{color:var(--ink);font-weight:600;font-size:.92rem;margin-right:.2rem}
[data-theme-toggle],[data-illus-toggle]{background:transparent;border:1px solid var(--line);color:var(--ink);
  border-radius:8px;width:34px;height:34px;cursor:pointer;font-size:1rem;flex:none}
[data-theme-toggle]:hover,[data-illus-toggle]:hover{border-color:var(--amber);color:var(--amber2)}
[data-illus-toggle].illus-off{border-color:var(--amber);color:var(--muted);opacity:.75}
/* ссылка-иконка Telegram в подвале — по теме */
.tg-link{display:inline-flex;vertical-align:-4px;color:var(--muted);transition:color .2s}
.tg-link:hover{color:var(--amber2)}

/* ---------- комментарии ---------- */
.comments{max-width:46rem;margin:0 auto;padding:2.5rem 1.3rem 1rem}
.comments.wide{max-width:60rem}
.cm-h{font-family:var(--serif);font-size:1.5rem;margin:0 0 1.1rem}
.cm-form{display:flex;flex-direction:column;gap:.6rem;margin-bottom:2rem}
.cm-name,.cm-body{width:100%;background:var(--card);color:var(--ink);
  border:1px solid var(--line);border-radius:10px;padding:.7rem .9rem;font:inherit}
.cm-body{resize:vertical;min-height:3rem;line-height:1.5}
.cm-name:focus,.cm-body:focus{border-color:var(--amber);outline:none}
.cm-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.cm-row{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.cm-msg{color:var(--cyan);font-size:.9rem}
.cm-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1rem}
.cm-item{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:.9rem 1.1rem}
.cm-item.cm-hidden{opacity:.55}
.cm-meta{font-size:.85rem;color:var(--muted);margin-bottom:.35rem}
.cm-meta b{color:var(--ink)}
.cm-reg{color:var(--cyan)}
.cm-flag{color:var(--amber);font-style:normal}
.cm-text{line-height:1.55}
.cm-actions{margin-top:.5rem;display:flex;gap:.5rem;flex-wrap:wrap}
.cm-actions button,.cm-a{background:transparent;border:1px solid var(--line);color:var(--muted);
  border-radius:7px;padding:.2rem .6rem;font-size:.82rem;cursor:pointer}
.cm-actions button:hover,.cm-a:hover{border-color:var(--amber);color:var(--amber2)}
.cm-empty{color:var(--muted);font-style:italic}
.cm-list{display:block}
.cm-children{margin-top:.8rem;display:flex;flex-direction:column;gap:.8rem;
  border-left:2px solid var(--line);padding-left:.9rem}
.cm-item{margin-bottom:.8rem}
.cm-item .cm-item{margin-bottom:0}
.cm-reply-slot:not(:empty){margin-top:.7rem}
.cm-reply-slot .cm-form,.cm-composer .cm-form{margin-bottom:0}
.cm-edited{color:var(--muted);font-style:italic;font-size:.85em}
.cm-editbox{width:100%}
.cm-composer{margin-bottom:1.6rem}

/* ---------- формы авторизации / кабинет / админка ---------- */
.form-page{max-width:24rem;margin:0 auto;padding:3.5rem 1.3rem}
.form-page.wide{max-width:60rem}
.form-page h1{font-family:var(--serif);font-size:2rem;text-align:center;margin:0 0 1.6rem}
.field{display:flex;flex-direction:column;gap:.3rem;margin-bottom:1rem}
.field label{font-size:.85rem;color:var(--muted)}
.field input,.field select{background:var(--card);color:var(--ink);border:1px solid var(--line);
  border-radius:10px;padding:.7rem .9rem;font:inherit}
.field input:focus,.field select:focus{border-color:var(--amber);outline:none}
.form-msg{min-height:1.2rem;color:var(--amber);font-size:.9rem;margin:.2rem 0 .8rem}
.form-page .btn{width:100%}
.form-alt{text-align:center;color:var(--muted);margin-top:1.2rem;font-size:.92rem}

/* карточки статистики */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem;margin:1.5rem 0}
.stat-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:1.1rem 1.2rem}
.stat-card .num{font-size:2rem;font-weight:700;color:var(--amber2);font-family:var(--serif)}
.stat-card .lbl{color:var(--muted);font-size:.85rem;margin-top:.2rem}
.stat-card.clickable{cursor:pointer;transition:border-color .2s,transform .2s}
.stat-card.clickable:hover{border-color:var(--amber);transform:translateY(-2px)}
.stat-card.clickable::after{content:"📈";position:absolute;top:.4rem;right:.5rem;font-size:.7rem;opacity:.5}
.stat-card{position:relative}
.linechart{background:var(--card);border:1px solid var(--line);border-radius:12px}
.admin-sec{margin:2.5rem 0}
.admin-sec h2{font-family:var(--serif);font-size:1.4rem;border-bottom:1px solid var(--line);
  padding-bottom:.5rem;margin-bottom:1rem}
table.grid{width:100%;border-collapse:collapse;font-size:.9rem}
table.grid th,table.grid td{text-align:left;padding:.5rem .6rem;border-bottom:1px solid var(--line)}
table.grid th{color:var(--muted);font-weight:600}
.bar{height:8px;background:var(--line);border-radius:5px;overflow:hidden}
.bar>i{display:block;height:100%;background:linear-gradient(90deg,var(--amber),var(--cyan))}
.spark{display:flex;align-items:flex-end;gap:2px;height:60px}
.spark>i{flex:1;background:var(--amber);border-radius:2px 2px 0 0;min-height:2px;opacity:.8}
.chip{display:inline-block;background:var(--card);border:1px solid var(--line);border-radius:999px;
  padding:.15rem .6rem;font-size:.8rem;margin:.15rem}
.upload-drop{display:block;border:2px dashed var(--line);border-radius:14px;padding:1.6rem 1rem;
  text-align:center;color:var(--muted);cursor:pointer;margin:.5rem 0}
.upload-drop small{display:block;margin-top:.4rem;opacity:.8}
.upload-drop:hover{border-color:var(--amber);color:var(--amber2)}

/* блочный редактор книги */
.be-block{background:var(--bg2);border:1px solid var(--line);border-radius:10px;
  padding:.6rem .7rem;margin:.5rem 0}
.be-ctrl{display:flex;align-items:center;gap:.4rem;margin-bottom:.4rem}
.be-tag{font-size:.75rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-right:auto}
.be-ctrl button{background:transparent;border:1px solid var(--line);color:var(--muted);
  border-radius:6px;padding:.1rem .5rem;cursor:pointer;font-size:.9rem}
.be-ctrl button:hover{border-color:var(--amber);color:var(--amber2)}
.be-text{width:100%;font-family:var(--serif);line-height:1.55}
.be-imgrow{display:flex;gap:.7rem;align-items:center;flex-wrap:wrap}
.be-thumb{width:120px;height:auto;border-radius:8px;border:1px solid var(--line)}
.be-alt{flex:1;min-width:12rem;background:var(--card);color:var(--ink);
  border:1px solid var(--line);border-radius:8px;padding:.4rem .6rem;font:inherit}
.be-add{display:flex;gap:.5rem;flex-wrap:wrap;margin:.8rem 0}
.be-add button{background:transparent;border:1px solid var(--line);color:var(--ink);
  border-radius:8px;padding:.35rem .8rem;cursor:pointer;font-size:.88rem}
.be-add button:hover{border-color:var(--amber);color:var(--amber2)}
.rights label{margin-right:1rem;font-size:.85rem;color:var(--ink)}
.clog-full{max-height:420px;overflow-y:auto;border:1px solid var(--line);border-radius:12px;
  padding:1rem 1.2rem;background:var(--card);font-size:.9rem}
.clog-full h3{font-family:var(--serif);color:var(--amber2);margin:1rem 0 .4rem;font-size:1.05rem}
.clog-full h3:first-child{margin-top:0}
.clog-full ul{margin:.3rem 0 .8rem;padding-left:1.2rem}
.clog-full li{margin:.2rem 0}
.clog-full code{background:var(--bg2);padding:.1em .4em;border-radius:5px}
.us-box{background:var(--bg2);border-radius:10px;padding:.8rem 1rem;margin:.3rem 0}
.us-detail td{background:transparent}
.us-more{background:transparent;border:1px solid var(--line);color:var(--muted);
  border-radius:7px;padding:.2rem .6rem;font-size:.82rem;cursor:pointer}
.us-more:hover{border-color:var(--amber);color:var(--amber2)}
.us-anon{background:rgba(255,180,84,.08)}
.us-anon td{font-style:italic}
.pager{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;margin:.6rem 0}
.pager select{background:var(--card);color:var(--ink);border:1px solid var(--line);
  border-radius:7px;padding:.2rem .4rem;margin-left:.3rem}
.pager button{background:transparent;border:1px solid var(--line);color:var(--ink);
  border-radius:7px;padding:.25rem .7rem;cursor:pointer}
.pager button:disabled{opacity:.4;cursor:default}
.pager button:not(:disabled):hover{border-color:var(--amber);color:var(--amber2)}
.pager .pg-info{color:var(--muted);font-size:.85rem}
.pager .s-f.on{background:var(--amber);color:#22150a;border-color:var(--amber)}
.tab-badge{display:inline-block;margin-left:.4rem;background:var(--amber);color:#22150a;
  border-radius:999px;padding:0 .45rem;font-size:.75rem;font-weight:700}
.sub-preview{max-height:320px;overflow-y:auto;background:var(--bg2);border-radius:10px;
  padding:.8rem 1rem;margin-top:.6rem;font-family:var(--serif)}
.sub-preview p{margin:.3rem 0}
.body-edit{width:100%;font-family:var(--serif);line-height:1.6}

/* вкладки (админка и кабинет) */
.tabs{display:flex;gap:.5rem;flex-wrap:wrap;margin:1.5rem 0}
.tabs button{background:transparent;border:1px solid var(--line);color:var(--ink);
  border-radius:999px;padding:.4rem 1rem;cursor:pointer;font:inherit}
.tabs button.on{background:var(--amber);color:#22150a;border-color:var(--amber)}
.tab{display:none}.tab.on{display:block}

/* цепочки ответов «Ответы мне» в кабинете */
.reply-chain{background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:.6rem .9rem;margin-bottom:1rem}
.chain-item{padding:.4rem .2rem;border-left:2px solid var(--line);padding-left:.7rem;margin:.3rem 0}
.chain-item.mine{border-left-color:var(--amber)}
.chain-item.tail{border-left-color:var(--cyan)}
.chain-item .who{font-size:.85rem;color:var(--muted)}
.chain-item .who b{color:var(--ink)}
.chain-link{font-size:.85rem}
.shelf-h{font-family:var(--serif);font-size:1.1rem;color:var(--amber2);margin:1.2rem 0 .5rem}
.shelf-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem}
.shelf-list li{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.shelf-actions{display:inline-flex;gap:.4rem;margin-left:auto}
.shelf-actions button{background:transparent;border:1px solid var(--line);color:var(--muted);
  border-radius:7px;padding:.15rem .55rem;font-size:.8rem;cursor:pointer}
.shelf-actions button:hover{border-color:var(--amber);color:var(--amber2)}

/* ---------- адаптив: планшет (портрет и ландшафт — читаемая ширина) ---------- */
/* На планшетах колонка читалки шире и базовый шрифт крупнее, чтобы не зумить */
@media (min-width:600px) and (max-width:1200px){
  .reader{max-width:min(52rem,84vw)}
  .comments{max-width:min(52rem,88vw)}
  :root{--fs:1.3rem}
  .reader article{font-size:calc(var(--fs) * 1.05)}
}
/* Планшет-ландшафт: не растягивать строку сверх комфортной длины, но крупнее */
@media (min-width:900px) and (max-width:1200px) and (orientation:landscape){
  .reader{max-width:44rem}
  .reader article{font-size:calc(var(--fs) * 1.12)}
}

@media (max-width:720px){
  /* Шапка на телефоне: логотип слева, остальное аккуратно переносится */
  .top{flex-wrap:wrap;gap:.45rem .5rem;padding:.5rem .8rem}
  .top .crumb{display:none}
  .top .mark{font-size:.95rem}
  /* имя и кнопки «Кабинет»/«Админка» — в одну строку (не переносим имя отдельно) */
  .auth-slot{flex-wrap:nowrap;gap:.4rem;min-width:0}
  .auth-name{font-size:.85rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
  .top .btn.small,.auth-slot .btn.small{padding:.4rem .7rem;font-size:.85rem;white-space:nowrap}
  [data-theme-toggle]{width:38px;height:38px}
}
@media (max-width:640px){
  .hero{min-height:70vh;padding:3rem .9rem 2.5rem}
  /* узкие экраны: убираем широкий трекинг заголовков — иначе распирает вёрстку */
  .hero h1{font-size:clamp(2rem,12vw,3rem);letter-spacing:.08em;text-indent:.08em}
  .reader h1{letter-spacing:.12em;text-indent:.12em;font-size:clamp(1.8rem,9vw,2.6rem)}
  .hero .kicker,.panel .num{letter-spacing:.12em;font-size:.66rem}
  .panel h2,.cm-h{overflow-wrap:break-word}
  .hero .sub,.panel p{max-width:100%}
  .hero .actions{width:100%}
  .hero .actions .btn{flex:1 1 auto;text-align:center}
  .rbar{gap:.5rem;padding:.5rem .7rem}
  .rbar .title{font-size:.88rem}
  .rbar button{padding:.35rem .55rem}
  .comments,.reader{padding-left:1rem;padding-right:1rem}
  .cm-row{flex-direction:column;align-items:stretch;gap:.5rem}
  .cm-row .btn{width:100%}
  .stat-grid{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}
  .admin-sec{overflow-x:auto}
  table.grid{font-size:.82rem}
  table.grid th,table.grid td{padding:.4rem .35rem}
}
/* ---------- оглавление читалки (выезжает из-под шапки) ---------- */
.toc{
  position:fixed;top:52px;right:.8rem;z-index:40;max-width:min(22rem,86vw);
  max-height:70vh;overflow-y:auto;background:rgba(12,17,32,.98);
  border:1px solid var(--line);border-radius:14px;padding:.9rem 1rem;
  box-shadow:0 14px 40px rgba(0,0,0,.5);
  display:none}
/* показываем через display, а не opacity: панель не должна «залипать»
   полупрозрачной, если анимации отключены или браузер не успел отрисовать */
.toc.on{display:block;animation:toc-in .2s ease both}
@keyframes toc-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.toc-h{margin:0 0 .5rem;font-family:var(--serif);letter-spacing:.14em;
  text-transform:uppercase;font-size:.72rem;color:var(--muted)}
.toc ol{margin:0;padding-left:1.3rem}
.toc li{margin:.35rem 0}
.toc a{color:var(--ink);text-decoration:none;font-size:.95rem;line-height:1.35}
.toc a:hover{color:var(--amber2)}
.toc a.on{color:var(--amber);font-weight:600}
html.light .toc{background:rgba(242,234,217,.99)}

/* ---------- жанры/теги: чипы-фильтры полки и метки на карточках ---------- */
/* панель фильтров (v0.137): скрыта, пока не нажата «⚲ Фильтры» */
.shelf-filters-panel{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;max-width:1060px;
  margin:-.6rem auto 1.4rem;padding:.7rem .8rem;border:1px dashed var(--line);border-radius:12px}
.shelf-filters-panel .shelf-tags{margin:0}
#shelf-filters{position:relative}
#shelf-filters[aria-expanded="true"]{border-color:var(--amber);color:var(--amber2)}
#shelf-filters .flt-n{display:inline-block;min-width:1.2em;margin-left:.35em;padding:0 .3em;border-radius:999px;
  background:var(--amber);color:#22150a;font-size:.78em;line-height:1.35;text-align:center}
#shelf-filters .flt-n[hidden]{display:none}
/* подборки под полкой — тоже фильтры: без раскрытой панели не показываем */
.shelf:not(.filters-open) .case-collections{display:none}
.shelf-tags{display:flex;flex-wrap:wrap;gap:.4rem;max-width:1060px;margin:-.8rem auto 1.6rem}
.tag-btn{background:transparent;border:1px solid var(--line);color:var(--muted);
  border-radius:999px;padding:.28rem .8rem;font:inherit;font-size:.85rem;cursor:pointer;
  transition:border-color .2s,color .2s,background .2s}
.tag-btn i{font-style:normal;opacity:.6;font-size:.78em}
.tag-btn[style*="--cc"]::before{content:"";display:inline-block;width:9px;height:9px;border-radius:50%;
  background:var(--cc);margin-right:.42rem;vertical-align:-1px;box-shadow:0 0 0 1px rgba(0,0,0,.25) inset}
.tag-btn:hover{border-color:var(--cc,var(--amber));color:var(--amber2)}
.tag-btn.on{background:var(--cc,var(--amber));border-color:var(--cc,var(--amber));color:#0a0f1e}
.tag-btn.on::before{box-shadow:0 0 0 1px rgba(255,255,255,.55) inset}
.tag-btn.on i{opacity:.75}
.card-tags{display:flex;flex-wrap:wrap;gap:.3rem;margin:.1rem 0 .5rem}
.tag{display:inline-block;border:1px solid var(--line);border-radius:999px;
  padding:.1rem .55rem;font-size:.76rem;color:var(--muted);text-decoration:none}
a.tag:hover{border-color:var(--amber);color:var(--amber2)}
.finished{color:var(--amber2);font-size:.9rem;margin:.4rem 0 0}

/* ---------- оценка книги: звёзды и слово автору ---------- */
.rt-box{max-width:46rem;margin:2.2rem auto 0;background:var(--card);
  border:1px solid var(--line);border-radius:16px;padding:1.1rem 1.2rem}
.rt-head{display:flex;align-items:baseline;gap:.8rem;flex-wrap:wrap}
.rt-head h3{margin:0;font-family:var(--serif);font-size:1.1rem;letter-spacing:.04em}
.rt-avg{color:var(--amber2);font-size:.95rem}
.rt-avg i{font-style:normal;color:var(--muted);font-size:.85em}
.rt-avg.rt-none{color:var(--muted)}
.rt-stars{display:flex;gap:.15rem;margin:.5rem 0 .7rem}
.rt-star{background:transparent;border:none;cursor:pointer;padding:0 .1rem;
  font-size:1.9rem;line-height:1;color:var(--line);transition:color .15s,transform .15s}
.rt-star:hover{transform:scale(1.12)}
.rt-star.on{color:var(--amber)}
.rt-lbl{display:block;font-size:.85rem;color:var(--ink);margin-bottom:.3rem}
.rt-lbl i{font-style:normal;color:var(--muted)}
.rt-review{width:100%;background:rgba(0,0,0,.15);color:var(--ink);
  border:1px solid var(--line);border-radius:10px;padding:.6rem .8rem;font:inherit;
  font-size:.95rem;resize:vertical}
.rt-review:focus{border-color:var(--amber);outline:none}
.rt-row{display:flex;align-items:center;gap:.6rem;margin-top:.6rem;flex-wrap:wrap}
.rt-msg{flex:1;color:var(--muted);font-size:.88rem}
.rt-msg.rt-err{color:#ff9a8b}
.card-rate{color:var(--amber2);font-size:.82rem;margin:.1rem 0 .3rem}
.card-series{color:var(--muted);font-size:.8rem;margin:.1rem 0 .2rem;letter-spacing:.04em}
.series-list{margin:.4rem 0 0;padding-left:1.2rem}
.series-list li{margin:.4rem 0}
/* другие книги цикла — явно кликабельны: подчёркнуты и подсвечиваются наведением */
.series-list li a{color:var(--amber2);text-decoration:none;font-weight:600;
  border-bottom:1px solid rgba(255,180,84,.45);padding-bottom:1px;transition:border-color .15s,color .15s}
.series-list li a:hover{color:var(--amber);border-bottom-color:var(--amber)}
.series-list li a::after{content:" →";opacity:.5;font-weight:400}
.series-list li.on{color:var(--amber2);list-style:none;margin-left:-1.2rem}
.series-list li.on i{color:var(--muted);font-style:normal;font-size:.85em}
.card-rate i{font-style:normal;color:var(--muted)}
html.light .rt-review{background:rgba(255,255,255,.6)}

/* админка: строка загрузки обложки и ряды кнопок */
.cover-row,.btn-row{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin-top:.4rem}
.cover-row button{background:transparent;border:1px solid var(--line);color:var(--ink);
  border-radius:8px;padding:.35rem .7rem;font:inherit;font-size:.85rem;cursor:pointer}
.cover-row button:hover{border-color:var(--amber);color:var(--amber2)}
.cover-msg{color:var(--muted);font-size:.85rem}
.ab-text{width:100%;background:rgba(0,0,0,.15);color:var(--ink);border:1px solid var(--line);
  border-radius:10px;padding:.7rem .9rem;font:inherit;font-size:.95rem;resize:vertical}
.ab-text:focus{border-color:var(--amber);outline:none}
html.light .ab-text{background:rgba(255,255,255,.6)}
/* Список книг в админке: свёрнутые строки, разворачиваются по шапке.
   Шапка — flex-строка; «Открыть» прижата вправо и НЕ растягивается
   (без flex:0 0 auto кнопка в переносящейся строке занимала всю ширину). */
#blist .book-head{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;
  cursor:pointer;user-select:none;padding:.15rem 0}
#blist .book-head:hover .book-caret{color:var(--amber2)}
#blist .book-head:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:8px}
#blist .book-caret{color:var(--muted);width:1em;flex:0 0 auto;transition:color .2s}
#blist .book-head .b-open{margin-left:auto;flex:0 0 auto;width:auto;align-self:center;
  white-space:nowrap;padding:.3rem .8rem;font-size:.85rem}
#blist .book-row.open{border-color:rgba(214,163,74,.45)}
#blist .book-body{margin-top:.6rem;border-top:1px solid var(--line);padding-top:.7rem}

/* правка картинки в редакторе: подпись и кнопки рядом с миниатюрой */
.be-imgedit{flex:1;min-width:12rem}
.be-imgedit .btn-row{margin-top:.35rem}
.be-imgedit .btn-row button{background:transparent;border:1px solid var(--line);
  color:var(--ink);border-radius:8px;padding:.25rem .6rem;font:inherit;font-size:.8rem;cursor:pointer}
.be-imgedit .btn-row button:hover{border-color:var(--amber);color:var(--amber2)}
.be-src-link{color:var(--muted);font-size:.78rem;text-decoration:none;align-self:center}
.be-src-link:hover{color:var(--amber2)}
.be-undo:disabled{opacity:.45;cursor:default}

/* предпросмотр редактора: та же типографика, что у читателя, но в рамке */
.be-preview-box{margin-top:1rem;border:1px dashed var(--line);border-radius:14px;
  padding:.6rem 1rem 1.2rem;background:rgba(0,0,0,.12)}
.be-preview-note{color:var(--muted);font-size:.85rem;margin:.4rem 0 .8rem}
/* размер шрифта не ужимаем: «1 в 1» значит 1 в 1 */
.be-reader{max-width:none;padding:0;margin:0}
html.light .be-preview-box{background:rgba(255,255,255,.45)}
.dg-text{white-space:pre-wrap;background:rgba(0,0,0,.18);border:1px solid var(--line);
  border-radius:12px;padding:1rem;margin-top:.8rem;font-family:inherit;font-size:.9rem;
  line-height:1.5;overflow-x:auto}
html.light .dg-text{background:rgba(255,255,255,.55)}
.cover-prev{height:44px;border-radius:6px;border:1px solid var(--line)}
/* превью обложки и картинки приписки в админке: видно, что за кадр,
   и по клику открывается во весь экран */
.prev-img{height:96px;width:auto;border-radius:8px;border:1px solid var(--line);
  cursor:zoom-in;background:var(--card);object-fit:cover}
.prev-img:hover{border-color:var(--amber)}

/* ---------- всплывающая подсказка (копирование ссылки и т.п.) ---------- */
.books-toast{
  position:fixed;left:50%;bottom:1.6rem;transform:translate(-50%,12px);
  background:rgba(12,17,32,.96);color:#f2ead9;border:1px solid rgba(214,163,74,.5);
  border-radius:10px;padding:.6rem 1rem;font-size:.9rem;z-index:99;
  opacity:0;transition:opacity .25s ease,transform .25s ease;pointer-events:none;
  box-shadow:0 8px 26px rgba(0,0,0,.4);
  max-width:min(90vw,32rem);text-align:center;overflow-wrap:anywhere}
.books-toast.in{opacity:1;transform:translate(-50%,0)}
html.light .books-toast{background:rgba(46,38,28,.96)}

/* ---------- печать читалки: только текст, по-книжному ---------- */
@media print{
  .nebula,.sky,#progress,.rbar,.top,.comments,footer.site,
  .reader nav.endnav,.scroll-hint,.books-toast,[data-rating],.toc,
  .book-actions-wrap{display:none !important}
  html,body{background:#fff !important;color:#111 !important}
  .reader{max-width:none;margin:0;padding:0}
  .reader article{font-size:12pt;line-height:1.5;color:#111}
  .reader h1{color:#111;letter-spacing:.1em;text-indent:.1em;font-size:20pt;margin:0 0 .6rem}
  .reader .byline{color:#444}
  .reader .afterword{background:none;border-left:2px solid #999;color:#111}
  .reader .scene{border:none;box-shadow:none;break-inside:avoid;max-width:14cm}
  .reader article p{orphans:3;widows:3}
  a[href]{color:#111;text-decoration:none}
  @page{margin:2cm 1.8cm}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  html.js .reveal{opacity:1;transform:none;transition:none}
  .scroll-hint{animation:none}
  .toc.on{animation:none}
  .btn,.card{transition:none}
}

/* тумблеры настроек (кабинет читателя, админка) */
.rd-opt{display:flex;align-items:center;gap:.5rem;cursor:pointer}
.rd-hint{color:var(--muted);font-size:.85rem;margin:.4rem 0 0}

/* «Настроение книг»: акцент сайта берётся из обложки (--amber/--amber2/--cyan
   подменяет app.js). Плавная смена цвета + мягкий подтон фона на странице книги.
   По умолчанию режим выключен — data-mood не ставится, всё как обычно. */
html[data-mood] a,html[data-mood] .top .mark b,html[data-mood] .hero .kicker,
html[data-mood] .card .meta,html[data-mood] .panel .num,html[data-mood] .btn,
html[data-mood] .btn.ghost,html[data-mood] .rbar button,html[data-mood] .chip{
  transition:color .5s,background .5s,border-color .5s}
html[data-mood="book"] body{
  background:radial-gradient(78vw 56vh at 50% -12%,
    color-mix(in srgb, var(--mood-glow,#3a4a78) 22%, transparent), transparent 72%),
    var(--bg)}
@media (prefers-reduced-motion:reduce){html[data-mood] *{transition:none}}

/* ── «Характер» книги (data-mood-kind): фактура фона + типографика меток/заголовков.
   Ставится только когда «настроение» активно на странице книги; даёт разнообразие
   сверх цвета. Всё на CSS, без внешних шрифтов и картинок (кроме крошечного SVG-зерна). */
html[data-mood-kind] .nebula{transition:opacity .5s,background .5s}
html[data-mood-kind] .hero h1,html[data-mood-kind] .panel h2,
html[data-mood-kind] .reader h1,html[data-mood-kind] .reader h2{font-family:var(--mood-head,var(--serif))}

/* Сказка — тёплые акварельные разводы, мягкая округлая антиква (Palatino) */
html[data-mood-kind="storybook"]{--mood-head:"Palatino Linotype","Book Antiqua",Palatino,Georgia,serif}
html[data-mood-kind="storybook"] .nebula{opacity:1;filter:blur(5px);
  background:
    radial-gradient(38vw 32vw at 16% 14%, color-mix(in srgb,var(--mood-glow) 30%,transparent), transparent 66%),
    radial-gradient(44vw 38vw at 84% 82%, color-mix(in srgb,var(--mood-glow) 22%,transparent), transparent 70%),
    radial-gradient(28vw 24vw at 72% 22%, color-mix(in srgb,var(--mood-glow) 15%,transparent), transparent 72%)}
html[data-mood-kind="storybook"] .reader{letter-spacing:.004em}

/* Плёнка (сепийная быль) — зерно + виньетка, машинописные метки */
html[data-mood-kind="film"]{--mood-eyebrow:"Courier New",Courier,monospace}
html[data-mood-kind="film"] .nebula{opacity:.6;background-size:cover,150px 150px;
  background:
    radial-gradient(122% 94% at 50% 44%, transparent 56%, rgba(0,0,0,.5) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.45'/%3E%3C/svg%3E")}
html[data-mood-kind="film"] .hero .kicker,html[data-mood-kind="film"] .panel .num,
html[data-mood-kind="film"] .card .meta,html[data-mood-kind="film"] .reader .byline{
  font-family:var(--mood-eyebrow);letter-spacing:.03em;text-transform:none}

/* Тех (сай-фай) — тонкая сетка + верхнее свечение, широкий капслок, заголовки без засечек */
html[data-mood-kind="tech"]{--mood-head:"Trebuchet MS","Segoe UI",system-ui,sans-serif}
html[data-mood-kind="tech"] .nebula{opacity:.7;
  background:
    radial-gradient(58vw 46vh at 50% -6%, color-mix(in srgb,var(--mood-glow) 26%,transparent), transparent 66%),
    linear-gradient(color-mix(in srgb,var(--mood-glow) 12%,transparent) 1px, transparent 1px) 0 0/100% 3.4rem,
    linear-gradient(90deg, color-mix(in srgb,var(--mood-glow) 8%,transparent) 1px, transparent 1px) 0 0/3.4rem 100%}
html[data-mood-kind="tech"] .hero .kicker,html[data-mood-kind="tech"] .panel .num{letter-spacing:.42em}

/* Клиника (казённая сатира) — бледные горизонтальные линии, суховатая ровная типографика */
html[data-mood-kind="clinic"] .nebula{opacity:.5;
  background:repeating-linear-gradient(0deg, color-mix(in srgb,var(--mood-glow) 9%,transparent) 0 1px, transparent 1px 2.1rem)}
html[data-mood-kind="clinic"] .hero .kicker,html[data-mood-kind="clinic"] .panel .num,
html[data-mood-kind="clinic"] .card .meta{letter-spacing:.14em}

@media (prefers-reduced-motion:reduce){html[data-mood-kind] .nebula{transition:none}}

/* ==================================================================
   v0.52 — тумблер иллюстраций, голоса/гейтинг комментариев,
   лента обсуждений, страница «что даёт регистрация», календарь.
   ================================================================== */

/* ── Тумблер иллюстраций (#1): html.no-illus прячет всю графику ── */
[data-illus-toggle].illus-off{opacity:.5}
html.no-illus .scene,
html.no-illus .hero .scene,
html.no-illus .panel .scene,
html.no-illus .reader .scene,
html.no-illus .card .cover img,
html.no-illus .cover-none,
html.no-illus .aw-img,
html.no-illus .cover img{display:none !important}
/* карточка без обложки не должна зиять пустотой */
html.no-illus .card .cover{aspect-ratio:auto;border-bottom:0;min-height:0}

/* ── Действия под комментарием (#5, #8): слева обсуждение, справа модерация ── */
.cm-actions{align-items:center}
.cm-actions-left{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
.cm-mod{margin-left:auto;display:flex;gap:.5rem;flex-wrap:wrap;
  padding-left:.7rem;border-left:1px dashed var(--line)}
.cm-a-danger:hover{border-color:#e5657a;color:#ff8b9f}
.cm-votes{display:inline-flex;gap:.35rem}
.cm-vote{background:transparent;border:1px solid var(--line);color:var(--muted);
  border-radius:7px;padding:.2rem .55rem;font-size:.82rem;cursor:pointer;line-height:1}
.cm-vote b{font-weight:600}
.cm-vote:hover{border-color:var(--amber);color:var(--amber2)}
.cm-vote.r-like.on{border-color:#5fbf7a;color:#7fd898}
.cm-vote.r-heart.on{border-color:#e5657a;color:#ff8b9f}
.cm-vote.r-cry.on{border-color:#6f9fd6;color:#9fc2ee}
.cm-vote.r-dislike.on{border-color:#c9a05a;color:#e0c089}

/* ── Приглашение зарегистрироваться (#10) ── */
.cm-join{background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:1rem 1.1rem;margin:.4rem 0 1.4rem}
.cm-join p{margin:0 0 .7rem;color:var(--muted)}
.cm-join-row{display:flex;gap:.6rem;flex-wrap:wrap}

/* ── Лента обсуждений (#11) на главной и странице /discussions/ ── */
.disc-teaser{max-width:60rem;margin:0 auto;padding:1rem 1.3rem}
.disc-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.disc-head h2{font-family:var(--serif);margin:0}
.disc-list{list-style:none;margin:1rem 0 0;padding:0;display:flex;flex-direction:column;gap:.6rem}
.disc-item{background:var(--card);border:1px solid var(--line);border-radius:10px;
  padding:.6rem .85rem;display:flex;flex-direction:column;gap:.15rem}
.disc-item.cm-hidden{opacity:.55}
.disc-book{font-family:var(--serif);color:var(--amber2);font-size:.95rem}
.disc-body{color:var(--ink);font-size:.95rem;line-height:1.45}
.disc-meta{color:var(--muted);font-size:.8rem}
/* компактный тизер на главной: плотнее и короче, чем страница обсуждений */
.disc-teaser .disc-list{gap:.4rem;margin-top:.7rem}
.disc-teaser .disc-item{padding:.4rem .7rem;gap:.05rem}
.disc-teaser .disc-book{font-size:.85rem}
.disc-teaser .disc-body{font-size:.86rem;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.disc-teaser .disc-meta{font-size:.72rem}
.disc-page{max-width:52rem}
.disc-page .disc-list{margin-top:1.4rem}

/* ── Страница «Что даёт регистрация» (#12) ── */
.join-page{max-width:40rem}
.join-page .sub{color:var(--muted);text-align:center;margin:-.6rem auto 1.6rem;max-width:34rem}
.perks{list-style:none;margin:0 0 1.8rem;padding:0;display:flex;flex-direction:column;gap:.7rem}
.perks li{background:var(--card);border:1px solid var(--line);border-radius:10px;
  padding:.75rem .95rem;line-height:1.5;color:var(--muted)}
.perks li b{color:var(--ink);font-weight:600}
.join-page .actions{display:flex;gap:.7rem;flex-wrap:wrap;justify-content:center}

/* ── Календарь публикаций в админке (#2) ── */
.cal-month{font-family:var(--serif);color:var(--amber2);margin:1.1rem 0 .4rem;font-size:1.05rem}
.cal-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.4rem}
.cal-row{display:flex;align-items:baseline;gap:.7rem;background:var(--card);
  border:1px solid var(--line);border-radius:9px;padding:.5rem .8rem;flex-wrap:wrap}
.cal-when{color:var(--muted);font-size:.85rem;min-width:9.5rem;font-variant-numeric:tabular-nums}
.cal-title{font-family:var(--serif);color:var(--ink);flex:1}
.cal-tag{font-size:.78rem;color:var(--amber);border:1px solid var(--line);
  border-radius:20px;padding:.1rem .55rem}
/* ── Сетка-календарь публикаций ── */
.cal-head{display:flex;align-items:center;gap:.7rem;margin:.2rem 0 .7rem;flex-wrap:wrap}
.cal-head b{font-family:var(--serif);font-size:1.1rem;color:var(--amber2);min-width:9rem;text-align:center}
.cal-legend{color:var(--muted);font-size:.8rem;margin-left:auto;display:inline-flex;align-items:center;gap:.35rem}
.cal-legend .cal-ev{display:inline-block;width:12px;height:12px;padding:0;border-radius:3px;vertical-align:-2px}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.cal-dow{color:var(--muted);font-size:.75rem;text-align:center;padding:.2rem 0}
.cal-cell{min-height:66px;border:1px solid var(--line);border-radius:7px;background:var(--card);
  padding:.25rem;display:flex;flex-direction:column;gap:2px;overflow:hidden}
.cal-cell.cal-empty{background:transparent;border-color:transparent}
.cal-cell.cal-today{border-color:var(--amber);box-shadow:0 0 0 1px var(--amber) inset}
.cal-cell.cal-has{background:linear-gradient(180deg,rgba(255,180,84,.06),var(--card))}
.cal-num{color:var(--muted);font-size:.72rem;font-variant-numeric:tabular-nums}
.cal-ev{font-size:.62rem;line-height:1.2;color:#22150a;border-radius:3px;padding:.05rem .25rem;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cal-ev.cal-out{background:var(--cyan)}
.cal-ev.cal-plan{background:var(--amber)}
.cal-sched{display:inline-flex;gap:.4rem;align-items:center;flex-wrap:wrap;margin-left:auto}
@media (max-width:560px){.cal-cell{min-height:52px}.cal-ev{font-size:.55rem}}

/* ── Кабинет: к чему оставлен комментарий (#7) ── */
.chain-where{margin:0 0 .5rem}
.chain-where a{font-family:var(--serif);color:var(--amber2);font-size:.95rem}

/* ── «Как меня читают»: тёплое письмо автору (v0.58) ── */
.letter .stat-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:.8rem;margin:1rem 0 1.4rem}
.letter-lead{color:var(--muted);font-size:1.02rem;line-height:1.6;max-width:44rem}
.letter h3{font-family:var(--serif);margin:1.3rem 0 .5rem}
.letter-top{margin:.2rem 0 0;padding-left:1.1rem;line-height:1.7}
.letter-top b{color:var(--ink)}
.letter-review{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--amber);
  border-radius:10px;margin:.6rem 0;padding:.7rem .95rem;line-height:1.55}
.letter-review .rt-stars-static{color:var(--amber);letter-spacing:.05em}
.letter-review cite{display:block;margin-top:.35rem;color:var(--muted);font-size:.85rem;font-style:normal}
.letter-foot{margin-top:1.5rem;color:var(--muted);line-height:1.6}
.letter-foot i{color:var(--amber2)}
/* письмо автору: месячная строка, спарклайн, карусель отзывов, отправка в TG */
.letter-month{margin:.2rem 0 .4rem;font-size:1.02rem;line-height:1.6}
.letter-month b{color:var(--amber2)}
.letter-spark{display:flex;align-items:flex-end;gap:4px;height:52px;margin:.4rem 0 .2rem}
.letter-spark i{flex:0 0 auto;width:12px;min-height:6px;border-radius:3px 3px 0 0;
  background:linear-gradient(180deg,var(--amber),color-mix(in srgb,var(--amber) 40%,transparent))}
.letter-spark .ls-cap{align-self:center;margin-left:.5rem;color:var(--muted);font-size:.8rem}
.letter-carousel{position:relative}
.letter-carousel .letter-review{display:none}
.letter-carousel .letter-review.on{display:block;animation:coFade .3s ease}
.lc-dots{display:flex;gap:.4rem;justify-content:center;margin:.5rem 0 0}
.lc-dot{width:9px;height:9px;padding:0;border-radius:50%;border:1px solid var(--line);
  background:transparent;cursor:pointer}
.lc-dot.on{background:var(--amber);border-color:var(--amber)}
.letter-send{margin:1.2rem 0 .2rem;display:flex;align-items:center;gap:.7rem;flex-wrap:wrap}
.letter-send-msg{font-size:.88rem;color:var(--muted)}

/* ── Афоризмы Тупенького: карточка справа над hero (v0.60) ──
   В ПОТОКЕ, а не поверх контента: раньше position:absolute накладывал большой
   афоризм на огромный центрированный заголовок (наезд на «Книжная полка» на
   планшете/ПК). Теперь карточка прижата вправо и резервирует место — hero всегда
   ниже, наложения нет ни на какой ширине. */
.aphorism{margin:.4rem clamp(1rem,4vw,2.4rem) -.4rem auto;max-width:20rem;z-index:5;
  background:var(--card);border:1px solid var(--line);
  border-right:3px solid var(--amber);border-radius:12px;padding:.7rem .95rem;
  text-align:right;box-shadow:0 10px 30px rgba(0,0,0,.32);
  max-height:15rem;overflow:auto}
.aph-label{color:var(--cyan);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:.3rem}
#aph-more{background:none;border:0;cursor:pointer;font-size:.85rem;padding:0 .2rem;opacity:.7}
#aph-more:hover{opacity:1}
.aph-text{font-family:var(--serif);font-style:italic;color:var(--ink);line-height:1.5;font-size:.98rem}
@media (max-width:820px){
  .aphorism{max-width:none;margin:1rem clamp(1rem,4vw,2rem) 0;
    text-align:left;border-right:0;border-left:3px solid var(--amber)}
}

/* ── Поздравление с днём рождения (модалка + видео) ── */
.bd-overlay{position:fixed;inset:0;z-index:100;background:rgba(5,8,16,.82);
  backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:1.2rem}
.bd-card{background:var(--card);border:1px solid var(--line);border-radius:18px;
  max-width:34rem;width:100%;padding:1.7rem 1.5rem;text-align:center;position:relative;
  box-shadow:0 30px 90px rgba(0,0,0,.6)}
.bd-emoji{font-size:2.6rem;line-height:1}
.bd-card h2{font-family:var(--serif);margin:.5rem 0 .3rem}
.bd-card p{color:var(--muted);margin:0}
.bd-video{width:100%;border-radius:12px;margin-top:1.1rem;background:#000;display:block}
.bd-close{position:absolute;top:.4rem;right:.7rem;background:transparent;border:0;
  color:var(--muted);font-size:1.7rem;cursor:pointer;line-height:1}
.bd-close:hover{color:var(--ink)}

/* ── Единая тема полей ввода (фикс «серый текст на белом» на тёмной теме) ── */
textarea, select,
input[type="text"], input[type="search"], input[type="password"],
input[type="date"], input[type="number"], input[type="email"], input:not([type]){
  background:var(--card); color:var(--ink);
  border:1px solid var(--line); border-radius:8px;
  font:inherit; padding:.5rem .7rem;
}
textarea::placeholder, input::placeholder{color:var(--muted)}
textarea:focus, select:focus, input:focus{border-color:var(--amber);outline:none}
/* поле редактора афоризмов в админке (не путать с дисплеем .aph-text) */
.aph-edit{width:100%;min-height:9rem;resize:vertical;line-height:1.5}
.admin-sec textarea{width:100%}

/* ── Новинки на главной + звёзды рейтинга в карточке (v0.62) ── */
.newbooks{max-width:60rem;margin:0 auto;padding:1rem 1.3rem}
.newbooks h2{font-family:var(--serif);margin:0 0 .8rem}
.newbooks-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:1rem}
.nb-card{background:var(--card);border:1px solid var(--line);border-radius:12px;
  overflow:hidden;display:flex;flex-direction:column}
.nb-cover{display:block;aspect-ratio:800/420;overflow:hidden;background:#070b14}
.nb-cover img{width:100%;height:100%;object-fit:cover}
.nb-cover .cover-none{display:flex;align-items:center;justify-content:center;height:100%;color:var(--muted);font-size:1.6rem}
.nb-body{padding:.7rem .9rem;display:flex;flex-direction:column;gap:.5rem}
.nb-body h3{font-family:var(--serif);margin:0;font-size:1.05rem}
.nb-anno{color:var(--muted);font-size:.85rem;margin:0;flex:1;line-height:1.45}
.nb-body .btn{align-self:flex-start}
html.no-illus .nb-cover{display:none}
.card-rate .stars{color:var(--amber);letter-spacing:.06em}
#shelf-random{white-space:nowrap}
.nb-date{color:var(--muted);font-size:.78rem;margin:-.15rem 0 0}

/* ── Три кнопки под рассказом / «О книге»: обсудить, оценить, пара слов (#13) ── */
.book-actions-wrap{max-width:46rem;margin:2.4rem auto 0}
.book-actions .act-row{display:flex;gap:.6rem;flex-wrap:wrap;justify-content:center}
.book-actions .act-btn{flex:1;min-width:9rem;justify-content:center}
.book-actions .act-btn.on{border-color:var(--amber);color:var(--amber);
  box-shadow:inset 0 0 0 1px var(--amber)}
.book-actions .act-panel{margin-top:1rem}
.book-actions .act-panel .rt-box{margin-top:0}
/* панель обсуждения внутри блока действий не дублирует внешние отступы */
.book-actions .act-panel [data-comments]{margin-top:0}

/* ── Внутренние гиперссылки по словам между книгами (#9) ── */
a.book-xref{color:var(--amber);text-decoration:none;
  border-bottom:1px dashed color-mix(in srgb,var(--amber) 55%,transparent)}
a.book-xref:hover{border-bottom-style:solid}

/* ── Направление раскладки полки (#3) ── */
#shelf-order{white-space:nowrap}

/* ── Реакции-эмодзи на книгу ── */
.book-reactions-wrap{max-width:46rem;margin:1.6rem auto 0}
.book-reactions{margin:1.6rem 0}          /* внутри статьи (между датой и «От автора») */
.react-slot:empty{display:none}
.react-row{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center}
.react-btn{background:var(--card);border:1px solid var(--line);border-radius:999px;
  color:var(--ink);font-size:1.15rem;line-height:1;padding:.35rem .7rem;cursor:pointer;
  transition:transform .12s ease,border-color .15s ease}
.react-btn b{font-size:.85rem;color:var(--muted);font-weight:600}
.react-btn:hover{transform:translateY(-2px)}
.react-btn.on{border-color:var(--amber);box-shadow:inset 0 0 0 1px var(--amber)}
.react-btn.on b{color:var(--amber)}

/* ── Прогресс цикла на странице книги ── */
.series-progress{color:var(--amber);font-size:.9rem;margin:.2rem 0 .8rem;font-weight:600}

/* ── Личное посвящение ── */
.dedication{color:var(--muted);font-style:italic;text-align:center;margin:.4rem 0 0}
.reader .dedication{text-align:center;font-size:1.02rem;margin:.2rem 0 1rem;text-indent:0}

/* ── «Осталось ~N мин» в шапке читалки ── */
.read-left{color:var(--muted);font-size:.8rem;white-space:nowrap;margin:0 .2rem;align-self:center}
@media (max-width:560px){ .read-left{display:none} }

/* ── «Читать дальше» в конце книги ── */
.read-next{display:flex;align-items:center;gap:.9rem;max-width:46rem;margin:2.4rem auto 0;
  background:var(--card);border:1px solid var(--line);border-radius:14px;padding:.8rem 1rem;
  text-decoration:none;color:var(--ink);transition:border-color .15s ease,transform .15s ease}
.read-next:hover{border-color:var(--amber);transform:translateY(-2px)}
.read-next .rn-cover{width:44px;height:58px;object-fit:cover;border-radius:6px;flex:none}
.read-next .rn-label{color:var(--amber);font-size:.78rem;letter-spacing:.05em;white-space:nowrap}
.read-next .rn-title{font-family:var(--serif);font-size:1.1rem}
html.no-illus .read-next .rn-cover{display:none}

/* ── Настройки чтения: тон/междустрочие/ширина ── */
.read-set-pop{position:fixed;top:52px;right:12px;z-index:60;background:var(--card);
  border:1px solid var(--line);border-radius:12px;padding:.7rem .8rem;min-width:220px;
  box-shadow:0 10px 30px rgba(0,0,0,.35)}
.read-set-pop .rs-row{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin:.35rem 0}
.read-set-pop .rs-row>span{color:var(--muted);font-size:.85rem}
.read-set-pop .rs-btns{display:flex;gap:.3rem}
.read-set-pop button{background:var(--bg2);border:1px solid var(--line);color:var(--ink);
  border-radius:8px;padding:.2rem .55rem;cursor:pointer;font-size:.85rem}
.read-set-pop button.on{border-color:var(--amber);color:var(--amber)}
.read-set-pop .rs-sep{height:1px;background:var(--line);margin:.55rem 0}
.read-set-pop .rs-actions{display:flex;flex-direction:column;gap:.35rem}
.read-set-pop .rs-act{text-align:left;padding:.4rem .6rem;font-size:.9rem}

/* сепия: тёплый «бумажный» тон читалки поверх темы (только на странице чтения) */
html.reading-sepia body{background:#efe4cf !important;color:#3f3527 !important}
html.reading-sepia .nebula,html.reading-sepia .sky{display:none !important}
html.reading-sepia .reader,html.reading-sepia .reader article,
html.reading-sepia .reader h1{color:#3f3527}
html.reading-sepia .reader .byline,html.reading-sepia .reader .dates{color:#8a7a5c}
html.reading-sepia .rbar{background:rgba(239,228,207,.92);color:#3f3527;border-bottom-color:#d8c8a8}
html.reading-sepia .rbar button,html.reading-sepia .rbar a{color:#3f3527}
html.reading-sepia #progress{background:linear-gradient(90deg,#b98a3e,#8a5a1f)}

/* «читаемая» гарнитура: ровный шрифт + интервалы, без красной строки (доступность) */
html.reading-plainfont .reader article{font-family:-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  letter-spacing:.012em;word-spacing:.06em}
html.reading-plainfont .reader article p{text-indent:0;margin-bottom:.9em}

/* аудио-версия книги: плеер вверху читалки */
.audio-player{margin:0 0 1.4rem;padding:.9rem 1rem;border:1px solid var(--line);
  border-radius:14px;background:color-mix(in srgb,var(--card) 82%,transparent)}
.audio-player .audio-row{display:flex;align-items:center;gap:.7rem}
.audio-player .audio-ico{font-size:1.5rem;flex:0 0 auto}
.audio-player .audio-main{flex:1;min-width:0}
.audio-player .audio-pub-row{margin-top:.6rem;display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.audio-player .audio-pub-btn{background:var(--amber);color:#22150a;border:0;border-radius:8px;
  padding:.35rem .8rem;cursor:pointer;font:inherit}
.audio-player .audio-pub-msg{color:var(--muted);font-size:.85rem}
.audio-player .audio-title{font-weight:600;margin-bottom:.4rem;font-size:.95rem}
.audio-player audio{width:100%;height:38px}
.audio-player .audio-draft-note{margin:0 0 .6rem;font-size:.85rem;color:var(--amber)}
.audio-player .chip{font-size:.72rem;vertical-align:middle}
/* Скорость воспроизведения — сегменты (без всплывающего меню, ничего не уезжает за экран) */
.audio-speed{display:flex;align-items:center;gap:.3rem;flex-wrap:wrap;margin:.5rem 0 0}
.audio-speed .asp-lbl{font-size:.78rem;color:var(--muted);margin-right:.15rem}
.audio-speed .asp-btn{font:inherit;font-size:.8rem;padding:.15rem .5rem;cursor:pointer;
  border:1px solid var(--line);background:transparent;color:var(--ink);border-radius:999px;line-height:1.4}
.audio-speed .asp-btn:hover{border-color:var(--amber);color:var(--amber2)}
.audio-speed .asp-btn.on{background:var(--amber);color:#22150a;border-color:var(--amber)}
/* таймер сна — та же раскладка, что у скорости */
.audio-sleep{display:flex;align-items:center;gap:.3rem;flex-wrap:wrap;margin:.4rem 0 0}
.audio-sleep .slp-left{font-size:.8rem;color:var(--amber2);margin-left:.3rem;font-variant-numeric:tabular-nums}
/* ── Онбординг-подсказки (coach marks) ── */
.ob-guard{position:fixed;inset:0;z-index:9996}
.ob-spot{position:fixed;z-index:9997;border-radius:10px;border:2px solid var(--amber);
  box-shadow:0 0 0 9999px rgba(6,10,20,.62);pointer-events:none;transition:all .2s ease}
.ob-tip{position:fixed;z-index:9998;width:292px;max-width:calc(100vw - 24px);
  background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:14px;
  padding:.9rem 1rem;box-shadow:0 14px 38px -10px rgba(0,0,0,.6)}
.ob-tip h4{margin:.1rem 0 .35rem;font-size:1.02rem;font-family:var(--serif)}
.ob-tip p{margin:0 0 .7rem;font-size:.9rem;line-height:1.45}
.ob-step{font-size:.72rem;color:var(--muted);margin-bottom:.25rem;letter-spacing:.02em}
.ob-btns{display:flex;gap:.4rem;justify-content:flex-end;flex-wrap:wrap}
.ob-btns button{font:inherit;font-size:.85rem;padding:.32rem .7rem;border-radius:8px;cursor:pointer;
  border:1px solid var(--line);background:transparent;color:var(--ink)}
.ob-btns .ob-next{background:var(--amber);color:#22150a;border-color:var(--amber)}
.ob-off{display:flex;align-items:center;gap:.4rem;margin-top:.55rem;font-size:.76rem;color:var(--muted);cursor:pointer}
@media (prefers-reduced-motion:reduce){ .ob-spot{transition:none} }
/* ── Караоке: плеер закреплён сверху, текст уходит под него ── */
.audio-player.karaoke{position:sticky;top:2.9rem;z-index:6;
  background:color-mix(in srgb,var(--card) 94%,transparent);backdrop-filter:blur(8px);
  box-shadow:0 6px 18px -8px rgba(0,0,0,.5);transition:transform .28s ease}
@media (max-width:600px){ .audio-player.karaoke{top:2.6rem} }
/* #1 закреплённый плеер уезжает под шапку при прокрутке вниз, если аудио не играет */
.audio-player.karaoke.tuck{transform:translateY(-160%)}
@media (prefers-reduced-motion:reduce){ .audio-player.karaoke{transition:none} }
/* #3 карусель иллюстраций у коротких произведений — в конце читалки */
.short-gallery{margin:2.8rem auto 0;max-width:var(--reader-width,46rem)}
.short-gallery h2{font-family:var(--serif);font-size:1.1rem;font-weight:600;
  margin:0;text-align:center;color:var(--muted)}
.short-gallery .scene{margin-top:1rem}
html.no-illus .short-gallery{display:none}
/* ── Карточка-цитата: плавающая кнопка у выделения + модал предпросмотра ── */
.quote-pill{position:absolute;transform:translateX(-50%);z-index:40;cursor:pointer;
  border:1px solid var(--amber);background:var(--amber);color:#22150a;font:inherit;
  font-size:.82rem;font-weight:600;padding:.3rem .7rem;border-radius:999px;
  box-shadow:0 8px 20px -6px rgba(0,0,0,.6);white-space:nowrap}

/* Кнопка и модал «Смотреть» (моушн-книга/видео) */
.watch-btn{background:linear-gradient(135deg,#7b2ff7,#c02fb0);border-color:transparent;color:#fff}
.watch-btn:hover{filter:brightness(1.08)}
.watch-modal{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;padding:16px}
.watch-modal .wm-backdrop{position:absolute;inset:0;background:rgba(4,6,12,.86);backdrop-filter:blur(3px)}
.watch-modal .wm-box{position:relative;z-index:1;width:min(1100px,96vw);max-height:92vh}
.watch-modal .wm-video{width:100%;max-height:88vh;border-radius:12px;background:#000;
  box-shadow:0 24px 60px -12px rgba(0,0,0,.8);display:block}
.watch-modal .wm-close{position:absolute;top:-14px;right:-6px;z-index:2;width:40px;height:40px;
  border-radius:50%;border:0;background:var(--card);color:var(--ink);font-size:1.5rem;cursor:pointer;
  box-shadow:0 6px 18px rgba(0,0,0,.5)}

/* Закладки/заметки: мини-панель у выделения (ниже, чтобы не спорить с «Цитатой») */
.note-pill{position:absolute;transform:translateX(-50%);z-index:41;display:flex;gap:.3rem;
  background:var(--card);border:1px solid var(--line);border-radius:999px;padding:.22rem .3rem;
  box-shadow:0 8px 20px -6px rgba(0,0,0,.6);white-space:nowrap}
.note-pill button,.note-pill a{font:inherit;font-size:.8rem;font-weight:600;cursor:pointer;
  border:0;background:transparent;color:var(--ink);padding:.16rem .5rem;border-radius:999px;text-decoration:none}
.note-pill button:hover,.note-pill a:hover{background:color-mix(in srgb,var(--amber) 30%,transparent)}
/* маркеры в тексте: закладка 🔖 / заметка ✎ у абзаца */
.note-mark{cursor:pointer;border:0;background:transparent;font-size:.85rem;line-height:1;
  padding:0 .15rem;margin-left:.25rem;vertical-align:.06em;opacity:.85;filter:saturate(1.2)}
.note-mark:hover{opacity:1}
.note-mark.is-note{color:var(--amber2)}
/* панель списка закладок/заметок */
.notes-panel{position:fixed;top:56px;right:12px;z-index:60;width:min(22rem,92vw);max-height:78vh;
  overflow:auto;background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:.8rem .9rem;box-shadow:0 16px 40px -10px rgba(0,0,0,.6)}
.notes-panel .np-head{display:flex;justify-content:space-between;align-items:center;font-weight:700;
  margin-bottom:.5rem}
.notes-panel .np-close{border:0;background:transparent;font-size:1.4rem;cursor:pointer;color:var(--muted)}
.notes-panel h4{margin:.7rem 0 .3rem;color:var(--muted);font-size:.82rem;text-transform:uppercase;letter-spacing:.04em}
.notes-panel .np-list{list-style:none;margin:0;padding:0}
.notes-panel .np-list li{display:flex;gap:.4rem;align-items:center;padding:.15rem 0}
.notes-panel .np-go{flex:1;text-align:left;border:0;background:transparent;color:var(--ink);
  cursor:pointer;font:inherit;font-size:.9rem;padding:.25rem .3rem;border-radius:6px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.notes-panel .np-go:hover{background:color-mix(in srgb,var(--amber) 16%,transparent)}
.notes-panel .np-del{border:0;background:transparent;color:var(--muted);cursor:pointer;font-size:.9rem}
.notes-panel .np-del:hover{color:#c0392b}
.notes-panel .np-add{margin:.2rem 0 .3rem}
.notes-panel .cm-empty{color:var(--muted);font-size:.85rem;padding:.2rem 0}
.quote-modal{position:fixed;inset:0;z-index:950;display:flex;align-items:center;justify-content:center}
.quote-modal .qm-backdrop{position:absolute;inset:0;background:rgba(4,7,14,.66);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.quote-modal .qm-box{position:relative;z-index:1;width:min(420px,92vw);
  background:var(--card);border:1px solid var(--line);border-radius:16px;padding:1rem;
  box-shadow:0 30px 70px -20px rgba(0,0,0,.9);animation:coIn .3s cubic-bezier(.2,.7,.2,1)}
.quote-modal .qm-img{width:100%;height:auto;display:block;border-radius:10px}
.quote-modal .qm-row{display:flex;gap:.6rem;justify-content:center;margin-top:.85rem}
.quote-modal .qm-close{position:absolute;top:-.6rem;right:-.6rem;z-index:2;width:32px;height:32px;
  border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--ink);
  cursor:pointer;font-size:1.15rem;line-height:1}
@media (prefers-reduced-motion:reduce){.quote-modal .qm-box{animation:none}}
/* ── Полнотекстовый поиск: панель результатов со сниппетами ── */
#search-results{margin:.4rem 0 1rem}
.sr-head{display:flex;align-items:center;justify-content:space-between;gap:.8rem;
  margin:0 0 .8rem;color:var(--muted);font-size:.9rem}
.sr-empty{color:var(--muted);padding:1.2rem 0}
.sr-list{display:flex;flex-direction:column;gap:.7rem}
.sr-item{display:flex;gap:.9rem;align-items:flex-start;padding:.8rem .9rem;
  border:1px solid var(--line);border-radius:14px;
  background:color-mix(in srgb,var(--card) 82%,transparent)}
.sr-cover{flex:0 0 auto;width:60px;height:84px;border-radius:8px;overflow:hidden;
  display:block;background:color-mix(in srgb,var(--card) 60%,transparent)}
.sr-cover img{width:100%;height:100%;object-fit:cover;display:block}
.sr-cover .cover-none{display:flex;align-items:center;justify-content:center;
  width:100%;height:100%;font-size:1.6rem;color:var(--muted)}
.sr-body{flex:1;min-width:0}
.sr-body h3{margin:.1rem 0 .35rem;font-size:1.05rem;font-family:var(--serif)}
.sr-body h3 a{color:inherit;text-decoration:none}
.sr-body h3 a:hover{color:var(--amber2)}
.sr-snip{margin:0 0 .5rem;font-size:.9rem;line-height:1.5;color:var(--ink)}
.sr-snip mark{background:var(--amber);color:#22150a;border-radius:3px;padding:0 .12em}
.sr-item.card-draft{opacity:.85;border-style:dashed}
html.no-illus .sr-cover{display:none}
/* Читательский формуляр — ретро-карточка «как в библиотеке» */
.formulyar{border:1px solid var(--line);border-radius:12px;padding:1rem 1.1rem;margin:0 0 1.2rem;
  background:linear-gradient(180deg,color-mix(in srgb,var(--amber) 10%,var(--card)),var(--card));
  box-shadow:inset 0 0 0 3px color-mix(in srgb,var(--amber) 16%,transparent)}
.formulyar .fm-head{display:flex;justify-content:space-between;align-items:baseline;gap:.6rem;
  border-bottom:2px solid color-mix(in srgb,var(--amber) 40%,transparent);padding-bottom:.4rem;flex-wrap:wrap}
.formulyar .fm-title{font-family:var(--serif);font-size:1.15rem;letter-spacing:.04em;text-transform:uppercase}
.formulyar .fm-name{font-weight:700;color:var(--amber2)}
.formulyar .fm-meta{display:flex;gap:.7rem;flex-wrap:wrap;align-items:center;margin:.55rem 0 .4rem;font-size:.85rem}
.formulyar .fm-streak{background:color-mix(in srgb,#ff6b35 22%,transparent);color:#ff8a4c;
  border-radius:999px;padding:.1rem .55rem;font-weight:700}
.formulyar .fm-streak.fm-cold{background:color-mix(in srgb,var(--muted) 18%,transparent);color:var(--muted);font-weight:500}
.formulyar .fm-best,.formulyar .fm-count,.formulyar .fm-wpm{color:var(--muted)}
.formulyar .fm-wpm:not(.fm-cold){color:var(--amber2)}
.formulyar .fm-list{list-style:none;margin:.3rem 0 0;padding:0}
.formulyar .fm-list li{display:flex;justify-content:space-between;align-items:baseline;gap:.6rem;
  padding:.28rem 0;border-bottom:1px dashed color-mix(in srgb,var(--line) 80%,transparent)}
.formulyar .fm-list li a{text-decoration:none;color:var(--ink)}
.formulyar .fm-list li a:hover{color:var(--amber2)}
.formulyar .fm-stamp{font-family:ui-monospace,"Courier New",monospace;font-size:.8rem;color:var(--muted);
  border:1px solid color-mix(in srgb,var(--amber) 40%,transparent);border-radius:4px;padding:.02rem .3rem;
  transform:rotate(-1.5deg);white-space:nowrap}
.sr-head-btns{display:flex;gap:.4rem;align-items:center;flex-wrap:wrap}
.sr-note{margin:-.4rem 0 .7rem;color:var(--muted);font-size:.85rem}
.sr-sim{display:inline-block;margin-left:.5rem;padding:0 .4em;border-radius:999px;
  font-size:.72rem;font-weight:700;vertical-align:middle;
  background:color-mix(in srgb,var(--amber) 55%,transparent);color:#22150a}
@media (max-width:520px){ .sr-cover{width:46px;height:64px} }
/* подсвечиваемое слово; сами слова — кликабельны (перемотка на них) */
.reader .kw{cursor:pointer;border-radius:4px;padding:0 .04em;
  transition:background .12s ease,color .12s ease}
.reader .kw-on{background:var(--amber);color:#22150a}
html.light .reader .kw-on{background:var(--amber);color:#22150a}
@media (prefers-reduced-motion:reduce){ .reader .kw{transition:none} }

/* «▶ Слушать отсюда»: кнопка в левом поле абзаца, всплывает по наведению.
   На тач-устройствах наведения нет — там перематывает тап по слову (.kw). */
.reader article .has-listen{position:relative}
.reader article .listen-here{position:absolute;left:-1.75em;top:.12em;width:1.5em;height:1.5em;
  display:flex;align-items:center;justify-content:center;padding:0;border:0;border-radius:50%;
  background:var(--amber);color:#22150a;font-size:.66em;line-height:1;cursor:pointer;
  opacity:0;transition:opacity .15s;box-shadow:0 2px 7px rgba(0,0,0,.45)}
.reader article .has-listen:hover .listen-here,
.reader article .listen-here:focus{opacity:.95}
.reader article .listen-here:hover{opacity:1;transform:scale(1.08)}
/* узкие экраны: левого поля нет и наведения нет — прячем кнопку, на тач работает
   перемотка тапом по слову (.kw), так что «Слушать отсюда» и без неё доступно */
@media (max-width:640px){ .reader article .listen-here{display:none} }

/* Плашка «Что нового» — ненавязчиво снизу по центру, при изменении WHATSNEW */
.whatsnew-toast{position:fixed;left:50%;bottom:18px;transform:translate(-50%,140%);
  z-index:70;display:flex;align-items:center;gap:.6rem;max-width:92vw;
  background:var(--card);border:1px solid var(--line);border-radius:999px;
  padding:.5rem .9rem;box-shadow:0 10px 30px -8px rgba(0,0,0,.5);
  transition:transform .3s ease;font-size:.9rem}
.whatsnew-toast.in{transform:translate(-50%,0)}
.whatsnew-toast a{color:var(--amber2);font-weight:700;text-decoration:none;white-space:nowrap}
.whatsnew-toast a:hover{text-decoration:underline}
.whatsnew-toast .wt-x{border:0;background:transparent;color:var(--muted);cursor:pointer;
  font-size:1rem;line-height:1;padding:.1rem .2rem}
@media (prefers-reduced-motion:reduce){ .whatsnew-toast{transition:none} }

/* ── Вход по биометрии (passkey, v0.137) ── */
.pk-login{margin:0 0 1rem}
.pk-login #pk-btn{width:100%}
.pk-or{display:flex;align-items:center;gap:.6rem;color:var(--muted);font-size:.85rem;margin:1rem 0 0}
.pk-or::before,.pk-or::after{content:"";flex:1;border-top:1px solid var(--line)}
.pk-list{list-style:none;padding:0;margin:.4rem 0 .8rem}
.pk-list li{display:flex;justify-content:space-between;align-items:center;gap:.6rem;flex-wrap:wrap;
  padding:.35rem 0;border-bottom:1px dashed var(--line)}
.pk-list small{color:var(--muted)}

/* ── Админка: возвращаемость читателей (v0.137) ── */
.rt-bars{display:flex;flex-direction:column;gap:.3rem;max-width:30rem;margin-bottom:.8rem}
.rt-row{display:grid;grid-template-columns:4.5rem 1fr 2.5rem;align-items:center;gap:.5rem;font-size:.88rem}
.rt-k{color:var(--muted)}
.rt-bar{display:inline-block;height:.7rem;background:color-mix(in srgb,var(--line) 70%,transparent);border-radius:99px;overflow:hidden;width:100%}
.rt-bar.sm{width:5rem;vertical-align:middle}
.rt-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--amber),var(--amber2));border-radius:99px}

/* Шрифты автора из .docx (v0.143): кусок или абзац, набранный в файле другим
   шрифтом. Гарнитура — в переменной --bf; режим «читаемая гарнитура» её снимает. */
.reader .bf{font-family:var(--bf,inherit)}
html.reading-plainfont .reader .bf{font-family:inherit}