/* theme.css — the cinematic look (matches the Scripture Study website). Loaded after every other stylesheet.
   Dark is the default; Settings › Appearance › Light adds html.light, which switches all of this off and shows the original parchment look.
   Fonts: Cormorant Garamond and Inter, SIL Open Font License 1.1 (fonts/OFL-*.txt), credited on the Sources and credits page. */
@font-face { font-family: "Cormorant"; src: url(fonts/cormorant.woff2) format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "Cormorant"; src: url(fonts/cormorant-italic.woff2) format("woff2"); font-weight: 300 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Inter"; src: url(fonts/inter.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }

html:not(.light) {
  color-scheme: dark;
  --bg0: #0d0a07; --bg1: #15100b; --bg2: #1c160f; --glass: rgba(21, 16, 11, .72);
  --gold: #d9b36a; --gold2: #f0d69e; --cream: #efe7d8; --mute: #b9ad98;
  --parchment: #0d0a07; --parchment-dark: #2a2116; --card: #17120c; --ink: #efe7d8; --ink-soft: #c2b59e; --year: #f0d69e;
  --accent: #d9b36a; --accent-soft: #c9a463; --line: rgba(217, 179, 106, .24); --shadow: rgba(0, 0, 0, .45);
  --serif: "Cormorant", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --ease: cubic-bezier(.2, .7, .1, 1);
  --surface: linear-gradient(180deg, rgba(217, 179, 106, .075), rgba(217, 179, 106, .02));
  --lift: 0 18px 50px rgba(0, 0, 0, .45), 0 0 0 1px rgba(217, 179, 106, .06) inset;
  background: var(--bg0);
}
html:not(.light) body {
  background: radial-gradient(1100px 620px at 50% -12%, rgba(217, 179, 106, .13), transparent 62%),
              radial-gradient(900px 600px at 105% 105%, rgba(140, 80, 30, .12), transparent 60%),
              radial-gradient(700px 500px at -10% 60%, rgba(90, 60, 30, .10), transparent 60%), var(--bg0);
  background-attachment: fixed; color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased;
}
/* film grain + vignette (static: no battery cost) */
html:not(.light) body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
html:not(.light) body::after { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse at center, transparent 60%, rgba(0, 0, 0, .5) 100%); }
html:not(.light) #views, html:not(.light) footer.app-footer { position: relative; z-index: 1; }
html:not(.light) ::selection { background: rgba(217, 179, 106, .35); color: #fff; }
html:not(.light) a { color: var(--gold2); }
html:not(.light) :focus-visible { outline: 2px solid var(--gold2); outline-offset: 2px; }

/* ---------- header ---------- */
html:not(.light) header.app-header { position: relative; z-index: 50; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px;
  padding: calc(8px + env(safe-area-inset-top)) 14px 6px; background: linear-gradient(rgba(13, 10, 7, .985), rgba(14, 11, 8, .96));
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); border-bottom: 1px solid var(--line); box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }
html:not(.light) header.app-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, rgba(240, 214, 158, .55), transparent); }
html:not(.light) header h1 { order: 1; margin: 0; font: 600 1.45rem/1 var(--serif); letter-spacing: .02em; color: var(--gold2);
  background: linear-gradient(180deg, #fff3d6, #d9b36a); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-shadow: none; filter: drop-shadow(0 0 14px rgba(217, 179, 106, .25)); }
html:not(.light) .header-tools { order: 2; float: none; margin: 0 0 0 auto; }
html:not(.light) .app-nav { order: 3; flex: 1 1 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 2px -14px 0; padding: 2px 14px 4px; gap: 4px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 18px), transparent); mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 18px), transparent); }
html:not(.light) .app-nav::-webkit-scrollbar { display: none; }
html:not(.light) .app-nav a { flex: 0 0 auto; min-height: 40px; padding: 0 14px; border: 1px solid transparent; border-radius: 999px; background: transparent; color: var(--mute);
  font: 500 .88rem var(--sans); letter-spacing: .01em; transition: color .3s, background .3s, border-color .3s, box-shadow .3s; }
