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

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

: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:  #8a7b62;
  --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:  #8a7d62;
  --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);
}

#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;
  flex-direction: column;
  line-height: 1.2;
}
.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-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; }
.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: center;
  justify-content: center;
  min-height: 100vh;
  padding: 40px 24px;
}
.welcome-inner {
  max-width: 560px;
  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);
}
.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;
}

/* Font size button */
.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; }

/* 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.75;
  color: var(--text);
}

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

/* Mode 1: show-sanskrit — Devanagari + IAST */
#chapter-view.show-sanskrit .verse-devanagari,
#chapter-view.show-sanskrit .verse-iast      { display: block; }

/* Mode 2: show-iast-only — IAST only, no Devanagari */
#chapter-view.show-iast-only .verse-iast     { display: block; }
#chapter-view.show-iast-only .verse-devanagari { display: none; }

.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 button in chapter header ── */
.sanskrit-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 8px;
  padding: 4px 12px;
  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;
}
.sanskrit-toggle-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--bg-active);
}
#chapter-view.show-sanskrit .sanskrit-toggle-btn,
#chapter-view.show-iast-only .sanskrit-toggle-btn {
  border-color: var(--accent-light);
  color: var(--accent);
  background: var(--accent-glow);
}

.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; }

/* ── 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); }

/* 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: 24px 16px 60px; }
}

/* ── 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; }
}