*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%}:root{--bg:#f6f1e6;--surface:#faf6ec;--border:#e2dac8;--border-soft:#ece4d4;--text-primary:#1a1814;--text-secondary:#6b6560;--text-muted:#9e9890;--accent:#2e4a7a;--accent-hover:#1e3560;--accent-bg:#2e4a7a12;--select-bg:#2e4a7a1f;--serif:"Literata", Georgia, "Times New Roman", serif;--sans:system-ui, -apple-system, "Segoe UI", sans-serif;--reader-font-family:var(--serif);--reader-base-size:1.15rem;--reader-size-scale:1;--reader-font-size:calc(var(--reader-base-size) * var(--reader-size-scale));--reader-base-line-height:1.75;--reader-line-scale:1;--reader-line-height:calc(var(--reader-base-line-height) * var(--reader-line-scale));--verse-gap:0;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-7:48px;--space-8:64px;--radius:4px;--radius-lg:8px;--transition:.15s ease}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#141210;--surface:#1c1a17;--border:#302d28;--border-soft:#252220;--text-primary:#f0ece4;--text-secondary:#9e9890;--text-muted:#5a5650;--accent:#6b93cc;--accent-hover:#89aadb;--accent-bg:#6b93cc1f;--select-bg:#6b93cc2e}}@media (width<=600px){:root{--reader-base-size:1.05rem;--reader-base-line-height:1.7}}:root[data-theme=dark]{--bg:#141210;--surface:#1c1a17;--border:#302d28;--border-soft:#252220;--text-primary:#f0ece4;--text-secondary:#9e9890;--text-muted:#5a5650;--accent:#6b93cc;--accent-hover:#89aadb;--accent-bg:#6b93cc1f;--select-bg:#6b93cc2e}:root[data-font=sans]{--reader-font-family:var(--sans)}:root[data-font-size=sm]{--reader-size-scale:.85}:root[data-font-size=lg]{--reader-size-scale:1.15}:root[data-font-size=xl]{--reader-size-scale:1.3}:root[data-line-spacing=compact]{--reader-line-scale:.88}:root[data-line-spacing=relaxed]{--reader-line-scale:1.15}:root[data-verse-spacing=normal]{--verse-gap:.9em}:root[data-verse-spacing=relaxed]{--verse-gap:1.6em}body{font-family:var(--sans);background:var(--bg);color:var(--text-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}button{cursor:pointer;background:0 0;border:none;font-family:inherit}button:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--radius)}.navbar{z-index:100;background:var(--surface);border-bottom:1px solid var(--border);-webkit-backdrop-filter:blur(8px);position:sticky;top:0}.navbar-inner{align-items:center;gap:var(--space-5);max-width:740px;padding:0 var(--space-5);height:64px;margin:0 auto;display:flex}.navbar-brand{font-family:var(--serif);color:var(--text-muted);letter-spacing:.02em;-webkit-user-select:none;user-select:none;flex-shrink:0;font-size:1.05rem;font-style:italic}.navbar-nav{align-items:center;gap:var(--space-2);flex:1;display:flex}.nav-sep{color:var(--border);-webkit-user-select:none;user-select:none;font-size:1rem}.nav-btn{font-family:var(--sans);color:var(--text-primary);padding:var(--space-1) var(--space-2);border-radius:var(--radius);cursor:pointer;transition:background var(--transition), color var(--transition);background:0 0;border:none;font-size:1rem;font-weight:500}.nav-btn:hover{background:var(--accent-bg);color:var(--accent)}.navbar-arrows{align-items:center;gap:var(--space-1);flex-shrink:0;display:flex}.arrow-btn{border-radius:var(--radius);width:40px;height:40px;color:var(--text-secondary);transition:background var(--transition), color var(--transition);justify-content:center;align-items:center;font-size:1.1rem;display:flex}.arrow-btn:hover:not(:disabled){background:var(--accent-bg);color:var(--accent)}.arrow-btn:disabled{opacity:.25;cursor:default}.nav-menu{flex-shrink:0;position:relative}.nav-menu-btn{width:40px;height:40px;color:var(--text-secondary);border-radius:var(--radius);transition:background var(--transition), color var(--transition);justify-content:center;align-items:center;font-size:1.2rem;display:flex}.nav-menu-btn:hover{background:var(--accent-bg);color:var(--accent)}.nav-menu-panel{top:calc(100% + var(--space-2));z-index:10;gap:var(--space-4);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);width:300px;padding:var(--space-4);flex-direction:column;animation:.15s nav-menu-in;display:flex;position:absolute;right:0;box-shadow:0 16px 48px #00000038}@keyframes nav-menu-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.nav-menu-panel>*{padding-top:var(--space-4);border-top:1px solid var(--border-soft)}.nav-menu-panel>:first-child{border-top:none;padding-top:0}.nav-menu-action{align-items:center;gap:var(--space-3);width:100%;padding:var(--space-2);border-radius:var(--radius);font-family:var(--sans);color:var(--text-primary);transition:background var(--transition), color var(--transition);font-size:.95rem;font-weight:500;display:flex}.nav-menu-action:hover{background:var(--accent-bg);color:var(--accent)}.nav-menu-action-icon{color:var(--text-secondary);transition:color var(--transition);flex-shrink:0;font-size:1.1rem}.nav-menu-action:hover .nav-menu-action-icon{color:var(--accent)}.nav-menu-action-label{text-align:left;flex:1}.nav-menu-action-chevron{color:var(--text-muted);font-size:1.1rem}.nav-menu-section{gap:var(--space-3);flex-direction:column;display:flex}.nav-menu-section-label{font-family:var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);font-size:.7rem;font-weight:600}.nav-menu-subrow{gap:var(--space-2);flex-direction:column;display:flex}.nav-menu-sublabel{font-family:var(--sans);color:var(--text-secondary);font-size:.8rem}.nav-menu-options{gap:var(--space-1);flex-wrap:wrap;display:flex}.nav-menu-opt{font-family:var(--sans);color:var(--text-secondary);padding:var(--space-1) var(--space-3);border:1px solid var(--border);border-radius:var(--radius);transition:background var(--transition), color var(--transition), border-color var(--transition);font-size:.8rem}.nav-menu-opt:hover{background:var(--accent-bg);color:var(--accent)}.nav-menu-opt.active{background:var(--accent-bg);color:var(--accent);border-color:var(--accent)}@media (width<=600px){.nav-menu-panel{width:260px}}.overlay{z-index:200;padding:80px var(--space-4) var(--space-4);background:#00000059;justify-content:center;align-items:flex-start;display:flex;position:fixed;inset:0;overflow-y:auto}.selector-header{padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--border-soft);justify-content:space-between;align-items:center;display:flex}.selector-title{font-family:var(--sans);color:var(--text-muted);letter-spacing:.08em;text-transform:uppercase;font-size:.8rem;font-weight:600}.selector-close{color:var(--text-muted);padding:var(--space-1) var(--space-2);border-radius:var(--radius);transition:background var(--transition), color var(--transition);font-size:.85rem}.selector-close:hover{background:var(--border-soft);color:var(--text-primary)}.book-selector{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);width:100%;max-width:680px;max-height:calc(100vh - 120px);overflow-y:auto;box-shadow:0 20px 60px #0003}.testament-columns{padding:var(--space-4) 0;grid-template-columns:1fr 1px 1fr;display:grid}.testament{padding:0 var(--space-4)}.testament-divider{background:var(--border-soft);margin:var(--space-3) 0}.testament-label{font-family:var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);padding:var(--space-2) var(--space-2) var(--space-3);font-size:.7rem;font-weight:600}.book-list{flex-direction:column;display:flex}.book-btn{text-align:left;padding:6px var(--space-2);border-radius:var(--radius);font-family:var(--sans);color:var(--text-secondary);transition:background var(--transition), color var(--transition);font-size:.875rem}.book-btn:hover{background:var(--accent-bg);color:var(--accent)}.book-btn--active{color:var(--accent);font-weight:600}.chapter-selector{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);width:100%;max-width:400px;box-shadow:0 20px 60px #0003}.chapter-grid{gap:var(--space-2);padding:var(--space-4) var(--space-5);grid-template-columns:repeat(auto-fill,minmax(44px,1fr));display:grid}.chapter-btn{border-radius:var(--radius);height:40px;font-family:var(--sans);color:var(--text-secondary);transition:background var(--transition), color var(--transition);font-size:.875rem}.chapter-btn:hover{background:var(--accent-bg);color:var(--accent)}.chapter-btn--active{background:var(--accent);color:#fff;font-weight:600}.chapter-btn--active:hover{background:var(--accent-hover);color:#fff}@media (width<=520px){.testament-columns{grid-template-columns:1fr}.testament-divider{display:none}}.reader-pane{width:100%;max-width:680px;padding:var(--space-8) var(--space-6) var(--space-8);transition:padding-bottom var(--transition);flex:1;margin:0 auto}.reader-pane.has-selection{padding-bottom:calc(var(--space-8) + 80px)}.reader-heading{margin-bottom:var(--space-7);align-items:baseline;gap:var(--space-4);display:flex}.reader-book{font-family:var(--serif);color:var(--text-primary);letter-spacing:-.02em;font-size:2rem;font-weight:400}.reader-chapter{font-family:var(--sans);color:var(--text-muted);letter-spacing:.04em;text-transform:uppercase;font-size:.85rem}.reader-text{font-family:var(--reader-font-family);font-size:var(--reader-font-size);line-height:var(--reader-line-height);letter-spacing:.005em;color:var(--text-primary)}.verse{cursor:pointer;-webkit-user-select:none;user-select:none}:root[data-verse-spacing=normal] .verse,:root[data-verse-spacing=relaxed] .verse{margin-bottom:var(--verse-gap);display:block}.verse.selected{background:var(--select-bg);border-radius:var(--radius);-webkit-box-decoration-break:clone;box-decoration-break:clone}.verse-num{font-family:var(--sans);color:var(--accent);vertical-align:super;letter-spacing:.02em;opacity:.8;-webkit-user-select:none;user-select:none;margin-right:3px;font-size:.65rem;font-weight:600}.reader-attribution{margin-top:var(--space-8);text-align:center;font-family:var(--sans);color:var(--text-muted);letter-spacing:.08em;text-transform:uppercase;-webkit-user-select:none;user-select:none;font-size:.7rem}.reader-empty{font-family:var(--sans);color:var(--text-muted);padding:var(--space-8) 0;font-size:.9rem}@media (width<=600px){.reader-pane{padding:var(--space-6) var(--space-5) var(--space-7)}.reader-book{font-size:1.6rem}}.verse-action-bar{z-index:100;background:var(--surface);border-top:1px solid var(--border);-webkit-backdrop-filter:blur(8px);animation:.15s slide-up;position:fixed;bottom:0;left:0;right:0}@keyframes slide-up{0%{transform:translateY(100%)}to{transform:translateY(0)}}.verse-action-inner{align-items:center;gap:var(--space-4);max-width:680px;padding:var(--space-4) var(--space-5);margin:0 auto;display:flex}.verse-action-ref{font-family:var(--sans);color:var(--text-secondary);white-space:nowrap;font-size:.95rem;font-weight:500}.verse-action-buttons{gap:var(--space-2);flex:1;display:flex}.verse-action-btn{font-family:var(--sans);color:var(--accent);padding:var(--space-2) var(--space-3);border-radius:var(--radius);transition:background var(--transition);white-space:nowrap;font-size:.95rem;font-weight:500}.verse-action-btn:hover{background:var(--accent-bg)}.verse-action-btn--save{font-weight:600}.project-picker{padding:0 var(--space-5) var(--space-2);pointer-events:none;justify-content:center;display:flex;position:absolute;bottom:100%;left:0;right:0}.project-picker-inner{pointer-events:auto;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);width:100%;max-width:320px;padding:var(--space-3);animation:.15s slide-up;box-shadow:0 12px 40px #0003}.project-picker-title{font-family:var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);padding:0 var(--space-2) var(--space-2);font-size:.7rem;font-weight:600}.project-picker-list{max-height:200px;margin-bottom:var(--space-2);flex-direction:column;list-style:none;display:flex;overflow-y:auto}.project-picker-item{justify-content:space-between;align-items:center;gap:var(--space-3);text-align:left;width:100%;padding:var(--space-2) var(--space-2);border-radius:var(--radius);font-family:var(--sans);color:var(--text-primary);transition:background var(--transition);font-size:.9rem;display:flex}.project-picker-item:hover{background:var(--accent-bg)}.project-picker-count{color:var(--text-muted);flex-shrink:0;font-size:.75rem}.project-picker-new{gap:var(--space-2);border-top:1px solid var(--border-soft);padding-top:var(--space-3);display:flex}.project-picker-input{min-width:0;font-family:var(--sans);color:var(--text-primary);background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);padding:var(--space-2) var(--space-2);transition:border-color var(--transition);flex:1;font-size:.85rem}.project-picker-input:focus{border-color:var(--accent);outline:none}.project-picker-input::placeholder{color:var(--text-muted)}.project-picker-create{font-family:var(--sans);color:var(--accent);padding:var(--space-2) var(--space-3);border-radius:var(--radius);transition:background var(--transition);font-size:.8rem;font-weight:500}.project-picker-create:hover:not(:disabled){background:var(--accent-bg)}.project-picker-create:disabled{opacity:.4;cursor:default}.verse-action-close{width:36px;height:36px;color:var(--text-muted);border-radius:var(--radius);transition:background var(--transition), color var(--transition);flex-shrink:0;justify-content:center;align-items:center;display:flex}.verse-action-close:hover{background:var(--accent-bg);color:var(--accent)}@media (width<=600px){.verse-action-inner{padding:var(--space-3) var(--space-4);gap:var(--space-2)}.verse-action-btn{padding:var(--space-2);font-size:.9rem}}.projects{flex-direction:column;min-height:100%;display:flex}.projects-bar{z-index:100;background:var(--surface);border-bottom:1px solid var(--border);-webkit-backdrop-filter:blur(8px);position:sticky;top:0}.projects-bar-inner{align-items:center;gap:var(--space-4);max-width:740px;padding:0 var(--space-5);height:64px;margin:0 auto;display:flex}.projects-heading,.projects-back{font-family:var(--sans);color:var(--text-primary);flex:1;font-size:1rem;font-weight:500}.projects-back{text-align:left;padding:var(--space-1) var(--space-2);margin-left:calc(-1 * var(--space-2));border-radius:var(--radius);color:var(--text-secondary);transition:background var(--transition), color var(--transition)}.projects-back:hover{background:var(--accent-bg);color:var(--accent)}.projects-reader-btn{font-family:var(--sans);color:var(--text-secondary);padding:var(--space-1) var(--space-2);border-radius:var(--radius);transition:background var(--transition), color var(--transition);flex-shrink:0;font-size:1rem;font-weight:500}.projects-reader-btn:hover{background:var(--accent-bg);color:var(--accent)}.projects-content{width:100%;max-width:680px;padding:var(--space-7) var(--space-6) var(--space-8);flex:1;margin:0 auto}.project-new{gap:var(--space-2);margin-bottom:var(--space-6);display:flex}.project-new-input{font-family:var(--sans);color:var(--text-primary);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:var(--space-2) var(--space-3);transition:border-color var(--transition);flex:1;font-size:.9rem}.project-new-input:focus{border-color:var(--accent);outline:none}.project-new-input::placeholder{color:var(--text-muted)}.project-new-btn{font-family:var(--sans);color:#fff;background:var(--accent);border-radius:var(--radius);padding:var(--space-2) var(--space-4);transition:background var(--transition);font-size:.85rem;font-weight:500}.project-new-btn:hover:not(:disabled){background:var(--accent-hover)}.project-new-btn:disabled{opacity:.4;cursor:default}.project-rows{gap:var(--space-1);flex-direction:column;list-style:none;display:flex}.project-row{justify-content:space-between;align-items:baseline;gap:var(--space-4);text-align:left;width:100%;padding:var(--space-3) var(--space-3);border-radius:var(--radius);transition:background var(--transition);display:flex}.project-row:hover{background:var(--accent-bg)}.project-row-name{font-family:var(--serif);color:var(--text-primary);font-size:1.1rem}.project-row-count{font-family:var(--sans);color:var(--text-muted);letter-spacing:.03em;white-space:nowrap;flex-shrink:0;font-size:.75rem}.project-detail-head{align-items:center;gap:var(--space-4);margin-bottom:var(--space-6);display:flex}.project-title-input{font-family:var(--serif);color:var(--text-primary);padding:var(--space-1) 0;transition:border-color var(--transition);background:0 0;border:none;border-bottom:1px solid #0000;flex:1;font-size:1.6rem}.project-title-input:hover{border-bottom-color:var(--border)}.project-title-input:focus{border-bottom-color:var(--accent);outline:none}.project-share-btn,.project-save-btn,.project-delete-btn{font-family:var(--sans);color:var(--text-muted);padding:var(--space-1) var(--space-2);border-radius:var(--radius);transition:background var(--transition), color var(--transition);flex-shrink:0;font-size:.8rem}.project-share-btn:hover,.project-save-btn:hover,.project-delete-btn:hover{background:var(--accent-bg);color:var(--accent)}.project-save-btn:disabled{color:var(--text-muted);cursor:default;background:0 0}.shared-title{font-family:var(--serif);color:var(--text-primary);flex:1;font-size:1.6rem;font-weight:400}.verse-cards{gap:var(--space-3);flex-direction:column;list-style:none;display:flex}.verse-card{background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--radius-lg);padding:var(--space-4) var(--space-5)}.verse-card-head{margin-bottom:var(--space-2);justify-content:space-between;align-items:center;display:flex}.verse-card-ref{font-family:var(--sans);color:var(--accent);letter-spacing:.04em;text-transform:uppercase;font-size:.75rem;font-weight:600}.verse-card-remove{width:24px;height:24px;color:var(--text-muted);border-radius:var(--radius);transition:background var(--transition), color var(--transition);justify-content:center;align-items:center;font-size:.75rem;display:flex}.verse-card-remove:hover{background:var(--accent-bg);color:var(--accent)}.verse-card-text{font-family:var(--serif);color:var(--text-primary);font-size:1.05rem;line-height:1.7}.projects-empty{font-family:var(--sans);color:var(--text-muted);padding:var(--space-6) 0;font-size:.9rem;line-height:1.6}@media (width<=600px){.projects-content{padding:var(--space-6) var(--space-5) var(--space-7)}.project-title-input,.shared-title{font-size:1.35rem}}.app{flex-direction:column;height:100%;display:flex}.loading{height:100%;font-family:var(--sans);color:var(--text-muted);letter-spacing:.05em;justify-content:center;align-items:center;font-size:.9rem;display:flex}.load-error{flex-direction:column;gap:1rem}.load-error button{font-family:var(--sans);letter-spacing:.05em;color:var(--text-secondary);border:1px solid var(--text-muted);cursor:pointer;background:0 0;border-radius:999px;padding:.4rem 1.1rem;font-size:.85rem}.load-error button:hover{color:var(--text-primary);border-color:var(--text-secondary)}