:root{--paper:#fffdf8;--cream:#f7efe2;--gold:#c99a45;--brown:#5c321e;--ink:#2d241f;--muted:#786a61;--sky:#dcecf2;--verse-size:1.15rem}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:linear-gradient(145deg,var(--cream),#fff 48%,var(--sky));color:var(--ink);font-family:"DM Sans",sans-serif;min-height:100vh}
button,input,select{font:inherit}
button{cursor:pointer}
.topbar{height:76px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(18px,4vw,48px);background:rgba(255,253,248,.92);border-bottom:1px solid rgba(92,50,30,.12);position:sticky;top:0;z-index:10;backdrop-filter:blur(12px)}
.brand{display:flex;align-items:center;gap:12px;color:var(--brown);text-decoration:none}.brand-icon{display:grid;place-items:center;width:40px;height:40px;background:var(--brown);color:#f8df9b;border-radius:50%;font-size:1.2rem}.brand strong,.brand small{display:block}.brand strong{font-family:Lora,serif;font-size:1.1rem}.brand small{font-size:.75rem;color:var(--muted);margin-top:2px}
.icon-button,.close-button,.font-controls button{border:1px solid rgba(92,50,30,.17);background:#fff;color:var(--brown);border-radius:12px;min-width:42px;height:42px}.icon-button{display:flex;align-items:center;justify-content:center;gap:3px;font-size:1.25rem}.icon-button b{font-size:.7rem;background:var(--brown);color:#fff;border-radius:10px;padding:2px 6px}
main{padding:34px 16px 56px}.reader-shell{max-width:860px;margin:auto}.search-card,.reading-card{background:rgba(255,253,248,.96);box-shadow:0 20px 60px rgba(67,45,30,.1);border:1px solid rgba(92,50,30,.1)}
.search-card{border-radius:18px;padding:20px;margin-bottom:18px}.search-card label{font-weight:700;color:var(--brown);display:block;margin-bottom:8px}.search-row{display:flex;gap:9px}.search-row input{flex:1;min-width:0;border:1px solid #cfbda9;background:#fff;padding:13px 15px;border-radius:11px;color:var(--ink);outline:none}.search-row input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,154,69,.2)}.search-row button,.play-button{border:0;background:var(--brown);color:#fff;font-weight:700;border-radius:11px;padding:0 22px}.search-card p{margin:8px 0 0;font-size:.79rem;color:var(--muted)}
.reading-card{border-radius:24px;overflow:hidden}.reading-head{padding:26px 30px 20px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(92,50,30,.1)}.eyebrow{text-transform:uppercase;letter-spacing:.16em;color:#9a6d2d;font-size:.72rem;font-weight:700}.reading-head h1{font-family:Lora,serif;color:var(--brown);margin:4px 0 0;font-size:clamp(1.7rem,4vw,2.35rem)}.font-controls{display:flex;gap:7px}.font-controls button{font-weight:700}
.status{padding:50px 28px;text-align:center;color:var(--muted)}.status.error{color:#9d2d22}.verses{padding:28px 34px 120px;line-height:1.95;font-family:Lora,serif;font-size:var(--verse-size);max-height:62vh;overflow:auto;scrollbar-color:#cdbda8 transparent}.verse{display:inline;padding:4px 2px;border-radius:5px;transition:.25s}.verse-number{font-family:"DM Sans",sans-serif;font-size:.68em;vertical-align:super;color:#a06e2d;font-weight:700;margin-right:3px}.verse:hover{background:#faf0dc}.verse.active{background:#f7dfa6;box-shadow:0 0 0 3px #f7dfa6}.favorite{border:0;background:transparent;color:#ad9d91;font-size:.9em;padding:2px 5px;vertical-align:middle}.favorite.saved{color:#b27312}
.player{display:flex;align-items:center;justify-content:space-between;gap:14px;position:sticky;bottom:0;padding:16px 24px;background:rgba(255,253,248,.95);border-top:1px solid rgba(92,50,30,.12);backdrop-filter:blur(12px)}.play-button{height:46px;display:flex;align-items:center;gap:9px}.play-button:disabled{opacity:.5;cursor:not-allowed}.speed-control{font-size:.82rem;color:var(--muted);display:flex;align-items:center;gap:7px}.speed-control select{border:1px solid #cfbda9;border-radius:9px;background:#fff;padding:8px}
.favorites-panel{position:fixed;right:0;top:0;width:min(390px,92vw);height:100vh;background:var(--paper);z-index:30;box-shadow:-20px 0 60px rgba(45,36,31,.2);transform:translateX(105%);transition:.28s ease;padding:24px;overflow:auto}.favorites-panel.open{transform:none}.panel-head{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e5d9cc;padding-bottom:13px}.panel-head h2{font-family:Lora,serif;color:var(--brown);margin:0}.favorites-list{display:grid;gap:12px;padding-top:18px}.favorite-card{border:1px solid #e5d9cc;border-radius:14px;padding:15px;background:#fff}.favorite-card strong{color:var(--brown)}.favorite-card p{font-family:Lora,serif;line-height:1.6;margin:8px 0}.favorite-card button{border:0;background:transparent;color:#9d2d22;padding:0}.empty{text-align:center;color:var(--muted);padding:36px 12px}.scrim{position:fixed;inset:0;background:rgba(31,22,17,.35);z-index:20}footer{text-align:center;color:var(--brown);padding:0 0 28px;font-size:.82rem}
@media(max-width:600px){.topbar{height:68px}.brand small{display:none}main{padding:18px 10px 36px}.search-card{padding:15px}.search-row{align-items:stretch}.search-row button{padding:0 14px}.reading-head{padding:21px 19px 16px}.verses{padding:22px 19px 105px;max-height:66vh;line-height:1.85}.player{padding:13px 15px}.speed-control{font-size:0}.speed-control select{font-size:.85rem}.play-button{padding:0 15px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}