/* ── Reset & base ─────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Ensure [hidden] always wins over display declarations */
[hidden] { display: none !important; }

/* ── Доступность: видимый фокус для клавиатуры (a11y) ── */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}
/* Поля ввода при фокусе с клавиатуры — рамка + кольцо */
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
/* Мышью фокус-кольцо не показываем (только клавиатура) */
:focus:not(:focus-visible) { outline: none; }

/* Скрыто визуально, доступно скрин-ридерам */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* Skip-link «Перейти к содержанию» — виден при фокусе с клавиатуры */
.skip-link {
  position: fixed; top: -60px; left: 12px; z-index: 400;
  padding: 10px 18px; background: var(--accent); color: #fff;
  border-radius: 0 0 8px 8px; font-size: 14px; font-weight: 600;
  text-decoration: none; transition: top 0.2s;
}
.skip-link:focus { top: 0; }

:root {
  --font-serif: 'Georgia', 'Times New Roman', serif;
  --font-sans:  system-ui, -apple-system, sans-serif;

  --sidebar-w: 280px;

  /* Light theme */
  --bg:          #faf8f4;
  --bg-sidebar:  #f2ede4;
  --bg-card:     #fff;
  --bg-verse:    #fffef8;
  --bg-comment:  #f7f5f0;
  --bg-hover:    #ede8dd;
  --bg-active:   #d9c9a8;

  --text:        #2c2416;
  --text-muted:  #776a52; /* AA-контраст 4.99:1 на светлом фоне */
  --text-sidebar:#4a3e2c;

  --accent:      #7a5c2e;
  --accent-light:#c9a96e;
  --accent-glow: rgba(122, 92, 46, 0.15);

  --border:      #e0d8c8;
  --border-strong:#c8bda8;

  --verse-num:   #9a7d4a;
  --comment-tag: #7a8a6a;

  --term-bg:     rgba(122, 92, 46, 0.1);
  --term-border: rgba(122, 92, 46, 0.3);

  --search-bg:   #fffdf8;

  --shadow-sm: 0 1px 3px rgba(0,0,0,.06);
  --shadow-md: 0 4px 16px rgba(0,0,0,.08);

  --radius: 8px;
  --transition: 0.18s ease;
}

body.dark {
  --bg:          #1a1712;
  --bg-sidebar:  #141210;
  --bg-card:     #1f1c17;
  --bg-verse:    #1f1c17;
  --bg-comment:  #18160f;
  --bg-hover:    #2a261d;
  --bg-active:   #3d3220;

  --text:        #e8dfc8;
  --text-muted:  #9a8d6e; /* AA-контраст 5.45:1 на тёмном фоне */
  --text-sidebar:#c8b898;

  --accent:      #c9a96e;
  --accent-light:#e8c98a;
  --accent-glow: rgba(201, 169, 110, 0.15);

  --border:      #2e2a20;
  --border-strong:#3e3828;

  --verse-num:   #c9a96e;
  --comment-tag: #8a9a7a;

  --term-bg:     rgba(201, 169, 110, 0.12);
  --term-border: rgba(201, 169, 110, 0.3);

  --search-bg:   #1f1c17;
}

/* ── Layout ───────────────────────────────────────── */
html, body { height: 100%; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  transition: background var(--transition), color var(--transition);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

#app {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

/* ── Mobile menu button ───────────────────────────── */
#menu-btn {
  display: none;
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 301;
  width: 38px;
  height: 38px;
  background: var(--bg-sidebar);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 20px;
  color: var(--text-sidebar);
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-sm);
  transition: background var(--transition), border-color var(--transition);
}
#menu-btn:hover { border-color: var(--accent); color: var(--accent); }

/* ── Sidebar overlay (mobile) ─────────────────────── */
#sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 299;
}

/* ── Sidebar ──────────────────────────────────────── */
#sidebar {
  width: var(--sidebar-w);
  min-width: var(--sidebar-w);
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: background var(--transition);
}

#sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 16px 14px;
  border-bottom: 1px solid var(--border);
}

#sidebar-header-controls {
  display: flex;
  align-items: center;
  gap: 6px;
}

#sidebar-close {
  display: none;
  background: none;
  border: 1px solid var(--border);
  border-radius: 20px;
  width: 32px;
  height: 28px;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 13px;
  align-items: center;
  justify-content: center;
  transition: all var(--transition);
}
#sidebar-close:hover { border-color: var(--accent); color: var(--accent); }

#book-title {
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1.15;
  border-radius: 8px;
  padding: 2px 4px;
  transition: background var(--transition);
}
#book-title:hover { background: var(--bg-hover); }
.logo-mark { font-size: 22px; flex-shrink: 0; }
.logo-text { display: flex; flex-direction: column; }
.logo-line1 { font-size: 14px; font-weight: 700; color: var(--accent); letter-spacing: .02em; }
.logo-line2 { font-size: 12px; font-weight: 600; color: var(--text-muted); letter-spacing: .14em; text-transform: uppercase; }
.book-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: .02em;
  text-transform: uppercase;
}
.book-sub {
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: .05em;
}

#theme-toggle {
  background: none;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 4px 10px;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 14px;
  display: flex;
  gap: 4px;
  transition: all var(--transition);
}
#theme-toggle:hover { border-color: var(--accent); color: var(--accent); }
body.light .icon-moon { display: none; }
body.dark  .icon-sun  { display: none; }

/* ── Search ───────────────────────────────────────── */
#search-wrap {
  position: relative;
  padding: 12px 12px 10px;
  border-bottom: 1px solid var(--border);
}
#search-input {
  width: 100%;
  background: var(--search-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 7px 32px 7px 10px;
  font-size: 13px;
  color: var(--text);
  outline: none;
  transition: border-color var(--transition);
}
#search-input::placeholder { color: var(--text-muted); }
#search-input:focus { border-color: var(--accent); }
#search-icon {
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 16px;
  pointer-events: none;
}

/* ── Book selector ──────────────────────────────────── */
#book-selector {
  position: relative;
  padding: 6px 10px 4px;
  border-bottom: 1px solid var(--border);
}
.book-selector-label {
  display: block;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin: 0 2px 4px;
}

#book-selector-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 10px;
  background: var(--bg-hover);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  transition: border-color 0.15s, background 0.15s;
  text-align: left;
}
#book-selector-btn:hover { border-color: var(--accent); background: var(--bg-active); }

#book-selector-icon { font-size: 16px; flex-shrink: 0; }
#book-selector-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#book-selector-arrow { font-size: 10px; color: var(--text-muted); flex-shrink: 0; transition: transform 0.15s; }

#book-selector-dropdown {
  position: absolute;
  left: 10px;
  right: 10px;
  top: calc(100% - 4px);
  z-index: 200;
  background: var(--bg-sidebar);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,.18);
  overflow: hidden;
  max-height: 70vh;
  overflow-y: auto;
}

.book-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background 0.1s;
}
.book-option:last-child { border-bottom: none; }
.book-option:hover { background: var(--bg-hover); }
.book-option--active { background: var(--bg-active); }
.book-option--locked { opacity: 0.65; }
.book-option--locked:hover { background: transparent; cursor: default; }

.book-opt-icon { font-size: 18px; flex-shrink: 0; margin-top: 1px; }

.book-opt-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
  min-width: 0;
}
.book-opt-title { font-size: 13px; font-weight: 600; color: var(--text); }
.book-opt-sub { font-size: 10px; color: var(--text-muted); }
.book-opt-stats { font-size: 10px; color: var(--accent); margin-top: 2px; }

.book-opt-lock {
  flex-shrink: 0;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--border);
  padding: 2px 6px;
  border-radius: 10px;
  margin-top: 2px;
}

/* ── Chapter nav ──────────────────────────────────── */
#chapter-nav {
  overflow-y: auto;
  flex: 1;
  padding: 8px 0 16px;
}
#chapter-nav::-webkit-scrollbar { width: 4px; }
#chapter-nav::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }

.sthana-group { margin-bottom: 4px; }

.sthana-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
}
.sthana-label:hover { color: var(--accent); }
.sthana-arrow {
  font-size: 9px;
  transition: transform var(--transition);
}
.sthana-group.collapsed .sthana-arrow { transform: rotate(-90deg); }
.sthana-group.collapsed .sthana-chapters { display: none; }

.chapter-btn {
  display: block;
  width: 100%;
  text-align: left;
  padding: 7px 16px 7px 22px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-sidebar);
  font-size: 12.5px;
  line-height: 1.35;
  border-radius: 0;
  transition: background var(--transition), color var(--transition);
  position: relative;
}
.chapter-btn:hover { background: var(--bg-hover); color: var(--text); }
.chapter-btn--stub {
  opacity: 0.38;
  cursor: not-allowed;
  font-style: italic;
}
.chapter-btn--stub:hover { background: none; color: var(--text-sidebar); }

