/* ==========================================================================
   Читалка — библиотека, оглавление, панель заметок, поиск, импорт, настройки.
   ========================================================================== */

/* ------------------------------------------------------- левая колонка --- */
.rail {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  background: var(--paper);
  border-right: 1px solid var(--rule);
}

.rail__lib {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 0 0 auto;
  max-height: 46%;
  border-bottom: 1px solid var(--rule);
}
.rail__toc { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }

.rail__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 15px 14px 7px 16px;
  flex: 0 0 auto;
}
.rail__label {
  font-family: var(--font-ui);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-2);
  letter-spacing: .015em;
}
.rail__hint { font-size: 11.5px; color: var(--ink-2); }
.rail__hint:empty { display: none; }

.books {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 0 8px 8px;
}
.books__empty {
  padding: 6px 10px 12px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-2);
}

.book {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 8px 8px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  text-align: left;
  cursor: pointer;
  color: var(--ink);
  transition: background-color .12s ease;
  margin-bottom: 2px;
}
.book:hover { background: var(--paper-2); }
.book.is-active { background: var(--paper-3); }
.book__init {
  flex: 0 0 30px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 2px;
  background: var(--paper-2);
  color: var(--ink-2);
  font-family: var(--font-read);
  font-size: 17px;
  font-weight: 600;
  line-height: 1;
}
.book.is-active .book__init { color: var(--accent); }
.book__text { min-width: 0; display: flex; flex-direction: column; gap: 2px; padding-top: 1px; }
.book__title {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--ink);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.book.is-active .book__title { color: var(--accent); }
.book__author {
  font-size: 12.5px;
  color: var(--ink-2);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.book__meta {
  font-size: 12px;
  color: var(--ink-2);
  line-height: 1.35;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.addbook {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  width: calc(100% - 16px);
  margin: 0 8px 10px;
  padding: 9px 8px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--ink-2);
  font-size: 12.5px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}
.addbook:hover { background: var(--paper-2); color: var(--ink); }
.addbook .ic { width: 14px; height: 14px; }

/* --------------------------------------------------------- оглавление --- */
.toc { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 8px 18px; }

.toc__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 34px;
  padding: 7px 9px 7px 11px;
  border: 0;
  border-left: 2px solid transparent;
  border-radius: 0 4px 4px 0;
  background: transparent;
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
  transition: background-color .12s ease, color .12s ease;
}
.toc__item[data-level="2"] { padding-left: 23px; font-size: 12.5px; }
.toc__item[data-level="3"] { padding-left: 35px; font-size: 12px; }
.toc__item:hover { background: var(--paper-2); color: var(--ink); }
.toc__item.is-active {
  color: var(--accent);
  background: var(--accent-2);
  border-left-color: var(--accent);
  font-weight: 500;
  animation: tocBreathe 4.6s ease-in-out infinite;
}
@keyframes tocBreathe {
  0%, 100% { background: var(--accent-2); }
  50% { background: var(--accent-3); }
}
.toc__title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.toc__dot {
  flex: 0 0 auto;
  width: 5px;
  height: 5px;
  margin-left: auto;
  border-radius: 50%;
  background: var(--accent);
  opacity: .85;
}

/* --------------------------------------------------------- заметки ------ */
.notes {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--paper);
  border-left: 1px solid var(--rule);
}

.notes__head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  height: 52px;
  padding: 0 8px 0 16px;
  border-bottom: 1px solid var(--rule);
}
.notes__title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
}
.notes__count { font-size: 12px; color: var(--ink-2); font-weight: 400; }
.notes__head .mini { margin-left: auto; }

.notes__tools {
  flex: 0 0 auto;
  padding: 10px 12px 8px;
  border-bottom: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.notes__filters { display: flex; flex-wrap: wrap; gap: 5px; }
.chip {
  min-height: 28px;
  padding: 4px 10px;
  border: 1px solid var(--rule);
  border-radius: 14px;
  background: transparent;
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color .12s ease, color .12s ease, border-color .12s ease;
}
.chip:hover { background: var(--paper-2); color: var(--ink); }
.chip.is-on { background: var(--accent-2); border-color: transparent; color: var(--accent); }

.notes__search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  min-height: 34px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper-2);
  color: var(--ink-2);
}
.notes__search .ic { width: 14px; height: 14px; }
.notes__search input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  font-size: 12.5px;
  padding: 4px 0;
  outline: none;
  color: var(--ink);
}
.notes__search input::placeholder { color: var(--ink-2); }

