:root {
    font-family: Georgia, "Times New Roman", serif;
    background: #f3f0e8;
    color: #24241f;
}
* { box-sizing: border-box; }
body { margin: 0; }
button, select { font: inherit; }
.offline-header {
    display: flex; justify-content: space-between; align-items: center;
    background: #1f2a23; color: #fff; padding: 12px max(18px, 4vw);
}
.brand { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; font-family: system-ui, sans-serif; font-weight: 750; }
.brand img { width: 38px; height: 38px; }
.offline-app { max-width: 1060px; margin: auto; padding: 24px; }
.download-panel, .reader-controls, #offline-reader {
    background: #fff; border: 1px solid #ddd6c7; border-radius: 15px;
    padding: 22px; margin-bottom: 18px; box-shadow: 0 8px 28px rgba(40,35,24,.06);
}
.download-panel { display: grid; grid-template-columns: 1fr 310px; gap: 24px; }
.download-actions { display: grid; gap: 10px; align-content: start; }
.eyebrow { font-family: system-ui, sans-serif; text-transform: uppercase; letter-spacing: .13em; font-size: .75rem; color: #6b5938; }
h1 { font-size: clamp(2rem, 4vw, 3.3rem); margin: 4px 0 12px; }
label { display: grid; gap: 6px; font-family: system-ui, sans-serif; font-weight: 650; }
select, button { min-height: 44px; border-radius: 8px; padding: 9px 12px; border: 1px solid #bbb3a2; background: #fff; }
button { background: #315b43; color: #fff; border: 0; cursor: pointer; }
button.secondary { background: #e9e4d9; color: #282b26; }
progress { width: 100%; grid-column: 1 / -1; }
#download-status { grid-column: 1 / -1; margin: 0; font-family: system-ui, sans-serif; }
.reader-controls { display: grid; grid-template-columns: 1fr 2fr 1fr auto; gap: 12px; align-items: end; }
#offline-reader { line-height: 1.65; font-size: 1.12rem; min-height: 320px; }
.offline-verse { margin: .7em 0; }
.offline-verse sup { color: #7a572c; font-weight: bold; margin-right: 5px; }
.offline-title { margin-top: 1.5em; color: #543d21; }
.offline-references { margin: 5px 0 12px 22px; font-family: system-ui, sans-serif; font-size: .85rem; color: #4b5d50; }
.offline-references a { color: inherit; }
@media (max-width: 760px) {
    .download-panel { grid-template-columns: 1fr; }
    .reader-controls { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
    .offline-app { padding: 12px; }
    .reader-controls { grid-template-columns: 1fr; }
}