/* ENG badge in sidebar */
.ch-lang-badge {
  display: inline-block;
  margin-left: 5px;
  padding: 1px 4px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.4;
  border-radius: 3px;
  background: var(--accent);
  color: #fff;
  opacity: 0.7;
  vertical-align: middle;
  position: relative;
  top: -1px;
}

/* English chapter notice bar */
.chapter-lang-notice {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 20px;
  padding: 8px 14px;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border-left: 3px solid var(--accent);
  border-radius: 0 6px 6px 0;
  font-size: 12.5px;
  color: var(--text-secondary, var(--text));
  opacity: 0.85;
}
.chapter-lang-notice__icon { font-size: 14px; }

/* Sanskrit-only badge (देव) — distinct hue */
.ch-lang-badge--sa {
  font-family: 'Noto Sans Devanagari', serif;
  background: #8a6d3b;
  font-size: 10px;
  padding: 0 5px;
}
.chapter-lang-notice--sa {
  background: color-mix(in srgb, #8a6d3b 12%, transparent);
  border-left-color: #8a6d3b;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}
.sa-notice-line { display: flex; align-items: center; gap: 6px; }

/* Прогресс перевода санскрит-главы (краудсорс) */
.sa-progress { width: 100%; }
.sa-progress-bar {
  height: 6px; background: var(--bg-hover); border-radius: 3px;
  overflow: hidden; margin-bottom: 6px;
}
.sa-progress-bar > span {
  display: block; height: 100%; background: #8a6d3b;
  border-radius: 3px; transition: width .4s ease;
}
.sa-progress-text { font-size: 12px; color: var(--text-muted); opacity: 1; }
.sa-jump-btn {
  background: none; border: none; padding: 0; font: inherit; font-size: 12px;
  color: var(--accent); cursor: pointer; text-decoration: underline;
}
.sa-jump-btn:hover { opacity: .8; }
.sa-help { font-style: italic; }

/* Подсветка стиха при переходе «к непереведённому» */
.verse-jump-pulse { animation: versePulse 2s ease; border-radius: 8px; }
@keyframes versePulse {
  0%, 100% { box-shadow: 0 0 0 0 transparent; background: transparent; }
  15%, 55% { box-shadow: 0 0 0 2px var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
}
.chapter-btn.active {
  background: var(--bg-active);
  color: var(--accent);
  font-weight: 600;
}
.chapter-btn.active::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--accent);
  border-radius: 0 2px 2px 0;
}
.ch-num {
  font-size: 10px;
  color: var(--text-muted);
  margin-right: 4px;
}

/* ── Main content ─────────────────────────────────── */
#content {
  flex: 1;
  overflow-y: auto;
  scroll-behavior: smooth;
  padding-bottom: 56px; /* room for fixed footer disclaimer */
}
#content::-webkit-scrollbar { width: 6px; }
#content::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 6px; }

/* ── Welcome ──────────────────────────────────────── */
#welcome {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  min-height: 100vh;
  padding: 48px 24px 64px;
  overflow-y: auto;
}
.welcome-inner {
  max-width: 720px;
  width: 100%;
  text-align: center;
}
.welcome-inner h1 {
  font-family: var(--font-serif);
  font-size: 2rem;
  color: var(--accent);
  margin-bottom: 8px;
  line-height: 1.2;
}
.welcome-author {
  font-size: 1.1rem;
  color: var(--text);
  margin-bottom: 6px;
}
.welcome-meta {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 40px;
}
.welcome-hint {
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: 32px;
  padding: 14px 20px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
}
/* ── Главная страница проекта ──────────────────────── */
.home-hero { margin-bottom: 18px; }
.home-logo { font-size: 48px; line-height: 1; margin-bottom: 10px; }
.home-tagline {
  font-size: 15px; color: var(--text-muted); margin: 6px auto 0; max-width: 520px; line-height: 1.5;
}
.home-desc {
  font-size: 14.5px; line-height: 1.7; color: var(--text);
  max-width: 600px; margin: 0 auto 22px; text-align: center;
}
.home-stats {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 34px;
}
.home-stat {
  font-size: 12.5px; color: var(--text-muted);
  background: var(--bg-hover); border: 1px solid var(--border);
  border-radius: 16px; padding: 5px 14px;
}
.home-books-title {
  font-family: var(--font-serif); font-size: 1.15rem; color: var(--accent);
  margin: 0 0 16px; text-align: center;
}
.home-book-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 12px; margin-bottom: 40px; text-align: left;
}
.home-book-card {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px; font-family: inherit; cursor: pointer; text-align: left;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px;
  transition: border-color var(--transition), background var(--transition), transform var(--transition);
}
.home-book-card:hover { border-color: var(--accent); background: var(--bg-hover); transform: translateY(-2px); }
.home-book-icon { font-size: 26px; flex-shrink: 0; line-height: 1.1; }
.home-book-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.home-book-name { font-size: 15px; font-weight: 700; color: var(--accent); }
.home-book-sub { font-size: 12px; color: var(--text); opacity: .85; }
.home-book-stats { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }

.welcome-features {
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
}
.feature {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 13.5px;
  color: var(--text-muted);
}
.feature-icon { color: var(--accent); font-size: 16px; min-width: 20px; }
.term-sample {
  color: var(--accent);
  border-bottom: 1px dashed var(--accent-light);
  cursor: default;
}

/* ── Chapter view ─────────────────────────────────── */
#chapter-view {
  max-width: 740px;
  margin: 0 auto;
  padding: 40px 32px 80px;
}

#chapter-header {
  margin-bottom: 36px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border);
}

#chapter-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

#chapter-breadcrumb {
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: .06em;
  text-transform: uppercase;
}

#chapter-controls {
  display: flex;
  gap: 6px;
  align-items: center;
}

/* Home + Font size buttons */
#chapter-home-btn {
  font-size: 12px;
  font-weight: 600;
  padding: 3px 12px;
  background: var(--bg-hover);
  border: 1px solid var(--border);
  border-radius: 16px;
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--transition);
  letter-spacing: .02em;
}
#chapter-home-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--bg-active); }

.font-size-btn {
  font-size: 12px;
  font-weight: 700;
  padding: 3px 10px;
  background: var(--bg-hover);
  border: 1px solid var(--border);
  border-radius: 16px;
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--transition);
  min-width: 36px;
}
.font-size-btn:hover { border-color: var(--accent); color: var(--accent); }

/* Font sizes applied to body */
body[data-font-size="small"]  { font-size: 14px; }
body[data-font-size="normal"] { font-size: 16px; }
body[data-font-size="large"]  { font-size: 18px; }
body[data-font-size="xlarge"] { font-size: 21px; }

/* Кнопка А/А+/А++ масштабирует читаемый контент (текст глав/статей задан в px,
   поэтому меняем размер через zoom — это пропорционально увеличивает весь текст). */
#chapter-body, #glossary-body, #remedies-detail, #enc-article-body {
  zoom: var(--read-zoom, 1);
}
body[data-font-size="small"]  { --read-zoom: 0.9; }
body[data-font-size="normal"] { --read-zoom: 1; }
body[data-font-size="large"]  { --read-zoom: 1.15; }
body[data-font-size="xlarge"] { --read-zoom: 1.32; }

/* Chapter prev/next navigation bar */
.chapter-nav-bar {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}
.ch-nav-btn {
  flex: 1;
  padding: 10px 14px;
  background: var(--bg-hover);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
  transition: all var(--transition);
  text-align: left;
  max-width: 45%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ch-nav-btn--next { text-align: right; margin-left: auto; }
.ch-nav-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--bg-active); }

#chapter-title {
  font-family: var(--font-serif);
  font-size: 1.7rem;
  color: var(--text);
  line-height: 1.25;
  margin-bottom: 6px;
}

#chapter-subtitle {
  font-size: 14px;
  color: var(--accent);
  font-style: italic;
}

/* ── Content blocks ───────────────────────────────── */
.block { margin-bottom: 20px; }

.block-verse {
  background: var(--bg-verse);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent-light);
  border-radius: var(--radius);
  padding: 16px 20px;
}
.verse-header {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 8px;
}
.verse-number {
  font-size: 11px;
  font-weight: 700;
  color: var(--verse-num);
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.verse-text {
  font-family: var(--font-serif);
  font-size: 15.5px;
  line-height: 1.82;
  color: var(--text);
}

/* ── Sanskrit / IAST (independent toggles on #chapter-view) ── */
.verse-devanagari,
.verse-iast {
  display: none;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--border);
}

