:root { --bg:#f3eee5; --paper:#fffaf1; --ink:#403b34; --muted:#847b70; --accent:#9a7653; --line:#e3d9ca; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:system-ui,sans-serif; }
body.light { --bg:#f5f7fa; --paper:#fff; --ink:#283747; --muted:#718096; --accent:#527b9c; --line:#dce4eb; }
body.dark { --bg:#171511; --paper:#211e19; --ink:#eee6d8; --muted:#aaa08f; --accent:#d1a879; --line:#3d362d; }
.top { padding:15px 4%; background:var(--paper); border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; }
.logo { font-size:23px; font-weight:bold; color:var(--ink); } .logo span { color:var(--accent); }
nav { display:flex; gap:15px; align-items:center; flex-wrap:wrap; }
.container { max-width:1100px; margin:30px auto; padding:0 18px; min-height:75vh; }
.hero, .panel { background:var(--paper); border:1px solid var(--line); padding:22px; border-radius:15px; margin:15px 0; }
input, textarea, select { display:block; width:100%; margin-top:6px; padding:11px; border:1px solid var(--line); border-radius:9px; background:var(--bg); color:var(--ink); font:inherit; }
button, .button { border:0; border-radius:9px; background:var(--accent); color:white; padding:11px 16px; cursor:pointer; font:inherit; text-decoration:none; display:inline-block; }
.button.gold { background:#d4af37; color:#111; font-weight:bold; }
.secondary { background:var(--line); color:var(--ink); }
.alert { padding:14px; background:#f8e8d8; border-radius:10px; color:#744c2b; margin-bottom:15px; }
.success { padding:14px; background:#e5f8ec; border-radius:10px; color:#176b38; margin-bottom:15px; }
.reader-header { display:flex; justify-content:space-between; align-items:end; flex-wrap:wrap; gap:15px; }
.selectors, .toolbar { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:15px 0; }
.scripture { background:var(--paper); border:1px solid var(--line); border-radius:16px; padding:30px; line-height:1.8; }
.verse { margin-bottom:12px; cursor:pointer; padding:4px 6px; border-radius:6px; }
.verse sup { color:var(--accent); font-weight:bold; margin-right:4px; }
.highlight-yellow { background:#f5e8a8; }
.highlight-green { background:#cce6c9; }
.highlight-blue { background:#c9e0f1; }
.compare-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:15px; }
.verse-menu { position:fixed; left:50%; bottom:20px; transform:translateX(-50%); width:min(94vw,360px); background:var(--paper); border:1px solid var(--line); padding:16px; border-radius:15px; box-shadow:0 10px 30px #0003; display:grid; gap:8px; z-index:100; }
.verse-menu[hidden], .dialog[hidden] { display:none; }
.dialog { position:fixed; inset:0; background:#0007; z-index:200; display:grid; place-items:center; padding:15px; }
.dialog .panel { width:min(100%, 500px); }
footer { text-align:center; padding:25px; color:var(--muted); font-size:12px; }