.notes__sel {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--rule);
  background: var(--paper-2);
}
.notes__sel-info {
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--ink-2);
}
.notes__sel-acts { display: flex; gap: 6px; }
.selbar__act {
  flex: 1 1 0;
  min-height: 30px;
  padding: 0 8px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--paper);
  color: var(--ink);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}
.selbar__act:hover { background: var(--paper-3); }
.selbar__act--primary { background: var(--accent); border-color: var(--accent); color: #FFF; }
:root[data-theme="night"] .selbar__act--primary { color: #10201A; }
.selbar__act:disabled { opacity: .45; cursor: default; }
.notes__sel--large .notes__sel-info { color: var(--danger); }

.notes__list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 10px 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.notes__group { display: flex; flex-direction: column; gap: 8px; }
.notes__group + .notes__group { margin-top: 8px; }
.notes__group-head {
  position: sticky;
  top: -10px;
  z-index: 1;
  padding: 7px 0 6px;
  background: var(--paper);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--ink-2);
  letter-spacing: .01em;
  display: flex;
  align-items: center;
  gap: 8px;
}
.notes__group-head span { color: var(--ink-2); font-weight: 400; }

.ncard {
  position: relative;
  padding: 10px 12px 9px 14px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--paper);
  transition: border-color .12s ease, background-color .12s ease;
  cursor: pointer;
}
.ncard::before {
  content: "";
  position: absolute;
  left: -1px;
  top: -1px;
  bottom: -1px;
  width: 3px;
  border-radius: 4px 0 0 4px;
  background: rgb(var(--hl, var(--hl-yellow)));
}
.ncard:hover { border-color: var(--paper-3); background: var(--paper-2); }
.ncard.is-resolved { opacity: .72; }
.ncard.is-resolved::before { opacity: .5; }

.ncard__quote {
  display: block;
  width: 100%;
  margin: 0 0 6px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-2);
  font-family: var(--font-read);
  font-style: italic;
  font-size: 13.5px;
  line-height: 1.45;
  text-align: left;
  hyphens: none;
  cursor: pointer;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.ncard__quote:hover { color: var(--ink); }
.ncard__body {
  font-size: 13px;
  line-height: 1.48;
  color: var(--ink);
  margin: 0 0 6px;
  overflow-wrap: anywhere;
}
.ncard__body--muted { color: var(--ink-2); font-style: italic; }
.ncard__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  color: var(--ink-2);
  margin: 0 0 7px;
}
.ncard__flag {
  padding: 1px 6px;
  border-radius: 9px;
  background: var(--accent-2);
  color: var(--accent);
  font-size: 10.5px;
}
.ncard__flag--warn { background: transparent; border: 1px solid var(--rule); color: var(--ink-2); }
.ncard__acts { display: flex; flex-wrap: wrap; gap: 10px; }
.ncard__acts button {
  border: 0;
  padding: 2px 0;
  background: none;
  color: var(--ink-2);
  font-size: 11.5px;
  cursor: pointer;
  border-bottom: 1px solid transparent;
}
.ncard__acts button:hover { color: var(--accent); border-bottom-color: var(--accent); }
.ncard__acts button[data-act="delete"]:hover { color: var(--danger); border-bottom-color: var(--danger); }

.notes__public {
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid var(--rule);
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--ink-2);
}

.notes__empty {
  padding: 30px 10px;
  text-align: center;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-2);
}
.notes__empty p { margin: 0 auto; max-width: 30ch; }

.notes__foot {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 9px 12px 12px;
  border-top: 1px solid var(--rule);
}
.notes__exports { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 12px; }
.notes__footlabel { font-size: 11.5px; color: var(--ink-2); margin-right: 2px; }
.notes__exports .linkbtn { font-size: 12px; }
.notes__import { font-size: 11.5px; color: var(--ink-2); }