/* Independent toggles: देв and IAST each shown on their own class */
#chapter-view.show-devanagari .verse-devanagari { display: block; }
#chapter-view.show-iast       .verse-iast       { display: block; }

.verse-devanagari {
  font-family: 'Noto Sans Devanagari', 'Noto Serif Devanagari', serif;
  font-size: 18px;
  line-height: 2;
  color: var(--accent);
  letter-spacing: 0.02em;
}
.verse-iast {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14px;
  line-height: 1.8;
  color: var(--text-muted);
  letter-spacing: 0.01em;
}

/* ── Sanskrit toggle buttons (देв / IAST) in chapter header ── */
.skt-bar {
  display: inline-flex;
  gap: 6px;
  margin-top: 8px;
}
.skt-btn {
  display: inline-flex;
  align-items: center;
  padding: 4px 14px;
  background: var(--bg-hover);
  border: 1px solid var(--border);
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--transition);
  letter-spacing: .03em;
}
.skt-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--bg-active);
}
.skt-btn--on {
  border-color: var(--accent-light);
  color: var(--accent);
  background: var(--accent-glow);
}

/* Английский перевод (вкладка EN) */
.english-pane { display: none; }
#chapter-view.show-english .block { display: none; }
#chapter-view.show-english .chapter-lang-notice { display: none; }
#chapter-view.show-english .english-pane { display: block; }
.english-pane p {
  font-size: 16px; line-height: 1.75; color: var(--text);
  margin: 0 0 14px; text-align: justify;
}
.english-pane .english-source {
  margin-top: 22px; padding-top: 12px; border-top: 1px solid var(--border);
  font-size: 12px; font-style: italic; color: var(--text-muted); text-align: left;
}

.block-comment {
  padding: 14px 20px 14px 24px;
  border-left: 2px solid var(--comment-tag);
  background: var(--bg-comment);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.comment-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--comment-tag);
  margin-bottom: 6px;
}
.comment-author {
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  opacity: 0.85;
}
.comment-text {
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--text);
}

.block-text {
  font-size: 15px;
  line-height: 1.8;
  color: var(--text);
  padding: 0 4px;
}

/* ── Content headings (Vipassana + others) ────────── */
.block-heading {
  padding: 4px 0 4px 14px;
  border-radius: 0 6px 6px 0;
  margin-top: 4px;
}
.heading-text {
  font-weight: 700;
  display: block;
}

/* L1 — primary section title */
.block-heading--l1 {
  border-left: 4px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--bg));
  padding-top: 10px;
  padding-bottom: 10px;
}
.block-heading--l1 .heading-text {
  font-size: 17px;
  letter-spacing: .01em;
  color: var(--accent);
}

/* L2 — subsection title */
.block-heading--l2 {
  border-left: 3px solid var(--accent-light);
  background: color-mix(in srgb, var(--accent-light) 10%, var(--bg));
  padding-top: 8px;
  padding-bottom: 8px;
}
.block-heading--l2 .heading-text {
  font-size: 15.5px;
  color: var(--text);
}

/* L3 — sub-section label */
.block-heading--l3 {
  border-left: 2px solid var(--text-muted);
  background: transparent;
  padding-top: 4px;
  padding-bottom: 4px;
}
.block-heading--l3 .heading-text {
  font-size: 14.5px;
  color: var(--text);
  font-style: italic;
}

/* ── Sanskrit terms (glossary) ────────────────────── */
.skt {
  color: var(--accent);
  border-bottom: 1px dashed var(--accent-light);
  cursor: help;
  background: var(--term-bg);
  padding: 0 2px;
  border-radius: 2px;
  transition: background var(--transition);
}
.skt:hover { background: var(--accent-glow); }

/* ── Tooltip ──────────────────────────────────────── */
#tooltip {
  position: fixed;
  z-index: 9999;
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 10px 14px;
  max-width: 300px;
  box-shadow: var(--shadow-md);
  font-size: 13px;
  line-height: 1.55;
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .15s, transform .15s;
}
#tooltip.visible {
  opacity: 1;
  transform: translateY(0);
}
.tooltip-term {
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 3px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.tooltip-def { color: var(--text); }
.tooltip-origin { color: var(--text-muted); font-size: 11px; margin-top: 3px; font-style: italic; }

/* ── Search results ───────────────────────────────── */
#search-results {
  max-width: 740px;
  margin: 0 auto;
  padding: 36px 32px 80px;
}
#search-results-header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
#search-results-header h2 {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  color: var(--text);
}
#search-count {
  font-size: 13px;
  color: var(--text-muted);
}

.search-result {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin-bottom: 12px;
  cursor: pointer;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.search-result:hover {
  border-color: var(--accent-light);
  box-shadow: var(--shadow-sm);
}
.result-meta {
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.result-book {
  color: var(--accent);
  font-weight: 600;
}
.result-snippet {
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--text);
}
.result-snippet mark {
  background: var(--accent-glow);
  color: var(--accent);
  border-radius: 2px;
  padding: 0 1px;
  font-weight: 600;
}
.no-results {
  text-align: center;
  color: var(--text-muted);
  padding: 60px 0;
  font-size: 15px;
}

/* ── Sidebar footer ───────────────────────────────── */
#sidebar-footer {
  border-top: 1px solid var(--border);
  padding: 10px 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sidebar-footer-btn {
  width: 100%;
  text-align: left;
  padding: 7px 10px;
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  color: var(--text-sidebar);
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 7px;
  transition: all var(--transition);
}
.sidebar-footer-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--bg-hover); }
.sidebar-footer-btn.active { border-color: var(--accent); color: var(--accent); background: var(--bg-active); font-weight: 600; }
.sidebar-footer-btn span { font-size: 14px; }

/* ── Единый набор SVG-иконок (меню + книги) ── */
.app-icon { display: block; width: 22px; height: 22px; }
.menu-ico { display: inline-flex; flex: 0 0 22px; width: 22px; height: 22px; }
.home-book-icon .app-icon { width: 34px; height: 34px; }
.book-opt-icon .app-icon { width: 24px; height: 24px; }
#book-selector-icon { display: inline-flex; }
#book-selector-icon .app-icon { width: 22px; height: 22px; }
.result-book .app-icon { width: 16px; height: 16px; display: inline-block; vertical-align: -3px; }

/* ── Glossary view ────────────────────────────────── */
#glossary-view, #diseases-view {
  max-width: 900px;
  margin: 0 auto;
  padding: 36px 32px 80px;
}
#glossary-header, #diseases-header {
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
#glossary-header h2, #diseases-header h2 {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  color: var(--text);
  margin-bottom: 4px;
}
#glossary-count {
  font-size: 13px;
  color: var(--text-muted);
}
.diseases-subtitle {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 4px;
}

#glossary-filter-wrap {
  margin-bottom: 20px;
}
#glossary-filter {
  width: 100%;
  max-width: 360px;
  background: var(--search-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 14px;
  font-size: 13px;
  color: var(--text);
  outline: none;
  transition: border-color var(--transition);
}
#glossary-filter:focus { border-color: var(--accent); }
#glossary-filter::placeholder { color: var(--text-muted); }

/* Shared filter wrap (diseases + others) */
.filter-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.filter-wrap input[type="search"] {
  flex: 1;
  min-width: 200px;
  max-width: 360px;
  background: var(--search-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 14px;
  font-size: 13px;
  color: var(--text);
  outline: none;
  transition: border-color var(--transition);
}
.filter-wrap input[type="search"]:focus { border-color: var(--accent); }
.filter-wrap input[type="search"]::placeholder { color: var(--text-muted); }
.filter-count {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
}

/* Glossary grid */
#glossary-body {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}
.glossary-category-title {
  grid-column: 1 / -1;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 16px 0 6px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}
.glossary-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  transition: border-color var(--transition);
}
.glossary-card:hover { border-color: var(--accent-light); }
.glossary-card--linked {
  cursor: pointer;
}
.glossary-card--linked:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 4%, var(--bg-card));
}
.glossary-card-term {
  font-weight: 700;
  font-size: 14px;
  color: var(--accent);
  margin-bottom: 2px;
}
.glossary-enc-link {
  font-size: 10px;
  font-weight: 400;
  color: var(--accent-light);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
  margin-left: 6px;
  vertical-align: middle;
}
.glossary-card--linked:hover .glossary-enc-link {
  color: var(--accent);
}
.glossary-card-origin {
  font-size: 10px;
  color: var(--text-muted);
  font-style: italic;
  margin-bottom: 6px;
}
.glossary-card-def {
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--text);
}

