:root { color-scheme: light; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --page: #f4f5f0; --surface: #fff; --text: #202a25; --muted: #40564a; --subtle: #566a5c; --border: #9caca0; --panel-border: #d9e0d9; --hover: #edf3ed; --reference: #29483c; --verse-number: #476d59; --highlight: #fff1bd; --highlight-border: #aa751e; --focus: #b16b20; --error-bg: #fff0ed; --error-text: #8b2720; --error-border: #dfaaa3; --verse-font-size: 1.13rem; color: var(--text); background: var(--page); }
:root[data-theme="dark"] { color-scheme: dark; --page: #121a17; --surface: #202c26; --text: #f0f5f1; --muted: #c1d7c8; --subtle: #c1d7c8; --border: #9ab0a0; --panel-border: #52685b; --hover: #344b3d; --reference: #b9e3c3; --verse-number: #b9e3c3; --highlight: #59451b; --highlight-border: #f0cc78; --focus: #ffd07d; --error-bg: #542a27; --error-text: #fff1ed; --error-border: #d99289; }
* { box-sizing: border-box; }
body { margin: 0; }
.wrap { width: min(100% - 2rem, 50rem); margin-inline: auto; }
.site-header { background: #29483c; color: #fff; padding: 1.4rem 0; }
.site-header h1 { margin: 0; font-size: 1.65rem; }
.site-header p { margin: .3rem 0 0; color: #dbe8df; }
main { padding-block: 1.25rem 2rem; }
.controls, .reader, .install-help, .search, .reading-settings, .bookmarks-panel { background: var(--surface); border: 1px solid var(--panel-border); border-radius: .6rem; padding: 1rem; }
.reading-settings { margin-bottom: 1rem; }
.reading-settings h2 { margin: 0 0 .75rem; font-size: 1.2rem; }
.settings-controls, .font-controls { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; }
.settings-controls { justify-content: space-between; }
.font-controls > span { font-weight: 650; }
.font-controls output { min-width: 3.2rem; text-align: center; }
#font-decrease, #font-increase { font-size: 1.1rem; font-weight: 700; min-width: 3rem; }
.selectors { display: grid; grid-template-columns: 2fr 1fr; gap: .8rem; }
label { display: grid; gap: .35rem; font-weight: 650; }
select, button, input, textarea { font: inherit; min-height: 2.8rem; border: 1px solid var(--border); border-radius: .35rem; background: var(--surface); color: var(--text); padding: .5rem .65rem; }
select { width: 100%; }
button { cursor: pointer; }
button:disabled, select:disabled, input:disabled { opacity: .55; cursor: default; }
button:not(:disabled):hover { background: var(--hover); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.chapter-nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; margin-top: .9rem; }
.chapter-nav[hidden] { display: none; }
.status { font-size: .9rem; color: var(--muted); margin: .75rem 0; }
.error { background: var(--error-bg); color: var(--error-text); padding: .8rem; border: 1px solid var(--error-border); border-radius: .35rem; margin-bottom: .8rem; }
.reader h2 { margin: 0 0 1.1rem; font-size: 1.35rem; }
.verse { margin: 0 0 .75rem; line-height: 1.75; font-family: Georgia, "Times New Roman", serif; font-size: var(--verse-font-size); }
.verse-number { color: var(--verse-number); font-family: system-ui, sans-serif; font-size: .75em; font-weight: 700; vertical-align: super; margin-right: .45rem; }
.verse-highlight { background: var(--highlight); border-left: .25rem solid var(--highlight-border); border-radius: .2rem; padding: .45rem .6rem; scroll-margin-block: 1rem; }
.verse-row { display: flex; align-items: flex-start; gap: .5rem; }
.verse-row .verse { flex: 1; min-width: 0; }
.verse-bookmark { flex: none; min-width: 2.8rem; padding: .4rem; font-size: 1.25rem; color: var(--reference); }
.verse-bookmark:disabled { opacity: .8; }
.bookmarks-panel { margin-bottom: 1rem; }
.bookmarks-panel > p { line-height: 1.5; }
.bookmark-transfer, .bookmark-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.bookmark-transfer label { min-width: 0; flex: 1 1 15rem; }
.bookmark-transfer input { width: 100%; max-width: 100%; }
.bookmark-list { list-style: none; padding: 0; margin: .75rem 0 0; }
.bookmark-card { border-top: 1px solid var(--panel-border); padding: 1rem 0; overflow-wrap: anywhere; }
.bookmark-open { text-align: left; width: 100%; line-height: 1.5; }
.bookmark-reference { display: block; font-weight: 700; color: var(--reference); }
.bookmark-note-label { margin: .7rem 0 .35rem; }
.bookmark-note { display: block; resize: vertical; width: 100%; min-height: 5rem; }
.bookmark-actions { margin-top: .5rem; }
.import-preview { border: 1px solid var(--border); border-radius: .35rem; padding: .75rem; margin-block: .75rem; }
.search { margin-bottom: 1rem; }
.search h2 { margin: 0 0 .8rem; font-size: 1.2rem; }
.search-input-row { display: flex; gap: .5rem; margin-top: .35rem; }
.search-input-row input { flex: 1; min-width: 0; }
.search-hint { color: var(--subtle); font-size: .85rem; line-height: 1.4; }
.search-results { margin: 0; padding-left: 1.75rem; }
.search-results li { margin-bottom: .5rem; }
.search-result { width: 100%; text-align: left; line-height: 1.5; overflow-wrap: anywhere; }
.search-result-reference { display: block; color: var(--reference); font-weight: 700; }
.install-help { margin-top: 1rem; font-size: .95rem; line-height: 1.5; }
summary { cursor: pointer; font-weight: 650; min-height: 2.8rem; padding-block: .65rem; }
footer { padding-bottom: 2rem; color: var(--subtle); font-size: .85rem; }
@media (max-width: 380px) { .selectors { grid-template-columns: 1fr; } .chapter-nav button { flex: 1; } }