@media (max-width: 759px) {
  .notes__head { height: 48px; padding-left: 14px; }
  .notes__head .mini { width: 40px; height: 40px; }
  .notes__tools { padding: 8px 12px 8px; gap: 8px; }
  .chip { min-height: 40px; padding: 8px 12px; font-size: 12.5px; }
  .notes__search { min-height: 44px; }
  .selbar__act { min-height: 40px; }
  .notes__list { padding: 10px 12px 20px; }
  .notes__empty { padding: 26px 8px; }
  .notes__group-head { top: -10px; }
  .ncard__acts button { min-height: 40px; padding: 8px 0; }
  .notes__foot { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
  .notes__exports .linkbtn, .notes__import { min-height: 40px; padding: 8px 2px; }
  .toc__item { min-height: 44px; }
  .book { min-height: 52px; }
  .addbook { min-height: 44px; }
  .mini { width: 40px; height: 40px; }
  .menu__item { min-height: 44px; }
  .switchrow { min-height: 44px; }
  .switch { width: 44px; height: 28px; }
  .switch::after { width: 22px; height: 22px; }
  .switch[aria-checked="true"]::after { transform: translateX(16px); }
  .searchbox__esc { display: none; }
  .search__foot { display: none; }
}

/* ------------------------------------------------------------ поиск ---- */
.ovl-search {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 12vh 16px 16px;
  background: rgba(20, 28, 24, .34);
  animation: fadeIn .14s ease-out;
}
.searchbox {
  width: min(640px, 100%);
  max-height: min(76vh, 720px);
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 10px;
  box-shadow: var(--shadow-modal);
  overflow: hidden;
  animation: dialogIn .18s cubic-bezier(.2, .7, .3, 1);
}
.searchbox__field {
  display: flex;
  align-items: center;
  gap: 11px;
  flex: 0 0 auto;
  padding: 14px 14px 14px 16px;
  border-bottom: 1px solid var(--rule);
}
.searchbox__field .ic { width: 18px; height: 18px; color: var(--ink-2); }
.searchbox__input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 16.5px;
  line-height: 1.4;
  outline: none;
}
.searchbox__input::placeholder { color: var(--ink-2); }
.searchbox__esc {
  flex: 0 0 auto;
  font-size: 11px;
  color: var(--ink-2);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 3px 6px;
}
.search__results { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 6px; }
.sres {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  text-align: left;
  cursor: pointer;
  color: var(--ink);
}
.sres:hover, .sres.is-active { background: var(--paper-2); }
.sres__ch {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--ink-2);
  margin: 0 0 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sres__text {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.sres__text mark {
  background: rgb(var(--hl-yellow) / .9);
  color: #1B2320;
  border-radius: 2px;
  padding: 0 1px;
}
.search__status {
  padding: 26px 20px 30px;
  text-align: center;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-2);
}
.search__status b { color: var(--ink); font-weight: 500; }
.search__foot {
  flex: 0 0 auto;
  padding: 8px 14px 10px;
  border-top: 1px solid var(--rule);
  font-size: 11.5px;
  color: var(--ink-2);
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.search__foot span:empty { display: none; }

@media (max-width: 759px) {
  .ovl-search { padding: 8vh 10px 10px; }
  .searchbox { max-height: 82vh; }
}

/* --------------------------------------------------------- настройки ---- */
.pop-wrap { position: fixed; z-index: 85; }
.settings {
  width: 318px;
  padding: 14px 16px 16px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 8px;
  box-shadow: var(--shadow-pop);
  animation: popIn .15s cubic-bezier(.2, .7, .3, 1);
}
.settings__group + .settings__group {
  margin-top: 13px;
  padding-top: 13px;
  border-top: 1px solid var(--rule);
}
.settings__label {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-2);
  margin: 0 0 8px;
}
.seg { display: flex; gap: 6px; }
.seg button {
  flex: 1 1 0;
  min-width: 0;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 6px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: transparent;
  color: var(--ink-2);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
}
.seg button:hover { background: var(--paper-2); color: var(--ink); }
.seg button[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--accent-2);
  color: var(--accent);
}
.swatch {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, .16);
  flex: 0 0 auto;
}
.swatch--day { background: #F3F4EE; }
.swatch--lamp { background: #EFE6D3; }
.swatch--night { background: #141A18; }

.switchrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 34px;
}
.switchrow__label { font-size: 12.5px; color: var(--ink); }
.switch {
  position: relative;
  width: 40px;
  height: 24px;
  border-radius: 12px;
  flex: 0 0 auto;
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: var(--paper-2);
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
.switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--rule);
  transition: transform .15s ease, background-color .15s ease;
}
.switch::before {
  content: "";
  position: absolute;
  inset: -8px -4px;
}
.switch[aria-checked="true"] { background: var(--accent); border-color: var(--accent); }
.switch[aria-checked="true"]::after { transform: translateX(16px); background: var(--paper); border-color: transparent; }

@media (max-width: 759px) {
  .pop-wrap { left: 8px !important; right: 8px; top: auto !important; bottom: calc(8px + env(safe-area-inset-bottom)); }
  .settings { width: 100%; }
  .seg button { min-height: 40px; }
}

/* ------------------------------------------------------------ меню ------ */
.menu {
  position: fixed;
  z-index: 90;
  width: 248px;
  padding: 6px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 8px;
  box-shadow: var(--shadow-pop);
  animation: popIn .14s cubic-bezier(.2, .7, .3, 1);
}
.menu__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 38px;
  padding: 8px 10px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--ink);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.menu__item:hover { background: var(--paper-2); }