/* Diseases view */
.disease-category {
  margin-bottom: 32px;
}
.disease-category-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 12px;
}
.disease-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin-bottom: 10px;
  transition: border-color var(--transition);
}
.disease-card:hover { border-color: var(--accent-light); }
.disease-card-header {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.disease-card-name {
  font-weight: 700;
  font-size: 15px;
  color: var(--accent);
}
.disease-card-origin {
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
}
.disease-card-dosha {
  margin-left: auto;
  font-size: 11px;
  color: var(--accent);
  background: var(--term-bg);
  border: 1px solid var(--term-border);
  border-radius: 20px;
  padding: 2px 10px;
  white-space: nowrap;
}
.disease-card-desc {
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--text);
  margin-bottom: 8px;
}
.disease-card-treatment {
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.6;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.disease-card-treatment::before {
  content: 'Лечение: ';
  font-weight: 600;
  color: var(--comment-tag);
}
.disease-card-chapters {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.disease-chip {
  font-size: 10px;
  color: var(--text-muted);
  background: var(--bg-hover);
  border-radius: 4px;
  padding: 2px 7px;
}
.disease-chip--link {
  color: var(--accent);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
}
.disease-chip--link:hover {
  opacity: 0.8;
}

/* ── Remedies ─────────────────────────────────────── */
#remedies-view {
  padding: 32px 40px 60px;
  max-width: 860px;
  margin: 0 auto;
}
#remedies-header h2 { margin: 0 0 4px; }
.remedies-subtitle {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0 0 20px;
}
#remedies-search-wrap {
  position: relative;
  margin-bottom: 24px;
}
#remedies-filter {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-sidebar);
  color: var(--text);
  font-size: 14px;
  outline: none;
}
#remedies-filter:focus { border-color: var(--accent); }
#remedies-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}
.remedy-card {
  background: var(--bg-sidebar);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.12s;
}
.remedy-card:hover {
  border-color: var(--accent);
  box-shadow: 0 2px 12px color-mix(in srgb, var(--accent) 15%, transparent);
  transform: translateY(-1px);
}
.remedy-card-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
}
.remedy-card-preview {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Detail view */
#remedies-detail { padding-top: 8px; }
#remedies-back {
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 14px;
  font-size: 13px;
  color: var(--text-muted);
  cursor: pointer;
  margin-bottom: 20px;
  transition: color 0.15s, border-color 0.15s;
}
#remedies-back:hover { color: var(--accent); border-color: var(--accent); }
#remedies-detail-title {
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 20px;
  color: var(--text);
}
#remedies-detail-body {
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--text);
}
#remedies-detail-body p { margin: 0 0 12px; line-height: 1.75; }
#remedies-detail-body h4 {
  font-size: 13px;
  font-weight: 700;
  color: var(--comment-tag);
  margin: 22px 0 8px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1px solid var(--border);
  padding-bottom: 4px;
}
#remedies-detail-body ul {
  margin: 0 0 14px;
  padding-left: 20px;
}
#remedies-detail-body li { margin-bottom: 5px; line-height: 1.65; }

/* Ingredient composition lists */
#remedies-detail-body .rem-ingredients {
  list-style: none;
  padding-left: 0;
  margin: 4px 0 14px;
  background: var(--bg-hover);
  border-radius: 6px;
  padding: 10px 14px;
}
#remedies-detail-body .rem-ingredients li {
  padding: 2px 0;
  margin: 0;
}
#remedies-detail-body .rem-ingredients li::before {
  content: '— ';
  color: var(--accent);
  font-weight: 600;
}

/* Labeled sub-paragraph bold prefix (e.g. "Средства из трав.") */
.rem-sublabel {
  color: var(--comment-tag);
  font-weight: 700;
}

/* Cross-remedy navigation links */
.rem-cross-ref {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
  cursor: pointer;
}
.rem-cross-ref:hover { opacity: 0.75; }

/* ВНИМАНИЕ! warning box */
.rem-warning {
  background: color-mix(in srgb, #c0392b 8%, var(--bg));
  border-left: 3px solid #c0392b;
  border-radius: 0 6px 6px 0;
  padding: 10px 14px;
  margin: 10px 0 16px;
  font-size: 13.5px;
  line-height: 1.7;
}
body.dark .rem-warning {
  background: color-mix(in srgb, #c0392b 15%, var(--bg));
}

/* ПРИМЕЧАНИЕ note box */
.rem-note {
  background: color-mix(in srgb, #9a7b3a 7%, var(--bg));
  border-left: 3px solid #9a7b3a;
  border-radius: 0 6px 6px 0;
  padding: 10px 14px;
  margin: 10px 0 16px;
  font-size: 13.5px;
  font-style: italic;
  line-height: 1.7;
  color: var(--text-muted);
}
.rem-note strong {
  font-style: normal;
  color: #9a7b3a;
}
body.dark .rem-note {
  background: color-mix(in srgb, #9a7b3a 14%, var(--bg));
  color: var(--text-muted);
}

/* ── Encyclopedia ─────────────────────────────────── */
#encyclopedia-view, #references-view {
  padding: 32px 40px 60px;
  max-width: 860px;
  margin: 0 auto;
}
#enc-header h2 {
  font-size: 26px; font-weight: 700; color: var(--text); margin: 0 0 4px;
}
.enc-subtitle { color: var(--text-muted); font-size: 13px; margin: 0 0 20px; }
#enc-search-wrap { margin-bottom: 28px; }
#enc-search {
  width: 100%; max-width: 440px;
  padding: 10px 16px;
  border: 1.5px solid var(--border); border-radius: var(--radius);
  background: var(--bg-card); color: var(--text); font-size: 14px;
  outline: none; transition: border-color var(--transition);
}
#enc-search:focus { border-color: var(--accent-light); }

/* Section grid */
#enc-section-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}
.enc-section-card {
  display: flex; align-items: flex-start; gap: 14px;
  background: var(--bg-card);
  border: 1.5px solid var(--border); border-radius: var(--radius);
  padding: 16px 18px; cursor: pointer;
  transition: border-color var(--transition), box-shadow var(--transition), transform 0.12s;
}
.enc-section-card:hover {
  border-color: var(--accent-light); box-shadow: var(--shadow-md); transform: translateY(-2px);
}
.enc-sec-icon { font-size: 28px; line-height: 1; flex-shrink: 0; }
.enc-sec-info { flex: 1; min-width: 0; }
.enc-sec-title { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 3px; }
.enc-sec-count {
  font-size: 11px; color: var(--accent); font-weight: 600;
  background: var(--accent-glow); border-radius: 4px; padding: 1px 6px;
  display: inline-block; margin-bottom: 6px;
}
.enc-sec-desc { font-size: 12px; color: var(--text-muted); line-height: 1.5; }

/* Article list */
#enc-articles-view, #enc-article-view { }
#enc-section-header {
  display: flex; align-items: flex-start; gap: 14px; margin-bottom: 24px;
}
#enc-section-icon { font-size: 32px; flex-shrink: 0; }
#enc-section-title { font-size: 22px; font-weight: 700; color: var(--text); margin: 0 0 4px; }
#enc-section-desc { font-size: 13px; color: var(--text-muted); margin: 0; }
.enc-article-card {
  background: var(--bg-card); border: 1.5px solid var(--border);
  border-radius: var(--radius); padding: 14px 18px; margin-bottom: 10px;
  cursor: pointer; transition: border-color var(--transition), box-shadow var(--transition);
}
.enc-article-card:hover { border-color: var(--accent-light); box-shadow: var(--shadow-sm); }
.enc-art-title { font-size: 15px; font-weight: 600; color: var(--text); margin-bottom: 4px; }
.enc-art-summary { font-size: 13px; color: var(--text-muted); line-height: 1.5; }

/* Back buttons */
#enc-back-sections, #enc-back-articles {
  background: none; border: 1.5px solid var(--border); border-radius: var(--radius);
  color: var(--text-muted); font-size: 13px; padding: 7px 14px;
  cursor: pointer; margin-bottom: 20px;
  transition: color var(--transition), border-color var(--transition);
}
#enc-back-sections:hover, #enc-back-articles:hover { color: var(--accent); border-color: var(--accent); }

