:root {
  --ink: #17213f;
  --muted: #66708b;
  --line: #dfe7f4;
  --paper: #ffffff;
  --sky: #eef7ff;
  --blue: #4c63d8;
  --blue-deep: #3246b5;
  --coral: #ff746f;
  --yellow: #ffd66b;
  --body-size: 22px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans SC", sans-serif;
  color: var(--ink);
  background: var(--sky);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: linear-gradient(135deg, #f7fbff 0%, #eef6ff 52%, #fff8ec 100%); }
button, input { font: inherit; }
button { color: inherit; }
.topbar { position: sticky; top: 0; z-index: 20; height: 72px; padding: 0 28px; display: flex; align-items: center; justify-content: space-between; background: rgba(255,255,255,.88); border-bottom: 1px solid rgba(76,99,216,.14); backdrop-filter: blur(18px); }
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; color: white; background: var(--blue); font-family: Georgia, serif; font-size: 22px; box-shadow: 0 8px 22px rgba(76,99,216,.22); }
.brand strong, .brand small { display: block; }
.brand strong { font-size: 17px; letter-spacing: .04em; }
.brand small { margin-top: 2px; color: var(--muted); font-family: Georgia, serif; font-size: 12px; }
.top-actions { display: flex; gap: 10px; align-items: center; }
.icon-button, .text-button, .chapter-nav button { border: 1px solid var(--line); background: white; border-radius: 12px; cursor: pointer; }
.icon-button { min-width: 42px; height: 42px; padding: 0 10px; font-weight: 700; }
.verse-jump { height: 42px; display: flex; align-items: center; gap: 7px; padding: 0 12px; border: 1px solid var(--line); border-radius: 12px; background: white; color: var(--muted); font-size: 14px; }
.verse-jump input { width: 48px; border: 0; outline: 0; color: var(--ink); background: transparent; }
.reader-shell { max-width: 1440px; margin: 0 auto; display: grid; grid-template-columns: 260px minmax(0, 860px); justify-content: center; gap: 48px; padding: 34px 36px 90px; }
.chapter-panel { align-self: start; position: sticky; top: 106px; max-height: calc(100vh - 132px); display: flex; flex-direction: column; }
.panel-heading { display: flex; align-items: center; justify-content: space-between; margin: 0 8px 12px; font-size: 14px; font-weight: 750; letter-spacing: .12em; color: var(--muted); }
#chapterList { overflow: auto; padding-right: 6px; }
.chapter-link { width: 100%; padding: 11px 12px; display: grid; grid-template-columns: 30px 1fr auto; gap: 8px; align-items: center; border: 0; border-radius: 12px; background: transparent; text-align: left; cursor: pointer; }
.chapter-link:hover { background: rgba(255,255,255,.7); }
.chapter-link.active { color: var(--blue-deep); background: white; box-shadow: 0 7px 22px rgba(47,67,140,.08); }
.chapter-link .num { font: 16px Georgia, serif; color: var(--coral); }
.chapter-link .count { font-size: 12px; color: var(--muted); }
.source-note { margin-top: 20px; padding: 14px 15px; border-radius: 14px; background: rgba(255,255,255,.7); border: 1px solid rgba(76,99,216,.1); font-size: 12px; line-height: 1.7; color: var(--muted); }
.source-note b, .source-note span { display: block; }
.source-note b { margin-bottom: 3px; color: var(--ink); }
.source-button { margin: 8px 0 0; padding: 0; border: 0; color: var(--blue-deep); background: transparent; font-size: 12px; cursor: pointer; }
.chapter-head { min-height: 92px; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.chapter-head h1 { margin: 4px 0 0; font: 700 clamp(28px, 4vw, 42px)/1.12 Georgia, "Noto Serif SC", serif; }
#chapterEyebrow { color: var(--coral); font-size: 14px; font-weight: 700; letter-spacing: .13em; }
.chapter-progress { width: 130px; padding-bottom: 7px; font-size: 12px; text-align: right; color: var(--muted); }
.chapter-progress > div { height: 5px; margin-top: 7px; overflow: hidden; border-radius: 9px; background: #dfe7f4; }
.chapter-progress i { display: block; height: 100%; background: var(--coral); border-radius: inherit; }
.reading-tools { position: sticky; top: 86px; z-index: 12; margin: 24px 0 20px; display: flex; justify-content: space-between; gap: 12px; }
.reading-actions { display: flex; align-items: center; gap: 8px; }
.audio-source { padding: 9px 12px; border: 1px solid var(--line); border-radius: 12px; color: var(--blue-deep); background: rgba(255,255,255,.92); font-size: 13px; text-decoration: none; white-space: nowrap; }
.view-switch { display: inline-flex; padding: 4px; border: 1px solid rgba(76,99,216,.14); border-radius: 14px; background: rgba(255,255,255,.9); box-shadow: 0 10px 24px rgba(47,67,140,.06); }
.view-switch button { padding: 8px 13px; border: 0; border-radius: 10px; color: var(--muted); background: transparent; font-size: 13px; cursor: pointer; }
.view-switch button.active { color: white; background: var(--blue); }
.text-button { padding: 8px 12px; color: var(--blue-deep); font-size: 13px; }
.verse-list { display: grid; gap: 15px; }
.verse-card { position: relative; padding: 25px 29px 24px; border: 1px solid rgba(76,99,216,.11); border-radius: 19px; background: rgba(255,255,255,.92); box-shadow: 0 10px 34px rgba(47,67,140,.06); scroll-margin-top: 155px; }
.verse-card.bookmarked { border-color: rgba(255,116,111,.48); box-shadow: 0 10px 34px rgba(255,116,111,.09); }
.verse-number { position: absolute; left: -14px; top: 22px; min-width: 38px; height: 30px; padding: 0 7px; display: grid; place-items: center; border-radius: 10px; color: white; background: var(--coral); font: 700 13px Georgia, serif; box-shadow: 0 6px 14px rgba(255,116,111,.25); }
.bookmark { position: absolute; right: 17px; top: 16px; width: 34px; height: 34px; border: 0; border-radius: 10px; background: transparent; color: #a3acc1; cursor: pointer; }
.bookmark:hover, .bookmarked .bookmark { color: var(--coral); background: #fff2ef; }
.chinese-pair { margin-right: 34px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: stretch; }
.translation-panel { min-width: 0; padding: 16px 17px; border-radius: 14px; }
.translation-panel.primary { background: #f4f7ff; border: 1px solid #dfe6ff; }
.translation-panel.secondary { background: #fff9e8; border: 1px solid #f2e4ae; }
.translation-panel p { margin: 0; white-space: pre-line; font-family: "Noto Serif SC", "Songti SC", STSong, serif; letter-spacing: .025em; }
.translation-panel.primary p { color: var(--ink); font-size: var(--body-size); font-weight: 600; line-height: 1.82; }
.translation-panel.secondary p { color: #554a2e; font-size: calc(var(--body-size) - 2px); line-height: 1.78; }
.translation-label { display: block; margin-bottom: 10px; color: #717b96; font: 700 12px/1 sans-serif; letter-spacing: .08em; }
.translation-panel.secondary .translation-label { color: #8a7041; }
.alt-unavailable { color: #877a5b; font-size: 13px; line-height: 1.7; }
.sanskrit, .english { margin-top: 18px; padding-top: 17px; border-top: 1px solid var(--line); }
.sanskrit { color: var(--blue-deep); font: 18px/1.85 Georgia, "Times New Roman", serif; }
.language-head { margin-bottom: 7px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ref-label { color: #8790a7; font: 11px/1.2 ui-sans-serif, system-ui, sans-serif; letter-spacing: .02em; }
.sanskrit-text { white-space: pre-line; }
.english { color: #4e5873; font: 16px/1.7 Georgia, serif; white-space: pre-line; }
.language-label { margin-right: 9px; color: var(--muted); font: 700 10px/1 sans-serif; letter-spacing: .13em; text-transform: uppercase; }
.variant-note { margin: 15px 0 0; padding: 10px 12px; border-radius: 10px; color: #6a5728; background: #fff8dc; font-size: 13px; line-height: 1.55; }
.unavailable { margin-top: 16px; padding-top: 15px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }
body[data-view="sanskrit"] .english, body[data-view="english"] .sanskrit { display: none; }
.chapter-nav { margin-top: 25px; display: flex; justify-content: space-between; }
.chapter-nav button { padding: 12px 16px; }
.chapter-nav button:disabled { opacity: .35; cursor: default; }
dialog { width: min(420px, calc(100vw - 30px)); padding: 0; border: 0; border-radius: 20px; color: var(--ink); box-shadow: 0 28px 80px rgba(19,31,73,.24); }
dialog::backdrop { background: rgba(21,30,60,.28); backdrop-filter: blur(4px); }
dialog form { padding: 23px; }
.dialog-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.dialog-head h2 { margin: 0; font-size: 21px; }
.dialog-head button { border: 0; background: transparent; font-size: 25px; cursor: pointer; }
dialog label { display: grid; gap: 10px; margin: 18px 0; font-size: 15px; }
.setting-note { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.7; }
.source-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.source-links a { padding: 8px 10px; border-radius: 9px; color: var(--blue-deep); background: #edf1ff; font-size: 13px; text-decoration: none; }
#sourceDialog p { color: #4f5973; font-size: 14px; line-height: 1.75; }
.toggle-row { grid-template-columns: 1fr auto; align-items: center; }
.mobile-only { display: none; }
.scrim { display: none; }
.scrim[hidden] { display: none; }
@media (max-width: 880px) {
  .mobile-only { display: grid; place-items: center; }
  .topbar { padding: 0 14px; }
  .topbar > .mobile-only { margin-right: 8px; }
  .brand { margin-right: auto; }
  .brand-mark { display: none; }
  .verse-jump span { display: none; }
  .reader-shell { display: block; padding: 22px 18px 75px 28px; }
  .chapter-panel { position: fixed; inset: 0 auto 0 0; z-index: 40; width: min(320px, 84vw); max-height: none; padding: 22px 18px; background: #f6faff; transform: translateX(-105%); transition: transform .25s ease; box-shadow: 20px 0 60px rgba(24,35,78,.15); }
  .chapter-panel.open { transform: none; }
  #chapterList { flex: 1; }
  .scrim { position: fixed; inset: 0; z-index: 35; display: block; background: rgba(20,29,58,.24); }
  .reading-tools { top: 83px; overflow-x: auto; }
  .reading-actions { margin-left: auto; }
  .chapter-head { align-items: center; }
  .chapter-progress { width: 85px; }
  .verse-card { padding: 22px 19px 21px 24px; border-radius: 16px; }
  .verse-number { left: -11px; top: 20px; min-width: 34px; }
  .chinese-pair { margin-right: 28px; grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .brand small { display: none; }
  .verse-jump { padding: 0 9px; }
  .view-switch button { padding: 8px 10px; font-size: 12px; }
  .reading-tools { flex-wrap: wrap; overflow-x: visible; }
  .reading-actions { width: 100%; justify-content: flex-end; }
  .chapter-progress { display: none; }
}