:root {
  --accent:#0e8f6f; --accent2:#f59e0b; --accent-soft:#e7f7f1; --accent-border:#bfe6d8;
  --ink:#20242c; --muted:#6b7280; --line:#e9e6df;
  --bg:#fbf9f5; --surface:#ffffff; --surface2:#f4f1ea; --quote:#f0faf6;
  --fs:1;
}
:root[data-theme="dark"] {
  --accent:#34d3a6; --accent2:#fbbf24; --accent-soft:#122a22; --accent-border:#1f6b55;
  --ink:#eceef2; --muted:#9aa3b2; --line:#2a2f3a;
  --bg:#0f1216; --surface:#171b22; --surface2:#1c212a; --quote:#12211b;
}
* { box-sizing:border-box; }
button { appearance:none; -webkit-appearance:none; font:inherit; }
html { -webkit-text-size-adjust:100%; font-size:calc(18px * var(--fs)); }
.ic { width:1.15em; height:1.15em; display:inline-block; vertical-align:-0.18em; flex:none; }
.iconbtn .ic, .btn .ic { width:20px; height:20px; vertical-align:middle; }
.pdf-dl .ic { width:15px; height:15px; vertical-align:-0.2em; }
.chapcard .go .ic { width:22px; height:22px; display:block; }
.chnav .ic { width:16px; height:16px; }
body { margin:0; color:var(--ink); background:var(--bg);
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Noto Sans','Noto Sans Devanagari','Noto Sans Bengali','Noto Sans Tamil','Noto Sans Telugu','Noto Sans Kannada','Noto Sans Oriya','Noto Sans Gurmukhi', sans-serif;
  line-height:1.75; font-size:1rem;
  transition: background .2s ease, color .2s ease; }
h1,h2,h3 { line-height:1.3; }

/* ---- buttons / controls ---- */
.btn { cursor:pointer; border:1px solid var(--line); background:var(--surface); color:var(--ink);
  border-radius:10px; padding:8px 12px; font-size:1rem; line-height:1; display:inline-flex; align-items:center; gap:6px; }