/* Article content */
#enc-article-meta {
  font-size: 12px; color: var(--text-muted); margin-bottom: 8px;
  font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
}
#enc-article-title {
  font-size: 24px; font-weight: 700; color: var(--text); margin: 0 0 10px; line-height: 1.3;
}
#enc-article-summary {
  font-size: 15px; color: var(--text-muted); font-style: italic;
  margin: 0 0 24px; padding-bottom: 20px; border-bottom: 1px solid var(--border);
  line-height: 1.6;
}
#enc-article-body {
  font-size: 15px; line-height: 1.9; color: var(--text);
}
#enc-article-body p { margin: 0 0 14px; }

/* Heading hierarchy inside articles */
#enc-article-body h2 {
  font-size: 19px; font-weight: 700; color: var(--text);
  margin: 36px 0 10px; padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
#enc-article-body h3 {
  font-size: 16px; font-weight: 700; color: var(--accent);
  margin: 28px 0 8px;
}
/* CAPS section headings (ТЕЛО:, КАК ЕСТЬ:) and short mixed-case titles */
#enc-article-body h4 {
  font-size: 13px; font-weight: 700; color: var(--accent);
  margin: 22px 0 6px; letter-spacing: 0.04em;
}
/* Mixed-case sub-headings (Три тонких сущности, Прана в пище и воздухе) */
#enc-article-body h4.enc-h4-sub {
  font-size: 14px; letter-spacing: 0.01em; margin: 20px 0 5px;
}

#enc-article-body ul { margin: 0 0 14px; padding-left: 22px; }
#enc-article-body li { margin-bottom: 7px; }

/* Comparison & data tables */
.enc-table {
  width: 100%; border-collapse: collapse;
  margin: 0 0 18px; font-size: 14px;
}
.enc-table th, .enc-table td {
  padding: 8px 14px; border: 1px solid var(--border);
  text-align: left; vertical-align: top;
}
.enc-table th {
  background: var(--bg-comment); font-weight: 700;
  color: var(--text); font-size: 12.5px;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.enc-table td { background: var(--bg-card); }
.enc-table tr:nth-child(even) td {
  background: color-mix(in srgb, var(--bg-comment) 50%, var(--bg-card));
}

/* Blockquotes (> text) */
.enc-quote {
  border-left: 3px solid var(--accent-light);
  margin: 0 0 16px; padding: 8px 16px;
  color: var(--text-muted); font-style: italic;
  background: color-mix(in srgb, var(--accent-light) 6%, var(--bg));
  border-radius: 0 6px 6px 0;
}
#enc-article-sources {
  margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--border);
}
.enc-sources-label {
  font-size: 11px; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 8px;
}
.enc-source-tag {
  display: inline-block; font-size: 12px;
  background: var(--bg-comment); border: 1px solid var(--border);
  border-radius: 4px; padding: 3px 9px; margin: 3px 4px 3px 0;
  color: var(--text-muted);
}

/* Search results */
#enc-search-results { margin-top: 4px; }
.enc-search-result {
  background: var(--bg-card); border: 1.5px solid var(--border);
  border-radius: var(--radius); padding: 12px 16px; margin-bottom: 8px; cursor: pointer;
  transition: border-color var(--transition);
}
.enc-search-result:hover { border-color: var(--accent-light); }
.enc-res-section { font-size: 11px; color: var(--text-muted); margin-bottom: 4px; }
.enc-res-title { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 3px; }
.enc-res-summary { font-size: 13px; color: var(--text-muted); }

/* References */
#ref-header h2 { font-size: 26px; font-weight: 700; color: var(--text); margin: 0 0 4px; }
.ref-subtitle { color: var(--text-muted); font-size: 13px; margin: 0 0 28px; }
.ref-card {
  background: var(--bg-card); border: 1.5px solid var(--border);
  border-radius: var(--radius); padding: 18px 22px; margin-bottom: 12px;
}
.ref-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.ref-title { font-size: 16px; font-weight: 700; color: var(--text); }
.ref-category {
  font-size: 11px; font-weight: 600; background: var(--accent-glow);
  color: var(--accent); border-radius: 4px; padding: 2px 8px; white-space: nowrap; flex-shrink: 0;
}
.ref-author { font-size: 14px; color: var(--accent); margin-bottom: 2px; }
.ref-year { font-size: 12px; color: var(--text-muted); margin-bottom: 10px; }
.ref-desc { font-size: 13.5px; color: var(--text); line-height: 1.7; }

/* Section content */
#library-content { }
#library-section-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 20px;
  line-height: 1.3;
}
#library-section-body {
  font-size: 14.5px;
  line-height: 1.85;
  color: var(--text);
}
#library-section-body p { margin: 0 0 14px; }
#library-section-body h4 {
  font-size: 13px;
  font-weight: 700;
  color: var(--comment-tag);
  margin: 20px 0 8px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
#library-section-body ul { margin: 0 0 14px; padding-left: 22px; }
#library-section-body li { margin-bottom: 6px; }

/* ── Scrollbar ────────────────────────────────────── */
#chapter-nav::-webkit-scrollbar-track,
#content::-webkit-scrollbar-track { background: transparent; }

/* ── Responsive ───────────────────────────────────── */
@media (max-width: 640px) {
  :root { --sidebar-w: 240px; }
  #chapter-view, #search-results { padding: 20px 14px 60px; }
  /* Больше ширины тексту: уменьшаем боковые отступы карточек стихов */
  .block-verse { padding: 14px 15px; }
  .block-comment { padding: 12px 14px 12px 16px; }
  .block-text { padding: 0 2px; }
  #chapter-title { font-size: 23px; line-height: 1.25; }
  .verse-devanagari { font-size: 17px; line-height: 1.85; }
  /* Заголовок главы и контролы — перенос, чтобы не теснились */
  #chapter-header-top { flex-wrap: wrap; gap: 8px; }
}

/* ── Quiz ─────────────────────────────────────────── */
#quiz-view {
  max-width: 740px;
  margin: 0 auto;
  padding: 40px 24px 80px;
}

#quiz-intro-inner {
  text-align: center;
  padding: 60px 32px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 18px;
}
#quiz-intro-icon {
  font-size: 64px;
  margin-bottom: 16px;
  line-height: 1;
}
#quiz-intro-inner h2 {
  font-size: 28px;
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--text);
}
.quiz-subtitle {
  font-size: 16px;
  color: var(--comment-tag);
  margin: 0 0 16px;
}
.quiz-desc {
  font-size: 14.5px;
  color: var(--text);
  opacity: 0.8;
  margin: 0 0 24px;
  line-height: 1.7;
}
.quiz-scale-legend {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--text);
  opacity: 0.7;
  margin-bottom: 32px;
}
.ql-sep { opacity: 0.4; }

.quiz-start-btn {
  background: var(--accent);
  color: white;
  border: none;
  padding: 14px 36px;
  border-radius: 50px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity .15s;
}
.quiz-start-btn:hover { opacity: 0.88; }

/* Progress bar */
#quiz-progress-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 28px;
  position: sticky;
  top: 0;
  background: var(--bg);
  padding: 12px 0;
  z-index: 10;
}
#quiz-progress-bar {
  flex: 1;
  height: 6px;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
}
#quiz-progress-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 3px;
  transition: width .3s ease;
  width: 0%;
}
#quiz-progress-label {
  font-size: 12px;
  color: var(--text);
  opacity: 0.6;
  white-space: nowrap;
}

/* Quiz section */
.quiz-section {
  margin-bottom: 36px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
}
.quiz-section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px;
  background: var(--dosha-color, var(--accent));
  color: white;
}
.quiz-sec-emoji { font-size: 22px; }
.quiz-sec-label { font-size: 16px; font-weight: 700; flex: 1; }
.quiz-sec-count { font-size: 12px; opacity: 0.85; }

.quiz-q-row {
  padding: 16px 20px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.quiz-q-text {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text);
}
.quiz-slider-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}
.quiz-slider-lo,
.quiz-slider-hi {
  font-size: 12px;
  color: var(--text);
  opacity: 0.5;
  min-width: 14px;
}
.quiz-slider {
  flex: 1;
  accent-color: var(--accent);
  cursor: pointer;
}
.quiz-slider-val {
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  min-width: 16px;
  text-align: right;
}

#quiz-submit-wrap {
  text-align: center;
  padding: 20px 0 0;
}

/* Result */
#quiz-result-inner {
  padding-top: 8px;
}
.quiz-back-btn {
  background: none;
  border: 1px solid var(--border);
  color: var(--text);
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  margin-bottom: 24px;
}
.quiz-back-btn:hover { background: var(--bg-hover); }