.menu__item:disabled { opacity: .45; cursor: default; }
.menu__item .ic { width: 15px; height: 15px; color: var(--ink-2); }
.menu__item--danger { color: var(--danger); }
.menu__item--danger .ic { color: var(--danger); }
.menu__sep { height: 1px; background: var(--rule); margin: 5px 8px; }

/* ---------------------------------------------------------- импорт ------ */
.imp { display: flex; flex-direction: column; min-height: 0; }
.tabs {
  display: flex;
  gap: 2px;
  padding: 0 20px;
  border-bottom: 1px solid var(--rule);
  flex: 0 0 auto;
}
.tab {
  min-height: 42px;
  padding: 0 11px;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  background: none;
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}
.tab:hover { color: var(--ink); }
.tab[aria-selected="true"] { color: var(--accent); border-bottom-color: var(--accent); }

.imp__panel { padding: 16px 0 4px; display: flex; flex-direction: column; gap: 13px; }

.drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 30px 18px;
  border: 1px dashed var(--rule);
  border-radius: 6px;
  background: transparent;
  text-align: center;
  cursor: pointer;
  transition: border-color .14s ease, background-color .14s ease;
}
.drop:hover, .drop.is-over { border-color: var(--accent); background: var(--accent-2); }
.drop__main { font-size: 13.5px; color: var(--ink); line-height: 1.5; }
.drop__hint { font-size: 12px; color: var(--ink-2); }
.linkish { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

.upload { display: flex; flex-direction: column; gap: 6px; }
.upload__row { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; color: var(--ink-2); }
.upload__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.upload__bar { height: 4px; border-radius: 2px; background: var(--paper-3); overflow: hidden; }
.upload__bar i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .15s ease; }

.imp__msg {
  padding: 10px 12px;
  border: 1px solid var(--rule);
  border-left: 3px solid var(--rule);
  border-radius: 0 4px 4px 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.imp__msg--error { border-left-color: var(--danger); }
.imp__msg--ok { border-left-color: var(--accent); }
.imp__msg b { font-weight: 600; }

.imp__fields { display: flex; flex-direction: column; gap: 10px; }
.imp__field label {
  display: block;
  font-size: 12px;
  color: var(--ink-2);
  margin: 0 0 5px;
}
.imp__actions { display: flex; justify-content: flex-end; gap: 8px; padding-top: 2px; }
.imp__note { font-size: 12px; color: var(--ink-2); line-height: 1.5; }
.imp__json { display: flex; flex-direction: column; gap: 12px; }

@media (max-width: 759px) {
  .tabs { padding: 0 14px; }
  .imp__panel { padding: 14px 0 4px; }
  .dialog__body { padding: 0 14px 6px; }
  .dialog__foot { padding: 12px 14px 14px; }
  .dialog__head { padding: 16px 10px 10px 16px; }
  .drop { padding: 24px 14px; }
}