.btn:hover { border-color:var(--accent); }
.btn.on { background:var(--accent); color:#fff; border-color:var(--accent); }
.iconbtn { cursor:pointer; border:1px solid var(--line); background:var(--surface); color:var(--ink);
  border-radius:10px; width:40px; height:40px; font-size:1.1rem; line-height:1; display:inline-flex; align-items:center; justify-content:center; }
.iconbtn:hover { border-color:var(--accent); }
.floating { position:fixed; top:14px; right:14px; z-index:30; box-shadow:0 2px 10px rgba(0,0,0,.1); }

/* ---- top bar ---- */
.topbar { position:sticky; top:0; z-index:20; background:color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter:blur(8px); border-bottom:1px solid var(--line); display:flex; align-items:center; gap:8px; padding:8px 12px;
  flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; }
.topbar::-webkit-scrollbar { display:none; }
.topbar > * { flex:none; }
.topbar .home { text-decoration:none; color:var(--accent); font-weight:800; font-size:1.15rem; white-space:nowrap; }
.topbar .spacer { flex:1 1 auto; min-width:0; }
.topbar select { font-size:.95rem; padding:8px; border:1px solid var(--line); border-radius:10px; background:var(--surface); color:var(--ink); max-width:36vw; }
.topbar .pdf-dl { text-decoration:none; font-size:.85rem; font-weight:700; color:var(--accent);
  border:1px solid var(--accent-border); border-radius:10px; padding:8px 10px; white-space:nowrap; }
.fsgroup { display:inline-flex; gap:4px; }

/* ---- reading progress bar (chapter view) ---- */
.readbar[hidden] { display:none; }
.readbar { position:sticky; top:57px; z-index:15; display:flex; align-items:center; gap:12px;
  padding:8px 14px; background:var(--surface); border-bottom:1px solid var(--line); }
.readbar .count { font-size:.85rem; color:var(--muted); font-weight:700; white-space:nowrap; }
.progress { flex:1; height:8px; background:var(--surface2); border-radius:999px; overflow:hidden; }
.progress > i { display:block; height:100%; width:0; background:linear-gradient(90deg,var(--accent),var(--accent2)); transition:width .25s ease; }
.readbar .speak { font-weight:700; }

/* ---- content ---- */
.wrap { max-width:760px; margin:0 auto; padding:22px 20px 60px; }
.wrap img { display:block; width:100%; max-width:300px; height:auto; margin:20px auto;
  border-radius:14px; border:1px solid var(--line); box-shadow:0 4px 16px rgba(16,24,40,.10); }
h1 { font-size:1.85em; margin:.2em 0 .5em; }
h2 { font-size:1.35em; margin:1.4em 0 .4em; }
h3 { font-size:1.12em; margin:1.1em 0 .3em; }
p, li { font-size:1rem; }
a { color:var(--accent); }
blockquote { border-left:4px solid var(--accent2); background:var(--quote); margin:1.1em 0; padding:.7em 1.1em; border-radius:0 12px 12px 0; }
table { border-collapse:collapse; width:100%; margin:1em 0; display:block; overflow-x:auto; }
th,td { border:1px solid var(--line); padding:9px 11px; text-align:left; }
th { background:var(--surface2); }
hr { border:0; border-top:1px solid var(--line); margin:1.4em 0; }
code { background:var(--surface2); padding:2px 6px; border-radius:6px; font-size:.92em; }
.shot { border:2px dashed var(--line); background:var(--surface2); color:var(--muted); padding:14px 16px; margin:16px 0; border-radius:12px; font-style:italic; }
.shot::before { content:"📷 "; font-style:normal; }
.page-break { display:none; }

/* ---- chapter view ---- */
.chapter[hidden] { display:none; }
.chapter { scroll-margin-top:112px; }
.ch-title { display:flex; align-items:center; gap:12px; margin:.1em 0 .3em; }
.ch-title .num { flex:none; width:44px; height:44px; border-radius:12px; background:var(--accent); color:#fff;
  font-weight:800; font-size:1.15rem; display:flex; align-items:center; justify-content:center; }
.ch-title h1 { font-size:1.5em; margin:0; }

/* prev / next */
.chnav { display:flex; gap:12px; margin-top:38px; }
.chnav a { flex:1; text-decoration:none; border:1px solid var(--line); background:var(--surface); color:var(--ink);
  border-radius:14px; padding:14px 16px; display:flex; flex-direction:column; gap:3px; transition:border-color .12s, transform .08s; }
.chnav a:hover { border-color:var(--accent); transform:translateY(-1px); }
.chnav a.next { text-align:right; align-items:flex-end; }
.chnav a .dir { font-size:.78rem; color:var(--muted); font-weight:700; text-transform:uppercase; letter-spacing:.03em; }
.chnav a .lbl { font-weight:700; color:var(--accent); }

/* ---- home (per-language cover + chapter list) ---- */
.cover { text-align:center; padding:14px 0 6px; }
.cover h1 { font-size:1.9em; margin:.1em 0 .3em; }
.cover .tagline { color:var(--muted); font-size:1.02em; max-width:600px; margin:.2em auto 0; font-style:normal; }
.note { background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:6px 20px; margin:22px 0; }
.note h2 { font-size:1.15em; }
.chapter-list { display:flex; flex-direction:column; gap:12px; margin-top:8px; }
.chapcard { display:flex; align-items:center; gap:14px; cursor:pointer; text-align:left; width:100%;
  border:1px solid var(--line); background:var(--surface); color:var(--ink); border-radius:16px; padding:16px 16px;
  font:inherit; transition:border-color .12s, transform .08s, box-shadow .12s; }
.chapcard:hover { border-color:var(--accent); transform:translateY(-1px); box-shadow:0 6px 18px rgba(16,24,40,.08); }
.chapcard .num { flex:none; width:40px; height:40px; border-radius:11px; background:var(--accent-soft); color:var(--accent);
  font-weight:800; display:flex; align-items:center; justify-content:center; font-size:1.05rem; }
.chapcard .name { font-weight:700; font-size:1.05rem; line-height:1.3; }
.chapcard .go { margin-left:auto; color:var(--muted); font-size:1.3rem; }

/* ---- landing page ---- */
.hero { max-width:820px; margin:0 auto; padding:52px 20px 6px; text-align:center; }
.hero h1 { font-size:2.2em; margin:.15em 0; }
.hero p { color:var(--muted); font-size:1.08em; max-width:600px; margin:.5em auto; }
.badge { display:inline-block; background:var(--accent-soft); color:var(--accent); border:1px solid var(--accent-border);
  padding:6px 14px; border-radius:999px; font-size:.9em; font-weight:700; margin-top:12px; }
.pick { text-align:center; color:var(--muted); font-weight:700; margin:30px 0 4px; font-size:.95em; }
.grid { max-width:820px; margin:10px auto 50px; padding:0 20px; display:grid;
  grid-template-columns:repeat(auto-fill, minmax(160px,1fr)); gap:14px; }
.card { position:relative; display:block; text-decoration:none; border:1px solid var(--line); border-radius:18px; background:var(--surface);
  padding:26px 16px; text-align:center; transition:transform .08s ease, box-shadow .12s ease, border-color .12s; }
.card:hover { transform:translateY(-3px); box-shadow:0 8px 24px rgba(16,24,40,.12); border-color:var(--accent); }
.card .lang { font-size:1.7em; font-weight:800; color:var(--ink); }
.card .en { color:var(--muted); font-size:.92em; margin-top:6px; }
.card.suggested { border-color:var(--accent); }
.card .tag { position:absolute; top:-10px; left:50%; transform:translateX(-50%); background:var(--accent); color:#fff;
  font-size:.72rem; font-weight:700; padding:3px 10px; border-radius:999px; white-space:nowrap; }

/* footer */
.site-foot { border-top:1px solid var(--line); margin-top:44px; padding:30px 20px 46px; text-align:center; color:var(--muted); }
.foot-links { display:flex; flex-wrap:wrap; gap:10px 14px; justify-content:center; margin-bottom:16px; }
.foot-links a { display:inline-flex; align-items:center; gap:8px; text-decoration:none; color:var(--ink); font-weight:700;
  border:1px solid var(--line); background:var(--surface); border-radius:999px; padding:9px 16px; font-size:.92rem; transition:border-color .12s, color .12s; }
.foot-links a:hover { border-color:var(--accent); color:var(--accent); }
.foot-links .ic { width:18px; height:18px; }
.site-foot .credit { color:var(--ink); font-weight:700; margin:8px 0; font-size:1rem; }
.site-foot .credit a { color:var(--accent); text-decoration:none; }
.site-foot .credit a:hover { text-decoration:underline; }
.site-foot .fine { font-size:.83rem; max-width:540px; margin:8px auto 0; line-height:1.65; }
.site-foot .fine a { color:var(--accent); }

@media (max-width:480px) {
  html { font-size:calc(17px * var(--fs)); }
  .hero { padding:30px 18px 4px; }
  .hero h1 { font-size:1.7em; }
  .grid { grid-template-columns:1fr 1fr; gap:12px; }
  .card { padding:20px 10px; }
  .card .lang { font-size:1.4em; }
  .wrap { padding:18px 16px 44px; }
  .topbar select { max-width:30vw; }
}