#quiz-scores-chart {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px 24px;
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.quiz-bar-wrap {
  display: grid;
  grid-template-columns: 90px 1fr 48px 70px;
  align-items: center;
  gap: 10px;
}
.quiz-bar-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.quiz-bar-track {
  height: 14px;
  background: var(--border);
  border-radius: 7px;
  overflow: hidden;
}
.quiz-bar-fill {
  height: 100%;
  border-radius: 7px;
  transition: width .6s ease;
}
.quiz-bar-pct {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  text-align: right;
}
.quiz-bar-pts {
  font-size: 12px;
  color: var(--text);
  opacity: 0.5;
}

#quiz-result-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 28px 28px 24px;
  text-align: center;
  margin-bottom: 24px;
}
.quiz-result-emoji { font-size: 54px; margin-bottom: 12px; }
.quiz-result-title {
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 4px;
  color: var(--text);
}
.quiz-result-subtitle {
  font-size: 14px;
  color: var(--comment-tag);
  margin: 0 0 14px;
}
.quiz-result-traits {
  font-size: 15px;
  line-height: 1.65;
  color: var(--text);
  margin: 0 0 20px;
}
.quiz-balance-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.quiz-balance-item {
  font-size: 13.5px;
  padding: 10px 14px;
  border-radius: 8px;
  text-align: left;
  line-height: 1.5;
}
.quiz-balance-pos { background: rgba(91,158,130,.15); color: var(--text); }
.quiz-balance-neg { background: rgba(224,123,84,.12); color: var(--text); }

#quiz-recommendations {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 24px 28px;
}
#quiz-recommendations h3 {
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 16px;
  color: var(--text);
}
.quiz-rec-list {
  margin: 0 0 16px;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.quiz-rec-list li {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text);
}
.quiz-enc-hint {
  font-size: 13px;
  color: var(--text);
  opacity: 0.65;
}
.quiz-enc-hint a {
  color: var(--accent);
  text-decoration: none;
}
.quiz-enc-hint a:hover { text-decoration: underline; }

@media (max-width: 640px) {
  #quiz-view { padding: 24px 14px 60px; }
  .quiz-bar-wrap { grid-template-columns: 70px 1fr 38px; }
  .quiz-bar-pts { display: none; }
}

/* ── Food Table ───────────────────────────────────── */
#foodtable-view {
  padding: 32px 36px 60px;
  max-width: 1000px;
  margin: 0 auto;
}
#ft-header { margin-bottom: 24px; }
#ft-header h2 {
  font-size: 26px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 8px;
}
.ft-subtitle {
  font-size: 14px;
  color: var(--text);
  opacity: 0.6;
  margin: 0 0 18px;
  line-height: 1.5;
}
#ft-search-wrap { margin-bottom: 14px; }
#ft-search {
  width: 100%;
  max-width: 380px;
  padding: 9px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-card);
  color: var(--text);
  font-size: 14px;
  outline: none;
  box-sizing: border-box;
}
#ft-search:focus { border-color: var(--accent); }

#ft-cat-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 4px;
}
.ft-cat-btn {
  padding: 5px 12px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text);
  font-size: 12.5px;
  cursor: pointer;
  transition: background .15s, border-color .15s;
  white-space: nowrap;
}
.ft-cat-btn:hover { border-color: var(--accent); }
.ft-cat-btn.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.ft-section { margin-bottom: 36px; }
.ft-cat-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ft-cat-icon { font-size: 20px; }

.ft-table { display: flex; flex-direction: column; gap: 0; }
.ft-row {
  display: grid;
  grid-template-columns: 210px 60px 60px 1fr;
  align-items: center;
  padding: 5px 10px;
  border-radius: 7px;
  transition: background .12s;
}
.ft-row:not(.ft-thead):hover { background: rgba(120,120,120,.08); }
.ft-thead {
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  opacity: 0.45;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 2px;
}
.ft-cell { font-size: 13.5px; color: var(--text); }
.ft-name { font-size: 13.5px; }
.ft-time {
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  font-weight: 600;
}

/* Bar */
.ft-bar { padding: 2px 0; }
.ft-bar-header {
  display: flex;
  justify-content: space-between;
  font-size: 9.5px;
  color: var(--text);
  opacity: 0.38;
  padding: 0 0 3px;
}
.ft-bar-track {
  position: relative;
  height: 10px;
  background: var(--border);
  border-radius: 5px;
  overflow: hidden;
}
.ft-bar-fill {
  position: absolute;
  top: 0;
  height: 100%;
  background: var(--accent);
  border-radius: 5px;
  opacity: 0.7;
}
.ft-bar-labels { display: none; }

@media (max-width: 700px) {
  #foodtable-view { padding: 20px 14px 60px; }
  .ft-row {
    grid-template-columns: 1fr 52px 52px;
    grid-template-rows: auto auto;
  }
  .ft-row .ft-bar {
    grid-column: 1 / -1;
    padding: 2px 0 6px;
  }
  .ft-thead .ft-bar { display: none; }
}

/* ── Donate / Author page ─────────────────────────── */
.sidebar-footer-btn--donate {
  margin-top: 6px;
  border-top: 1px solid var(--border);
  padding-top: 10px;
  color: var(--accent);
  opacity: 0.9;
}
.sidebar-footer-btn--donate:hover { opacity: 1; }

#donate-view {
  padding: 40px 40px 80px;
  max-width: 620px;
  margin: 0 auto;
}
#donate-inner { display: flex; flex-direction: column; align-items: center; }
#donate-avatar { font-size: 52px; margin-bottom: 16px; }
#donate-title {
  font-size: 26px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 16px;
  text-align: center;
}
.donate-desc {
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--text-muted);
  text-align: center;
  margin: 0 0 12px;
  max-width: 520px;
}
#donate-cards {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  margin: 28px 0 16px;
}
.donate-card {
  background: var(--bg-sidebar);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px 20px;
}
.donate-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.donate-logo {
  width: 32px; height: 32px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 800;
  flex-shrink: 0;
  line-height: 1;
}
.donate-logo--sber { background: #21a038; color: #fff; }
.donate-logo--btc  { background: #f7931a; color: #fff; }
.donate-logo--usdt  { background: #26a17b; color: #fff; }
.donate-logo--eth   { background: #627eea; color: #fff; }
.donate-logo--email { background: #607d8b; color: #fff; }
.donate-card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.donate-field-group { display: flex; flex-direction: column; gap: 8px; }
.donate-field {
  display: flex;
  align-items: center;
  gap: 10px;
}
.donate-label {
  font-size: 12px;
  color: var(--text-muted);
  min-width: 130px;
  flex-shrink: 0;
}
.donate-copy {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-hover);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 10px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
  font-family: 'Courier New', monospace;
}
.donate-copy:hover {
  border-color: var(--accent);
  background: var(--bg-active);
}
.donate-copy.donate-copied {
  border-color: #21a038;
  background: color-mix(in srgb, #21a038 10%, var(--bg));
}
.donate-value {
  font-size: 14px;
  color: var(--text);
  letter-spacing: 0.02em;
  user-select: all;
}
.donate-value.donate-btc {
  font-size: 12px;
  letter-spacing: 0.01em;
  word-break: break-all;
}
.donate-value.donate-recipient {
  font-size: 14px;
  font-family: inherit;
  color: var(--text);
}
.donate-copy-icon {
  font-size: 16px;
  color: var(--text-muted);
  flex-shrink: 0;
  transition: color .15s;
}
.donate-copy:hover .donate-copy-icon { color: var(--accent); }
.donate-copied .donate-copy-icon { color: #21a038; }
.donate-note {
  font-size: 12px;
  color: var(--text-muted);
  opacity: 0.65;
  text-align: center;
  margin: 0;
}

/* ── Footer disclaimer ────────────────────────────── */
#site-footer {
  position: fixed;
  bottom: 0;
  left: var(--sidebar-w);
  right: 0;
  z-index: 200;
  pointer-events: none;
}
#footer-disclaimer {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 16px 8px 20px;
  background: var(--bg-sidebar);
  border-top: 1px solid var(--border);
  backdrop-filter: blur(6px);
  pointer-events: auto;
  transition: padding var(--transition);
}
.footer-icon {
  font-size: 14px;
  flex-shrink: 0;
  opacity: 0.55;
  padding-top: 1px;
}
.disclaimer-summary {
  display: none; /* desktop: hidden; mobile collapsed: shown */
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  opacity: 0.55;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  align-self: center;
}
#footer-disclaimer p {
  font-size: 11px;
  line-height: 1.5;
  color: var(--text);
  opacity: 0.5;
  margin: 0;
  flex: 1;
}
#footer-disclaimer strong { opacity: 0.75; font-weight: 600; }
#disclaimer-close {
  flex-shrink: 0;
  margin-left: 4px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 14px;
  opacity: 0.45;
  padding: 2px 4px;
  line-height: 1;
  align-self: flex-start;
  transition: opacity var(--transition);
}
#disclaimer-close:hover { opacity: 0.9; }

/* ── Mobile sidebar behaviour ─────────────────────── */
@media (max-width: 640px) {
  /* Donate: stack label above value on narrow screens */
  .donate-field {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .donate-label { min-width: unset; }
  .donate-copy  { width: 100%; box-sizing: border-box; }
  .donate-value { word-break: break-all; }
}

@media (max-width: 640px) {
  /* Sidebar slides in from left as overlay */
  #sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 300;
    transform: translateX(-100%);
    transition: transform 0.25s ease, background var(--transition);
  }
  body.sidebar-open #sidebar {
    transform: translateX(0);
    box-shadow: 4px 0 32px rgba(0, 0, 0, 0.22);
  }
  body.sidebar-open #sidebar-overlay { display: block; }

  #sidebar-close { display: flex; }
  #menu-btn { display: flex; }
  body.sidebar-open #menu-btn { display: none; }

  /* Content: full width, top clearance for menu btn, bottom for compact disclaimer */
  #content {
    padding-top: 54px;
    padding-bottom: 36px; /* height of collapsed disclaimer */
  }

  /* Footer spans full width (sidebar is overlay) */
  #site-footer { left: 0; }

  /* Disclaimer: collapsed by default on mobile */
  #footer-disclaimer {
    padding: 7px 10px;
    align-items: center;
    cursor: pointer;
  }
  #footer-disclaimer p { display: none; }      /* hide full text */
  .disclaimer-summary { display: block; }      /* show short label */
  .footer-icon { padding-top: 0; }

  /* Expanded state */
  #footer-disclaimer.expanded {
    align-items: flex-start;
    cursor: default;
    padding: 8px 10px;
  }
  #footer-disclaimer.expanded p { display: block; }
  #footer-disclaimer.expanded .disclaimer-summary { display: none; }
  #footer-disclaimer.expanded .footer-icon { padding-top: 1px; }

  /* When expanded, content needs more bottom padding */
  body.disclaimer-expanded #content { padding-bottom: 130px; }
}