html:not(.light) .app-nav a span[aria-hidden] { filter: grayscale(1) sepia(.7) saturate(1.6) brightness(1.15); opacity: .85; }
html:not(.light) .app-nav a:hover { color: var(--cream); background: rgba(217, 179, 106, .08); border-color: var(--line); }
html:not(.light) .app-nav a.on { color: #140f08; background: linear-gradient(180deg, var(--gold2), var(--gold)); border-color: transparent; box-shadow: 0 4px 22px rgba(217, 179, 106, .3); font-weight: 600; }
html:not(.light) .app-nav a.on span[aria-hidden] { filter: grayscale(1) brightness(.35); opacity: 1; }
html:not(.light) .offline-pill { flex: 0 0 auto; margin-left: auto; min-height: 34px; background: rgba(255, 255, 255, .03); border-color: var(--line); color: var(--mute); font-weight: 500; }
html:not(.light) .offline-pill.ready { background: rgba(120, 170, 110, .1); border-color: rgba(140, 190, 130, .35); color: #b9dcae; }
html:not(.light) .offline-pill.off:not(.ready) { background: rgba(200, 90, 60, .12); border-color: rgba(220, 120, 90, .4); color: #f0b9a0; }
html:not(.light) .tool-btn { min-height: 38px; border-color: var(--line); background: rgba(255, 255, 255, .03); color: var(--cream); font-family: var(--sans); transition: background .3s, border-color .3s; }
html:not(.light) .tool-btn:hover { background: rgba(217, 179, 106, .1); border-color: var(--gold); }
@media (min-width: 900px) {
  html:not(.light) { --hdrH: 61px; }
  html:not(.light) header.app-header { position: sticky; top: 0; flex-wrap: nowrap; height: 61px; padding: 0 22px; gap: 18px; }
  html:not(.light) .mz-sbar { top: var(--hdrH); }
  html:not(.light) header h1 { font-size: 1.6rem; }
  html:not(.light) .app-nav { order: 2; flex: 1 1 auto; margin: 0; padding: 0 8px; -webkit-mask-image: none; mask-image: none; }
  html:not(.light) .header-tools { order: 3; margin: 0; }
}
html:not(.light) footer.app-footer { background: transparent; border-top: 1px solid var(--line); color: var(--mute); text-align: center; padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); }
html:not(.light) footer.app-footer a { color: var(--gold2); }

/* ---------- views + page titles ---------- */
html:not(.light) #views > section:not([hidden]), html:not(.light) #views > div:not([hidden]):not(#views-end) { animation: viewIn .6s var(--ease) both; }
@keyframes viewIn { from { opacity: 0; transform: translateY(10px); filter: blur(5px); } to { opacity: 1; transform: none; filter: none; } }
html:not(.light) .sr-view { max-width: 880px; }
html:not(.light) .pl-view { max-width: 1120px; }
html:not(.light) .sr-h, html:not(.light) .mz-h, html:not(.light) .ab-wrap h2 { font: 500 clamp(2rem, 6.4vw, 3rem)/1.05 var(--serif); letter-spacing: .005em; margin: 1rem 0 .55rem; color: #fff;
  background: linear-gradient(180deg, #fff8ea 20%, #e2c287); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
html:not(.light) .sr-h3, html:not(.light) .ab-wrap h3, html:not(.light) .mz-form h3 { font: 500 1.5rem var(--serif); color: var(--gold2); }
html:not(.light) .sr-kind, html:not(.light) .st-date { font: 600 .72rem/1.3 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
html:not(.light) .st-approx { background: rgba(217, 179, 106, .14); color: var(--gold2); letter-spacing: .08em; }
html:not(.light) .sr-tip, html:not(.light) .st-count, html:not(.light) .sr-also, html:not(.light) .mz-hint { color: var(--mute); }
html:not(.light) .mz-crumbs a { color: var(--gold2); font-size: .9rem; letter-spacing: .02em; }
html:not(.light) .st-lead, html:not(.light) .en-entry p, html:not(.light) .st-view > p, html:not(.light) .st-view section p { color: #e3d9c6; }
html:not(.light) .st-lead { font: 400 1.35rem/1.55 var(--serif); color: #f3ecdf; }

/* ---------- Bible reader ---------- */
html:not(.light) .rd-view { padding-top: .4rem; }
html:not(.light) .rd-tools { background: #0e0b08;
  border-bottom: 1px solid var(--line); margin: 0 -1rem; padding: .55rem 1rem .5rem; top: var(--hdrH, 0px); }
html:not(.light) .rd-text { font: 500 1.3rem/1.78 var(--serif); color: #f1eadc; letter-spacing: .005em; }
html:not(.light) .rd-h { position: relative; text-align: center; margin: 1.6rem 0 1.4rem; padding-bottom: 1rem; font: 500 clamp(2.4rem, 9vw, 3.6rem)/1 var(--serif); color: #fff;
  text-shadow: 0 0 40px rgba(217, 179, 106, .25); animation: rdTitle 1.1s var(--ease) both; }
html:not(.light) .rd-h small { display: block; margin-top: .65rem; font: 600 .7rem/1.2 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--gold); text-shadow: none; }
html:not(.light) .rd-h::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 160px; height: 1px; margin-left: -80px; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
html:not(.light) .rd-h::before { content: "✦"; position: absolute; left: 50%; bottom: -.62rem; transform: translateX(-50%); font-size: .8rem; color: var(--gold2); background: var(--bg0); padding: 0 .5rem; z-index: 1; text-shadow: 0 0 10px rgba(240, 214, 158, .8); }
@keyframes rdTitle { from { opacity: 0; letter-spacing: .12em; filter: blur(6px); } to { opacity: 1; letter-spacing: .005em; filter: none; } }
html:not(.light) .rd-v { margin: .1rem -.5rem; padding: .25rem .5rem; border-radius: 10px; transition: background .35s; }
html:not(.light) .rd-v:hover { background: rgba(217, 179, 106, .05); }
html:not(.light) .rd-vn { font: 600 .64rem var(--sans); color: var(--gold); opacity: .85; margin-right: .35rem; letter-spacing: .02em; }
html:not(.light) .rd-hl, html:not(.light) tr.rd-hl td, html:not(.light) tr.rd-hl th, html:not(.light) .dp-v.rd-hl {
  background: linear-gradient(90deg, rgba(217, 179, 106, .2), rgba(217, 179, 106, .05)); box-shadow: inset 2px 0 0 var(--gold), 0 0 36px rgba(217, 179, 106, .08); color: #fff; }
html:not(.light) .rd-now { background: rgba(240, 214, 158, .14); box-shadow: inset 2px 0 0 var(--gold2); }
html:not(.light) ::highlight(rd-word) { background: rgba(240, 214, 158, .45); color: #fff; }
html:not(.light) .rd-cmp { font: 500 1.08rem/1.6 var(--serif); }
html:not(.light) .rd-cmp th, html:not(.light) .rd-cmp td { border-bottom-color: rgba(217, 179, 106, .12); }
html:not(.light) .rd-cmp thead th { color: var(--gold); letter-spacing: .12em; }
html:not(.light) .rd-src { color: var(--mute); text-align: center; }
html:not(.light) .rd-foot { gap: .6rem; margin-top: 2rem; }
html:not(.light) .rd-foot .rd-btn { flex: 1; min-height: 48px; }
html:not(.light) .dp-enc { text-decoration-color: rgba(217, 179, 106, .55); }
html:not(.light) .rd-miss { color: var(--mute); }

/* ---------- controls ---------- */
html:not(.light) .rd-btn, html:not(.light) .sr-segb, html:not(.light) .sr-sm, html:not(.light) .mz-btn, html:not(.light) .bp-btn, html:not(.light) .dp-gear summary,
html:not(.light) .dp-menu button, html:not(.light) .pl-browse a, html:not(.light) .st-tabs a, html:not(.light) .sr-chip, html:not(.light) .gm-btn, html:not(.light) .mz-mode, html:not(.light) .mz-x {
  background: rgba(255, 255, 255, .035); border: 1px solid var(--line); color: var(--cream); border-radius: 12px; font-family: var(--sans); transition: background .3s, border-color .3s, color .3s, transform .3s var(--ease), box-shadow .3s; }
html:not(.light) .rd-btn:hover, html:not(.light) .sr-segb:hover, html:not(.light) .sr-sm:hover, html:not(.light) .mz-btn:hover, html:not(.light) .bp-btn:hover, html:not(.light) .dp-gear summary:hover,
html:not(.light) .dp-menu button:hover, html:not(.light) .pl-browse a:hover, html:not(.light) .st-tabs a:hover, html:not(.light) .sr-chip:hover, html:not(.light) .gm-btn:hover, html:not(.light) .mz-mode:hover {
  background: rgba(217, 179, 106, .1); border-color: rgba(217, 179, 106, .6); color: #fff; }
html:not(.light) .st-tabs a, html:not(.light) .sr-chip { border-radius: 999px; }
html:not(.light) .rd-btn[aria-pressed="true"], html:not(.light) .sr-segb[aria-pressed="true"], html:not(.light) .st-tabs a.on, html:not(.light) .pl-browse a.on, html:not(.light) .pl-keys .sr-chip.on,
html:not(.light) .mz-primary, html:not(.light) .of-btn, html:not(.light) .mz-big, html:not(.light) .gm-big, html:not(.light) .gm-primary, html:not(.light) .set-close, html:not(.light) .st-done[aria-pressed="true"] {
  background: linear-gradient(180deg, var(--gold2), var(--gold)); border-color: transparent; color: #160f07; box-shadow: 0 6px 26px rgba(217, 179, 106, .26); font-weight: 600; }
html:not(.light) .mz-primary:hover, html:not(.light) .of-btn:hover, html:not(.light) .mz-big:hover, html:not(.light) .gm-big:hover, html:not(.light) .gm-primary:hover { color: #000; transform: translateY(-1px); box-shadow: 0 10px 36px rgba(217, 179, 106, .38); }
html:not(.light) .mz-big2 { background: rgba(255, 255, 255, .03); color: var(--gold2); border: 1px solid rgba(217, 179, 106, .55); box-shadow: none; }
html:not(.light) .mz-big span { background: rgba(0, 0, 0, .14); }
html:not(.light) .st-tabs { border-bottom-color: var(--line); gap: .35rem; padding-bottom: .65rem; }
html:not(.light) input[type=search], html:not(.light) input[type=text], html:not(.light) input[type=number], html:not(.light) select, html:not(.light) textarea {
  background-color: rgba(255, 255, 255, .04) !important; color: var(--cream) !important; border: 1px solid var(--line) !important; border-radius: 12px !important; font-family: var(--sans); transition: border-color .3s, box-shadow .3s; }
html:not(.light) input::placeholder, html:not(.light) textarea::placeholder { color: #8f846f; }
html:not(.light) input:focus, html:not(.light) select:focus, html:not(.light) textarea:focus { outline: none; border-color: var(--gold) !important; box-shadow: 0 0 0 3px rgba(217, 179, 106, .18); }
html:not(.light) select option { background: #17120c; color: var(--cream); }
html:not(.light) input[type=checkbox], html:not(.light) input[type=radio], html:not(.light) input[type=range], html:not(.light) progress { accent-color: var(--gold); }
html:not(.light) .st-ref, html:not(.light) .sr-ref, html:not(.light) .sr-bk { background: rgba(217, 179, 106, .1); border: 1px solid rgba(217, 179, 106, .3); color: var(--gold2); border-radius: 999px; padding: .2rem .65rem; min-height: 32px; transition: background .3s; }
html:not(.light) .st-ref:hover, html:not(.light) .sr-ref:hover, html:not(.light) .sr-bk:hover { background: rgba(217, 179, 106, .22); color: #fff; }
html:not(.light) .bref { color: var(--gold2); border-bottom-color: rgba(217, 179, 106, .5); }
html:not(.light) .bref:hover, html:not(.light) .bref:focus-visible { color: #fff; background: rgba(217, 179, 106, .12); border-bottom-color: var(--gold2); }
html:not(.light) .sr-open { color: var(--gold2); }
html:not(.light) .sr-txt { font: 500 1.18rem/1.6 var(--serif); }
html:not(.light) .sr-txt mark, html:not(.light) .wd-verses mark { background: rgba(217, 179, 106, .32); color: #fff; }

/* ---------- cards ---------- */
html:not(.light) .st-ev, html:not(.light) .sr-card, html:not(.light) .st-src, html:not(.light) .st-calm, html:not(.light) .mz-pc, html:not(.light) .mz-add, html:not(.light) .mz-chunks li, html:not(.light) .mz-audio,
html:not(.light) .dp-panel, html:not(.light) .st-else, html:not(.light) .mz-text, html:not(.light) .st-when, html:not(.light) .pl-then, html:not(.light) .st-quote, html:not(.light) .mz-note {
  background: var(--surface), rgba(18, 14, 9, .7); border: 1px solid var(--line); border-radius: 16px; color: var(--ink); }
html:not(.light) .st-ev, html:not(.light) .sr-card, html:not(.light) .mz-pc { transition: border-color .4s, transform .5s var(--ease), box-shadow .5s; }
html:not(.light) .st-ev:hover, html:not(.light) .sr-card:hover, html:not(.light) .mz-pc:hover { border-color: rgba(217, 179, 106, .55); box-shadow: var(--lift); }
html:not(.light) .st-ev h4 { font: 500 1.45rem/1.15 var(--serif); } html:not(.light) .st-ev h4 a { color: #fff; }
html:not(.light) .st-ev p { color: #ddd3c2; }
html:not(.light) .st-tl { border-left: 1px solid transparent; border-image: linear-gradient(180deg, transparent, rgba(217, 179, 106, .7) 4%, rgba(217, 179, 106, .35) 96%, transparent) 1; padding-left: 1.2rem; }
html:not(.light) .st-ev::before { left: -1.62rem; background: var(--gold2); border: 2px solid var(--bg0); box-shadow: 0 0 0 1px var(--gold), 0 0 14px rgba(240, 214, 158, .8); }
html:not(.light) .st-world { background: linear-gradient(180deg, rgba(110, 150, 190, .08), rgba(110, 150, 190, .02)), rgba(14, 16, 20, .7); border: 1px dashed rgba(140, 175, 210, .35); }
html:not(.light) .st-world::before { background: #9fc0de; box-shadow: 0 0 0 1px #6d8fb0, 0 0 12px rgba(159, 192, 222, .6); }
html:not(.light) .st-region { color: #a9c4dc; }
html:not(.light) .st-quote { border-left: 2px solid var(--gold); border-radius: 0 14px 14px 0; }
html:not(.light) .st-quote blockquote { font: italic 500 1.25rem/1.5 var(--serif); color: #efe5d2; }
html:not(.light) .st-hub { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .8rem; }
html:not(.light) .st-hubc { position: relative; overflow: hidden; min-height: 168px; justify-content: flex-end; padding: .9rem; border-radius: 18px; border: 1px solid var(--line);
  background: var(--bg2) center / cover no-repeat; color: var(--ink); isolation: isolate; transition: transform .5s var(--ease), border-color .4s, box-shadow .5s; }
html:not(.light) .st-hubc::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(13, 10, 7, .05) 0%, rgba(13, 10, 7, .55) 50%, rgba(13, 10, 7, .95) 100%); }
html:not(.light) .st-hubc:hover { transform: translateY(-4px); border-color: var(--gold); box-shadow: 0 20px 50px rgba(0, 0, 0, .5); }
html:not(.light) .st-hubc strong { font: 500 1.4rem/1.1 var(--serif); color: #fff; text-shadow: 0 2px 12px rgba(0, 0, 0, .7); }
html:not(.light) .st-hubc small { color: #d8ccb6; }
html:not(.light) .st-hubc { padding-top: 2.6rem; }
html:not(.light) .st-hubi { position: absolute; top: .7rem; left: .8rem; font-size: 1.2rem; filter: grayscale(1) sepia(.7) saturate(1.6) brightness(1.2); }
html:not(.light) .st-hubc[href="#study/people"] { background-image: url(enc/img/people/moses.jpg); background-position: 50% 25%; }
html:not(.light) .st-hubc[href="#study/trad"] { background-image: url(enc/photos/jerusalem.jpg); }
html:not(.light) .st-hubc[href="#study/trad/c/groups"] { background-image: url(enc/photos/capernaum.jpg); }
html:not(.light) .st-hubc[href="#study/feasts"] { background-image: url(enc/photos/jericho-1.jpg); }
html:not(.light) .st-hubc[href="#study/places"] { background-image: url(enc/photos/sea-of-galilee.jpg); }
html:not(.light) .st-hubc[href="#study/world"] { background-image: url(enc/photos/babylon-1.jpg); }
html:not(.light) .st-hubc[href="#study/words"] { background-image: radial-gradient(ellipse at 30% 20%, #4a3519, var(--bg0) 75%); }
html:not(.light) .st-list li, html:not(.light) .sr-hit { border-bottom: 1px solid rgba(217, 179, 106, .14); }
html:not(.light) .st-list a { border-radius: 10px; padding: .6rem .5rem; transition: background .3s; }
html:not(.light) .st-list a:hover { background: rgba(217, 179, 106, .06); }
html:not(.light) .st-list a strong, html:not(.light) .sr-card h3, html:not(.light) .mz-pc-t b { font: 500 1.3rem var(--serif); color: #fff; }
html:not(.light) .st-list small, html:not(.light) .mz-pc-s, html:not(.light) .mz-pc-t small { color: var(--mute); }
html:not(.light) .st-list.st-people img { width: 52px; height: 52px; border-radius: 50%; box-shadow: 0 0 0 1px var(--line), 0 0 0 3px rgba(217, 179, 106, .08); }
html:not(.light) .en-list a { border-radius: 14px; border-color: var(--line); background: var(--bg1); transition: transform .5s var(--ease), border-color .4s; }
html:not(.light) .en-list a:hover { transform: translateY(-3px); border-color: var(--gold); }
html:not(.light) .en-list img { height: 110px; filter: saturate(.9) sepia(.08) contrast(1.05); }
html:not(.light) .en-list span { font: 500 1.08rem/1.2 var(--serif); color: #fff; }
html:not(.light) .en-fig img, html:not(.light) .pl-photo img, html:not(.light) .st-photo img { border-radius: 16px; box-shadow: 0 20px 60px rgba(0, 0, 0, .55), 0 0 0 1px var(--line); filter: saturate(.92) sepia(.06) contrast(1.04); background: var(--bg2); }
html:not(.light) .st-art img { border-radius: 14px; box-shadow: 0 24px 60px rgba(0, 0, 0, .6), 0 0 0 1px var(--line); }
html:not(.light) .st-art figcaption, html:not(.light) .en-fig figcaption, html:not(.light) .pl-photo figcaption, html:not(.light) .st-photo figcaption { color: var(--mute); }
html:not(.light) .st-fam th { color: var(--gold); font-weight: 500; letter-spacing: .04em; }
html:not(.light) .st-tree ul { border-left: 1px solid rgba(217, 179, 106, .3); }
html:not(.light) .st-tree a { color: var(--cream); }
html:not(.light) .st-tree .st-focus > a, html:not(.light) .st-tree .st-focus > span { background: linear-gradient(180deg, var(--gold2), var(--gold)); color: #160f07; padding: .1rem .45rem; box-shadow: 0 0 18px rgba(217, 179, 106, .4); }
html:not(.light) .st-cmp th, html:not(.light) .st-cmp td, html:not(.light) .ab-tbl th, html:not(.light) .ab-tbl td { border-color: rgba(217, 179, 106, .16); }
html:not(.light) .st-cmp thead th, html:not(.light) .ab-tbl thead th { background: rgba(217, 179, 106, .08); color: var(--gold2); }
html:not(.light) .st-cmp tbody th { background: rgba(217, 179, 106, .04); }
html:not(.light) .st-prog progress, html:not(.light) .of-bar { accent-color: var(--gold); }
html:not(.light) .st-tag { background: rgba(255, 255, 255, .08); color: var(--mute); }

/* ---------- places map ---------- */
html:not(.light) .pl-map { border-radius: 18px; border: 1px solid var(--line); box-shadow: 0 24px 70px rgba(0, 0, 0, .55); background: #0a1117 !important; }
html:not(.light) .leaflet-container { background: #0a1117; font-family: var(--sans); }
html:not(.light) .leaflet-bar a, html:not(.light) .leaflet-bar a:hover { background: rgba(21, 16, 11, .92); color: var(--gold2); border-bottom-color: var(--line); }
html:not(.light) .leaflet-bar { border: 1px solid var(--line) !important; box-shadow: 0 6px 20px rgba(0, 0, 0, .5) !important; }
html:not(.light) .leaflet-control-attribution { background: rgba(13, 10, 7, .75) !important; color: var(--mute); }
html:not(.light) .leaflet-control-attribution a { color: var(--gold2); }
html:not(.light) .leaflet-popup-content-wrapper, html:not(.light) .leaflet-popup-tip { background: rgba(21, 16, 11, .96); color: var(--cream); box-shadow: 0 10px 40px rgba(0, 0, 0, .6); border: 1px solid var(--line); }
html:not(.light) .leaflet-container a.leaflet-popup-close-button { color: var(--mute); }
html:not(.light) .marker-cluster-small, html:not(.light) .marker-cluster-medium, html:not(.light) .marker-cluster-large { background: rgba(217, 179, 106, .28); }
html:not(.light) .marker-cluster-small div, html:not(.light) .marker-cluster-medium div, html:not(.light) .marker-cluster-large div { background: linear-gradient(180deg, var(--gold2), var(--gold)); color: #160f07; font-weight: 700; box-shadow: 0 0 16px rgba(240, 214, 158, .6); }
html:not(.light) .marker-cluster-large { background: rgba(230, 150, 80, .3); }
html:not(.light) .marker-cluster-large div { background: linear-gradient(180deg, #ffcf96, #e0954e); }
html:not(.light) .pl-pin-firm { background: var(--gold2); border: 2px solid #160f07; box-shadow: 0 0 0 1px var(--gold2), 0 0 10px rgba(240, 214, 158, .9); }
html:not(.light) .pl-pin-possible { border-color: var(--gold2); background: rgba(240, 214, 158, .15); }
html:not(.light) .pl-pin-traditional { background: rgba(200, 170, 230, .35); border-color: #d6c2ec; }
html:not(.light) .pl-conf { background: rgba(140, 190, 130, .14); color: #bfe0b4; }
html:not(.light) .pl-conf.pl-probable { background: rgba(190, 200, 120, .14); color: #dfe3a9; }
html:not(.light) .pl-conf.pl-disputed { background: rgba(217, 179, 106, .16); color: var(--gold2); }
html:not(.light) .pl-conf.pl-traditional { background: rgba(190, 150, 220, .16); color: #dcc6ef; }
html:not(.light) .pl-conf.pl-unknown { background: rgba(255, 255, 255, .08); color: var(--mute); }
html:not(.light) .pl-noimg { background: var(--bg2); }

/* ---------- Hebrew / Greek word sheet ---------- */
html:not(.light) .wd-pop { background: rgba(5, 4, 2, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: fadeIn .3s ease both; }
html:not(.light) .wd-card { background: linear-gradient(180deg, rgba(217, 179, 106, .1), rgba(217, 179, 106, 0) 140px), #120e09; color: var(--ink); border: 1px solid var(--line); border-bottom: 0;
  border-radius: 22px 22px 0 0; box-shadow: 0 -20px 60px rgba(0, 0, 0, .6), 0 -1px 0 rgba(240, 214, 158, .35); padding: 1.1rem 1.2rem 1.4rem; animation: sheetUp .5s var(--ease) both; }
html:not(.light) .wd-card::before { content: ""; display: block; width: 44px; height: 4px; margin: -.3rem auto .7rem; border-radius: 4px; background: rgba(217, 179, 106, .4); }
html:not(.light) .wd-x { color: var(--mute); }
html:not(.light) .wd-lemma { font-size: 2.6rem; color: var(--gold2); text-shadow: 0 0 24px rgba(217, 179, 106, .4); }
html:not(.light) .wd-l { color: var(--gold2); }
html:not(.light) .wd-pron { color: var(--cream); }
html:not(.light) .wd-ctx { color: var(--mute); }
html:not(.light) .wd-bdb pre { background: rgba(255, 255, 255, .035); border: 1px solid rgba(217, 179, 106, .14); color: #e6dccb; }
html:not(.light) .wd-list a { color: var(--cream); }
html:not(.light) .wd-list li { border-bottom-color: rgba(217, 179, 106, .14); }
@keyframes sheetUp { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@media (min-width: 700px) { html:not(.light) .wd-pop { align-items: center; } html:not(.light) .wd-card { border-radius: 22px; border-bottom: 1px solid var(--line); } }
html:not(.light) .dp-menu { background: rgba(21, 16, 11, .96); border-color: var(--line); box-shadow: 0 12px 40px rgba(0, 0, 0, .55); border-radius: 14px; }
html:not(.light) .dp-menu strong { color: var(--gold2); font-family: var(--serif); font-size: 1.05rem; font-weight: 500; }
html:not(.light) .dp-gear[open] .dp-panel { box-shadow: 0 16px 50px rgba(0, 0, 0, .6); background: #15100b; }

/* ---------- passage panel ---------- */
html:not(.light) .bible-panel { background: #110d09; border-left: 1px solid var(--line); box-shadow: -20px 0 60px rgba(0, 0, 0, .6); }
html:not(.light) .bp-head { background: linear-gradient(180deg, rgba(217, 179, 106, .08), transparent); border-bottom-color: var(--line); }
html:not(.light) .bp-title { font: 500 1.6rem var(--serif); color: var(--gold2); }
html:not(.light) .bp-nav, html:not(.light) .bp-close { background: rgba(255, 255, 255, .04); border-color: var(--line); color: var(--gold2); }
html:not(.light) .bp-read { font: 500 1.2rem/1.7 var(--serif); }
html:not(.light) .bp-cited { background: rgba(217, 179, 106, .16); }

/* ---------- memorize ---------- */
html:not(.light) .mz-sbar { background: #0e0b08; }
html:not(.light) .mz-text { font: 500 1.45rem/1.8 var(--serif); color: #f3ecdf; }
html:not(.light) .mz-ch-text { font: 500 1.2rem/1.6 var(--serif); }
html:not(.light) .mz-prog, html:not(.light) .mz-bar { background: rgba(255, 255, 255, .08); }
html:not(.light) .mz-prog i { background: linear-gradient(90deg, var(--gold), var(--gold2)); box-shadow: 0 0 12px rgba(240, 214, 158, .6); }
html:not(.light) .mz-bar i { background: linear-gradient(90deg, #7fae68, #b9dcae); }
html:not(.light) .mz-big-stat b { color: var(--gold2); font-family: var(--serif); font-weight: 500; font-size: 2.6rem; }
html:not(.light) .mz-stats b { color: #fff; }
html:not(.light) .mz-done { background: linear-gradient(180deg, rgba(140, 190, 130, .12), rgba(140, 190, 130, .03)); border-color: rgba(140, 190, 130, .35); color: #cfe9c4; border-radius: 18px; }
html:not(.light) .mz-done span { color: #a9c69d; }
html:not(.light) .mz-mode span { filter: grayscale(1) sepia(.7) saturate(1.6) brightness(1.15); }
html:not(.light) .mz-gr { box-shadow: 0 6px 18px rgba(0, 0, 0, .35); }
html:not(.light) .mz-gr.sug { border-color: var(--gold2); box-shadow: 0 0 0 3px rgba(240, 214, 158, .3), 0 0 24px rgba(240, 214, 158, .35); }

/* ---------- game: keep its night sky, give the panels the same glass ---------- */
html:not(.light) body.view-game { background-color: #070a18; }
html:not(.light) .gm-panel { background: linear-gradient(180deg, rgba(240, 214, 158, .09), rgba(240, 214, 158, .02)), rgba(12, 14, 26, .78); border: 1px solid rgba(240, 214, 158, .28);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .05); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: var(--cream); border-radius: 20px; }
html:not(.light) .gm-panel .gm-h { color: #fff; }
html:not(.light) .gm-h { font: 500 2rem var(--serif); }
html:not(.light) .gm-streak { background: rgba(12, 14, 26, .85); border-color: rgba(240, 214, 158, .45); color: var(--cream); }
html:not(.light) .gm-streak b { color: var(--gold2); }
html:not(.light) .gm-st-best, html:not(.light) .gm-dh small, html:not(.light) .gm-dday, html:not(.light) .gm-dref small, html:not(.light) .gm-dcu { color: #b8b0a0; }
html:not(.light) .gm-dref { font: 500 1.8rem var(--serif); color: #fff; }
html:not(.light) .gm-link { color: var(--gold2); }
html:not(.light) .gm-dres { color: #b9dcae; }

/* ---------- settings + about ---------- */
html:not(.light) .set-backdrop { background: rgba(5, 4, 2, .6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); animation: fadeIn .3s ease both; }
html:not(.light) .set-panel { background: linear-gradient(180deg, rgba(217, 179, 106, .08), transparent 160px), #120e09; color: var(--ink); border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 30px 90px rgba(0, 0, 0, .7); animation: sheetUp .5s var(--ease) both; }
html:not(.light) .set-panel header { background: #15100b; border-bottom-color: var(--line); margin: 0 -18px; padding: 14px 18px 10px; border-radius: 22px 22px 0 0; }
html:not(.light) .set-panel h2 { font: 500 1.8rem var(--serif); color: var(--gold2); }
html:not(.light) .set-panel h3 { font: 600 .72rem var(--sans); letter-spacing: .2em; color: var(--gold); margin-top: 22px; }
html:not(.light) .set-panel button:not(.set-close) { background: rgba(255, 255, 255, .04); border-color: var(--line); color: var(--gold2); }
html:not(.light) .set-hint, html:not(.light) .set-foot { color: var(--mute); }
html:not(.light) .set-theme label { border-color: var(--line); }
html:not(.light) .set-theme label:has(input:checked) { border-color: var(--gold); background: rgba(217, 179, 106, .12); color: #fff; }
html:not(.light) .ab-about { max-width: 820px; }
html:not(.light) .ab-wrap p, html:not(.light) .ab-wrap li { color: #ddd3c2; }
html:not(.light) .of-status { color: var(--gold2); }
html:not(.light) .loading { color: var(--mute); font-family: var(--serif); font-size: 1.2rem; }

/* ---------- launch screen ---------- */
#splash { display: none; }
html:not(.light) #splash.show { display: grid; position: fixed; inset: 0; z-index: 3000; place-items: center; pointer-events: none; background: #0d0a07; overflow: hidden;
  animation: spOut .9s ease 1.5s forwards; }
html:not(.light) #splash .sp-bg { position: absolute; inset: -6%; background: url(enc/photos/jerusalem.jpg) center / cover; filter: saturate(.8) sepia(.25) contrast(1.05) brightness(.55) blur(1px); animation: kenburns 3s ease-out both; }
html:not(.light) #splash::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(13, 10, 7, .2), rgba(13, 10, 7, .92) 75%); }
html:not(.light) #splash .sp-in { position: relative; z-index: 1; text-align: center; padding: 0 24px; }
html:not(.light) #splash .sp-k { display: block; font: 600 .72rem var(--sans); letter-spacing: .32em; text-transform: uppercase; color: var(--gold); animation: spUp 1s var(--ease) .1s both; }
html:not(.light) #splash b { display: block; margin: .5rem 0 .9rem; font: 500 clamp(3rem, 13vw, 6rem)/1 var(--serif); color: #fff; text-shadow: 0 0 50px rgba(217, 179, 106, .45); animation: spTitle 1.3s var(--ease) .15s both; }
html:not(.light) #splash i { display: block; width: 180px; height: 1px; margin: 0 auto; background: linear-gradient(90deg, transparent, var(--gold2), transparent); animation: spLine 1.2s var(--ease) .45s both; }
@keyframes spOut { to { opacity: 0; visibility: hidden; } }
@keyframes spUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes spTitle { from { opacity: 0; letter-spacing: .14em; filter: blur(10px); } to { opacity: 1; letter-spacing: .01em; filter: none; } }
@keyframes spLine { from { transform: scaleX(0); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes kenburns { from { transform: scale(1.15); } to { transform: scale(1.02); } }

html:not(.light) .st-filters input, html:not(.light) .st-find input, html:not(.light) .pl-view input { min-height: 42px; padding: 0 .7rem; font-size: 16px; }
@media (max-width: 640px) {
  html:not(.light) .app-nav { gap: 0; }
  html:not(.light) .app-nav a { padding: 0 11px; font-size: .85rem; }
  html:not(.light) .st-hubc strong { font-size: 1.25rem; }
  html:not(.light) .rd-text { font-size: 1.24rem; }
  html:not(.light) .rd-row select, html:not(.light) .rd-row input, html:not(.light) .rd-btn { min-height: 44px; }
  html:not(.light) .st-hub { grid-template-columns: 1fr 1fr; }
  html:not(.light) .st-hubc { min-height: 150px; }
}
@media (prefers-reduced-motion: reduce) {
  html:not(.light) *, html:not(.light) *::before, html:not(.light) *::after { animation: none !important; transition: none !important; }
  html:not(.light) #splash.show { display: none; }
}

/* Game: keep its starry night, in the app's warm palette */
html:not(.light) body.view-game {
  background-color: var(--bg0);
  background-image: radial-gradient(1px 1px at 12% 18%, #fff8 50%, transparent 51%), radial-gradient(1px 1px at 72% 9%, #fff9 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 40% 30%, #fffa 50%, transparent 51%), radial-gradient(1px 1px at 88% 40%, #fff7 50%, transparent 51%),
    radial-gradient(1px 1px at 22% 62%, #fff6 50%, transparent 51%), radial-gradient(1.5px 1.5px at 60% 75%, #fff8 50%, transparent 51%),
    radial-gradient(1px 1px at 92% 88%, #fff6 50%, transparent 51%), radial-gradient(ellipse at 50% -10%, #3a2a14 0%, #0d0a07 62%);
}
html:not(.light) body.view-game .app-nav a:not(.on) { background: transparent; border-color: transparent; color: var(--mute); }
html:not(.light) body.view-game .app-nav a.on { color: #140f08; background: linear-gradient(180deg, var(--gold2), var(--gold)); border-color: transparent; }
html:not(.light) body.view-game footer.app-footer { color: var(--mute) !important; }
html:not(.light) body.view-game footer.app-footer a { color: var(--gold2) !important; }
html:not(.light) .gm-count { background: rgba(13, 10, 7, .85); }
html:not(.light) .gm-badge { background: rgba(217, 179, 106, .18); color: var(--gold2); border: 1px solid rgba(217, 179, 106, .35); }