/* ══ Кабинет экспертов ══════════════════════════════ */
#cabinet-view { max-width: 760px; margin: 0 auto; padding: 8px 4px 60px; }
.cabinet-inner h2 { font-size: 22px; color: var(--accent); margin-bottom: 12px; }
.cabinet-desc { font-size: 14px; line-height: 1.7; color: var(--text); margin-bottom: 16px; }
.cabinet-note { font-size: 12px; color: var(--text-muted); margin-top: 12px; }
#tg-login-box { margin: 16px 0; min-height: 48px; }
.cabinet-user {
  display: flex; align-items: center; gap: 12px;
  padding: 14px; background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); margin-bottom: 18px;
}
.cabinet-avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover;
  display: flex; align-items: center; justify-content: center; font-size: 24px;
  background: var(--bg-hover); flex-shrink: 0; }
.cabinet-name { font-weight: 600; color: var(--text); }
.cabinet-role { font-size: 12px; color: var(--accent); margin-top: 2px; }
#cabinet-logout { margin-left: auto; padding: 6px 14px; font-size: 12px;
  background: var(--bg-hover); border: 1px solid var(--border); border-radius: 16px;
  color: var(--text-muted); cursor: pointer; transition: all var(--transition); }
#cabinet-logout:hover { border-color: var(--accent); color: var(--accent); }

/* Админ-панель */
#admin-panel { margin-top: 22px; }
#admin-panel h3 { font-size: 16px; color: var(--accent); margin-bottom: 12px; }
.admin-card { padding: 12px 14px; background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); margin-bottom: 10px; }
.admin-meta { font-size: 11px; color: var(--text-muted); margin-bottom: 6px; letter-spacing: .02em; }
.admin-old { font-size: 13px; color: #b4503c; opacity: .8; margin-bottom: 4px; }
.admin-new { font-size: 14px; color: var(--text); line-height: 1.6; }
.admin-comment { font-size: 12px; color: var(--text-muted); margin-top: 6px; font-style: italic; }
.admin-actions { display: flex; gap: 8px; margin-top: 10px; }
.admin-approve, .admin-reject { padding: 5px 14px; font-size: 12px; font-weight: 600;
  border-radius: 16px; cursor: pointer; border: 1px solid var(--border); transition: all var(--transition); }
.admin-approve { color: #3c7a4a; } .admin-approve:hover { background: rgba(60,122,74,.12); border-color: #3c7a4a; }
.admin-reject { color: #b4503c; } .admin-reject:hover { background: rgba(180,80,60,.12); border-color: #b4503c; }
.admin-done { font-size: 12px; font-weight: 600; color: var(--text-muted); }

/* Кнопка «предложить правку» у стиха */
.verse-edit-btn {
  margin-top: 10px; padding: 3px 12px; font-size: 11px; font-weight: 600;
  background: transparent; border: 1px dashed var(--border-strong); border-radius: 14px;
  color: var(--text-muted); cursor: pointer; transition: all var(--transition);
}
.verse-edit-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-glow); }

/* Действия со стихом: поделиться / озвучить */
.verse-actions { display: inline-flex; gap: 6px; margin-top: 10px; margin-right: 8px; }
.verse-act {
  width: 30px; height: 26px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; background: transparent; border: 1px solid var(--border); border-radius: 13px;
  color: var(--text-muted); cursor: pointer; transition: all var(--transition); line-height: 1;
}
.verse-act:hover { border-color: var(--accent); background: var(--bg-hover); }
.verse-act--tts.playing { border-color: var(--accent); color: var(--accent); background: var(--accent-glow); }

/* Кнопка «поделиться» для статей / средств / терминов глоссария */
.card-share {
  background: transparent; border: 1px solid var(--border); border-radius: 14px;
  color: var(--text-muted); cursor: pointer; font: inherit; font-size: 12.5px;
  padding: 4px 10px; transition: all var(--transition);
}
.card-share:hover { border-color: var(--accent); color: var(--accent); background: var(--bg-hover); }
.card-share--inline { display: inline-flex; align-items: center; gap: 5px; margin-top: 16px; }
.glossary-card { position: relative; }
.glossary-card .card-share { position: absolute; top: 10px; right: 10px; opacity: .5; padding: 2px 8px; }
.glossary-card .card-share:hover, .glossary-card:hover .card-share { opacity: 1; }

/* Переход к стиху по номеру (длинные главы) */
.verse-jump { display: inline-flex; gap: 4px; align-items: center; }
.verse-jump input {
  width: 70px; padding: 4px 9px; font-size: 12px; font-family: inherit;
  border: 1px solid var(--border); border-radius: 14px; background: var(--search-bg, transparent); color: var(--text); outline: none;
}
.verse-jump input:focus { border-color: var(--accent); }
.verse-jump button {
  padding: 4px 10px; border: 1px solid var(--border); border-radius: 14px;
  background: transparent; color: var(--text-muted); cursor: pointer; font-size: 13px;
}
.verse-jump button:hover { border-color: var(--accent); color: var(--accent); }

/* Кнопка «↑ наверх» (длинные главы) */
#back-to-top {
  position: fixed; right: 18px; bottom: 18px; z-index: 200;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--accent); color: #fff; border: none; cursor: pointer;
  font-size: 20px; line-height: 1; box-shadow: 0 3px 12px rgba(0,0,0,.25);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .2s, transform .2s, visibility .2s;
}
#back-to-top.show { opacity: .92; visibility: visible; transform: translateY(0); }
#back-to-top:hover { opacity: 1; }

/* Подсветка стиха при переходе по permalink */
.block-verse.verse-target { animation: verseTargetPulse 2.6s ease; border-radius: 10px; }
@keyframes verseTargetPulse {
  0%, 100% { box-shadow: 0 0 0 0 transparent; background: transparent; }
  12%, 55% { box-shadow: 0 0 0 2px var(--accent); background: color-mix(in srgb, var(--accent) 9%, transparent); }
}

/* Тост-уведомление (копирование ссылки и т.п.) */
#app-flash {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(20px);
  background: var(--accent); color: #fff; padding: 10px 18px; border-radius: 22px;
  font-size: 13px; font-weight: 600; box-shadow: 0 6px 24px rgba(0,0,0,.25);
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 400;
}
#app-flash.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Главная: продолжить чтение + стих дня */
#home-cards { display: flex; flex-direction: column; gap: 12px; margin: 0 0 26px; text-align: left; }
.home-resume {
  display: flex; align-items: center; gap: 12px; width: 100%; cursor: pointer; font-family: inherit;
  padding: 12px 16px; background: var(--accent-glow); border: 1px solid var(--accent-light);
  border-radius: 10px; transition: all var(--transition); text-align: left;
}
.home-resume:hover { background: var(--bg-hover); transform: translateY(-1px); }
.home-resume-icon { font-size: 20px; color: var(--accent); }
.home-resume-text { display: flex; flex-direction: column; }
.home-resume-text b { font-size: 14px; color: var(--accent); }
.home-resume-text span { font-size: 12.5px; color: var(--text); opacity: .85; }
.home-vod {
  padding: 16px 18px; background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 10px; text-align: center;
}
.home-vod-label { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px; }
.home-vod-text { font-family: var(--font-serif); font-size: 16px; line-height: 1.6; color: var(--text); font-style: italic; margin-bottom: 6px; }
.home-vod-iast { font-size: 13px; line-height: 1.55; color: var(--text-muted); font-style: italic; margin-bottom: 12px; }
.home-vod-link { background: none; border: none; cursor: pointer; font: inherit; font-size: 13px; color: var(--accent); font-weight: 600; }
.home-vod-link:hover { text-decoration: underline; }

/* Тач-таргеты ≥44px на мобильном (кнопки бокового меню) */
@media (max-width: 640px) {
  .sidebar-footer-btn { padding: 11px 12px; }
}

/* Перевод, добавленный экспертом */
.verse-translation {
  margin-top: 10px; padding: 10px 14px; border-left: 3px solid var(--comment-tag);
  background: color-mix(in srgb, var(--comment-tag) 8%, transparent);
  border-radius: 0 6px 6px 0; font-size: 14.5px; line-height: 1.7; color: var(--text);
}
.verse-translation::before { content: 'Перевод эксперта'; display: block;
  font-size: 10px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--comment-tag); font-weight: 700; margin-bottom: 4px; }

/* Модалка правки */
#proposal-modal { position: fixed; inset: 0; z-index: 400; display: none; }
#proposal-modal.open { display: block; }
.pm-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.5); }
.pm-box { position: relative; max-width: 520px; margin: 8vh auto 0; background: var(--bg-card);
  border: 1px solid var(--border-strong); border-radius: 12px; padding: 20px;
  box-shadow: 0 12px 48px rgba(0,0,0,.3); max-height: 84vh; overflow-y: auto; }
.pm-head { font-size: 16px; font-weight: 600; color: var(--accent); margin-bottom: 4px; }
.pm-loc { display: block; font-size: 12px; color: var(--text-muted); font-weight: 400; margin-top: 2px; }
.pm-old { font-size: 12.5px; color: var(--text-muted); background: var(--bg-hover);
  padding: 8px 10px; border-radius: 6px; margin: 10px 0; line-height: 1.5; }
.pm-label { display: block; font-size: 12px; color: var(--text-muted); margin: 12px 0 4px; }
#pm-field, #pm-value, #pm-comment { width: 100%; padding: 8px 12px; font-size: 14px;
  background: var(--search-bg); border: 1px solid var(--border); border-radius: 8px;
  color: var(--text); outline: none; font-family: inherit; }
#pm-field:focus, #pm-value:focus, #pm-comment:focus { border-color: var(--accent); }
#pm-value { resize: vertical; }

/* Форма «Предложить статью» в кабинете */
.art-block { margin: 18px 0; padding-top: 12px; border-top: 1px solid var(--border); }
#art-collection, .art-field { width: 100%; padding: 8px 12px; font-size: 14px;
  background: var(--search-bg); border: 1px solid var(--border); border-radius: 8px;
  color: var(--text); outline: none; font-family: inherit; }
#art-collection:focus, .art-field:focus { border-color: var(--accent); }
textarea.art-field { resize: vertical; }
.pm-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; }
.pm-cancel, .pm-submit { padding: 8px 18px; font-size: 13px; font-weight: 600;
  border-radius: 18px; cursor: pointer; border: 1px solid var(--border); transition: all var(--transition); }
.pm-cancel { background: var(--bg-hover); color: var(--text-muted); }
.pm-submit { background: var(--accent); color: #fff; border-color: var(--accent); }
.pm-submit:hover { opacity: .9; }

/* Тост */
#cabinet-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: #2c2416; color: #fff; padding: 12px 22px; border-radius: 24px; font-size: 13.5px;
  box-shadow: 0 6px 24px rgba(0,0,0,.3); opacity: 0; pointer-events: none;
  transition: all .3s ease; z-index: 500; max-width: 90vw; text-align: center; }
#cabinet-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
#cabinet-toast.err { background: #8a3324; }
body.dark #cabinet-toast { background: #3d3220; }

/* ══ Монетизация: витрина и paywall ═════════════════ */
.cabinet-access-box {
  padding: 10px 14px; background: var(--accent-glow); border: 1px solid var(--accent-light);
  border-radius: var(--radius); color: var(--accent); font-size: 13.5px; font-weight: 600; margin-bottom: 16px;
}
.store-h { font-size: 16px; color: var(--accent); margin: 18px 0 12px; }
.store-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.store-card {
  padding: 14px; background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); display: flex; flex-direction: column; gap: 6px;
}
.store-card--hl { border-color: var(--accent-light); box-shadow: 0 0 0 1px var(--accent-light); }
.store-badge { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }
.store-title { font-size: 15px; font-weight: 600; color: var(--text); }
.store-desc { font-size: 12.5px; color: var(--text-muted); line-height: 1.5; flex: 1; }
.store-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.store-price { font-size: 17px; font-weight: 700; color: var(--accent); }
.store-buy {
  padding: 6px 16px; font-size: 13px; font-weight: 600; background: var(--accent); color: #fff;
  border: none; border-radius: 18px; cursor: pointer; transition: opacity var(--transition);
}
.store-buy:hover { opacity: .9; }

.paywall { max-width: 620px; margin: 20px auto; text-align: center; padding: 24px 16px; }
.paywall-icon { font-size: 44px; margin-bottom: 10px; }
.paywall-title { font-size: 20px; color: var(--accent); margin-bottom: 10px; }
.paywall-desc { font-size: 14px; line-height: 1.7; color: var(--text); margin-bottom: 18px; }
.paywall-store { text-align: left; margin-bottom: 14px; }
.paywall-note { font-size: 12px; color: var(--text-muted); }

.sub-cancel-btn {
  margin: 0 0 16px; padding: 6px 14px; font-size: 12px; font-weight: 600;
  background: transparent; border: 1px solid var(--border); border-radius: 16px;
  color: var(--text-muted); cursor: pointer; transition: all var(--transition);
}
.sub-cancel-btn:hover { border-color: #b4503c; color: #b4503c; }

/* Тест-вход (только localhost / TEST_LOGIN) */
.dev-login-wrap { margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--border); }
.dev-login-btn {
  padding: 10px 18px; font-size: 14px; font-weight: 600; font-family: inherit;
  background: var(--bg-hover); border: 1px dashed var(--accent); border-radius: 8px;
  color: var(--accent); cursor: pointer; transition: all var(--transition);
}
.dev-login-btn:hover { background: var(--accent); color: var(--bg); }

/* Индикатор ленивой загрузки книги */
.nav-loading {
  padding: 20px 16px; text-align: center; color: var(--text-muted);
  font-size: 13px; font-style: italic;
  grid-column: 1 / -1;        /* в гридах (энциклопедия/средства) занимает всю ширину */
  min-height: 120px; display: flex; align-items: center; justify-content: center;
}

/* Индикатор офлайн-режима (PWA) */
#offline-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 350;
  background: #8a6d3b; color: #fff;
  font-size: 12.5px; text-align: center; padding: 7px 12px;
  transform: translateY(-100%); transition: transform 0.25s ease;
}
#offline-banner.show { transform: translateY(0); }

/* Оригинал (санскрит) в модалке перевода */
.pm-orig {
  background: var(--bg-verse); border: 1px solid var(--border);
  border-radius: 8px; padding: 10px 12px; margin: 10px 0;
}
.pm-orig-dev {
  font-family: 'Noto Sans Devanagari', serif; font-size: 16px;
  line-height: 1.8; color: var(--accent); margin-bottom: 4px;
}
.pm-orig-iast { font-family: var(--font-serif); font-style: italic; font-size: 13px; color: var(--text-muted); }
/* Кнопка «Добавить перевод» — акцентная */
.verse-edit-btn--translate { border-style: solid; border-color: var(--accent-light); color: var(--accent); }