:root{
  --bg:#f5f1e6; --card:#fffdf6; --card2:#efe9da; --line:#ddd5c2;
  --ink:#211d16; --dim:#6b6252; --gold:#8a6a1a; --goldb:#f3e7c4; --onGold:#fffdf6;
  --c1:#1d5c8c; --c1b:#e9f1f8; --c2:#1f6b34; --c2b:#e8f3ea; --c3:#7a2f5c; --c3b:#f5e8ef;
  --sh:#6a3d12; --shb:#f6ecdc; --warn:#a4481b; --mark:#f6e6b8;
  --fs:21px; --barH:52px; --playerH:0px; --navH:0px;
  --ui:"IBM Plex Sans Arabic","Segoe UI",system-ui,sans-serif;
  --txt:"Amiri","Noto Naskh Arabic","Traditional Arabic",serif;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#16140f; --card:#211e17; --card2:#2b271e; --line:#3a3428;
    --ink:#ece5d3; --dim:#a69c86; --gold:#d4ad55; --goldb:#3a3020; --onGold:#16140f;
    --c1:#7fb4df; --c1b:#1b2733; --c2:#83c497; --c2b:#1a2a1f; --c3:#d99bc0; --c3b:#2e1f28;
    --sh:#e0b27a; --shb:#2d2419; --warn:#e58f63; --mark:#5b4a1c;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#16140f; --card:#211e17; --card2:#2b271e; --line:#3a3428;
  --ink:#ece5d3; --dim:#a69c86; --gold:#d4ad55; --goldb:#3a3020; --onGold:#16140f;
  --c1:#7fb4df; --c1b:#1b2733; --c2:#83c497; --c2b:#1a2a1f; --c3:#d99bc0; --c3b:#2e1f28;
  --sh:#e0b27a; --shb:#2d2419; --warn:#e58f63; --mark:#5b4a1c;
  color-scheme:dark;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--bg);color:var(--ink)}
body{font-family:var(--ui);font-size:15px;line-height:1.7;
  padding-top:calc(env(safe-area-inset-top) + var(--barH));
  padding-bottom:calc(env(safe-area-inset-bottom) + var(--playerH) + var(--navH) + 28px)}
button{font:inherit;color:inherit}
a{color:inherit}
[hidden]{display:none!important}

/* top bar */
#bar{position:fixed;top:0;left:0;right:0;z-index:30;display:flex;align-items:center;gap:4px;
  height:calc(env(safe-area-inset-top) + var(--barH));padding:env(safe-area-inset-top) 8px 0;
  background:var(--bg);border-bottom:1px solid var(--line)}
#bTitle{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25;padding-inline:6px}
#bTitle b{font-size:16px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#bTitle small{font-size:12px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ib{background:none;border:0;color:var(--dim);font-size:20px;line-height:1;padding:9px 10px;border-radius:9px;cursor:pointer;min-width:42px}
.ib:active{background:var(--card2)}
#prog{position:fixed;top:calc(env(safe-area-inset-top) + var(--barH) - 2px);right:0;height:2px;background:var(--gold);width:0;z-index:31;transition:width .2s}

#main{max-width:760px;margin:0 auto;padding:16px 14px 0}
.empty{padding:28px 12px;color:var(--dim);text-align:center}
h2.sec{font-size:13px;font-weight:600;color:var(--dim);margin:26px 2px 8px;letter-spacing:0}
.muted{color:var(--dim)}

/* library + book home */
.hero{padding:18px 4px 6px}
.hero h1{font-family:var(--txt);font-size:34px;line-height:1.3;margin:0 0 2px;font-weight:700}
.hero p{margin:0;color:var(--dim)}
.bookCard{display:block;text-decoration:none;background:var(--card);border:1px solid var(--line);border-right:4px solid var(--gold);
  border-radius:14px;padding:18px 18px 16px;margin-top:14px}
.bookCard:active{background:var(--card2)}
.bookCard h3{font-family:var(--txt);font-size:26px;margin:0;line-height:1.35}
.bookCard p{margin:2px 0 10px;color:var(--dim);font-size:14px}
.stats{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12.5px;color:var(--dim)}
.stats b{color:var(--gold);font-weight:600}
.resume{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.tile{display:flex;flex-direction:column;gap:2px;text-decoration:none;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:13px 14px;cursor:pointer;text-align:right;min-width:0}
.tile:active{background:var(--card2)}
.tile .t{font-weight:600;font-size:15px}
.tile .s{font-size:12.5px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile.primary{background:var(--gold);border-color:var(--gold);color:var(--onGold)}
.tile.primary .s{color:var(--onGold);opacity:.85}
.list{background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.li{display:flex;gap:10px;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--line);text-decoration:none;cursor:pointer}
.li:last-child{border-bottom:0}
.li:active{background:var(--card2)}
.li .n{flex:0 0 auto;font-size:12px;color:var(--dim)}
.li .x{flex:1;min-width:0}
.li .x small{display:block;color:var(--dim);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.notes{font-size:13.5px;color:var(--dim);padding-inline-start:18px;margin:0}
.notes li{margin:4px 0}

/* reader */
.meta{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:12.5px;color:var(--dim);margin-bottom:10px}
.meta b{color:var(--gold);font-weight:600}
.matn{background:var(--card);border:1px solid var(--line);border-right:3px solid var(--gold);border-radius:12px;
  padding:20px 18px;font-family:var(--txt);font-size:var(--fs);line-height:2.1;white-space:pre-line;text-align:justify}
.btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.btn{flex:1 1 30%;padding:12px 8px;border-radius:11px;border:1px solid var(--line);background:var(--card2);cursor:pointer;font-size:14.5px;min-height:46px}
.btn:active{opacity:.6}
.btn[disabled]{opacity:.4;cursor:default}
.btn.on{border-color:currentColor}
.sh{margin-top:12px;border-radius:12px;padding:16px;border:1px solid var(--line);font-family:var(--txt);
  font-size:calc(var(--fs) - 3px);line-height:2.15;text-align:justify;white-space:pre-line}
.sh h4{margin:0 0 8px;font-family:var(--ui);font-size:13px;font-weight:600}
.k0{color:var(--c1)} .sh.k0{background:var(--c1b);border-right:3px solid var(--c1);color:var(--ink)} .sh.k0 h4{color:var(--c1)}
.k1{color:var(--c2)} .sh.k1{background:var(--c2b);border-right:3px solid var(--c2);color:var(--ink)} .sh.k1 h4{color:var(--c2)}
.k2{color:var(--c3)} .sh.k2{background:var(--c3b);border-right:3px solid var(--c3);color:var(--ink)} .sh.k2 h4{color:var(--c3)}
.btn.on.k0{background:var(--c1b)} .btn.on.k1{background:var(--c2b)} .btn.on.k2{background:var(--c3b)}

.sheikh{margin-top:14px;background:var(--shb);border:1px solid var(--line);border-right:3px solid var(--sh);border-radius:12px;padding:14px}
.sheikh h4{margin:0 0 10px;font-size:13px;font-weight:600;color:var(--sh);display:flex;justify-content:space-between;gap:8px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--card);border-radius:999px;padding:8px 13px;cursor:pointer;font-size:13.5px;min-height:40px}
.chip:active{opacity:.6}
.chip .w{color:var(--warn);font-size:11.5px}
.linkb{background:none;border:0;color:var(--sh);cursor:pointer;font-size:13px;padding:4px 0;text-decoration:underline;text-underline-offset:3px}
.excerpt{margin-top:10px;border-top:1px dashed var(--line);padding-top:6px}

/* transcript segments */
.seg{display:flex;gap:10px;padding:9px 6px;border-radius:8px;cursor:pointer;font-family:var(--txt);font-size:calc(var(--fs) - 3px);line-height:1.95}
.seg:active{background:var(--card2)}
.seg time{flex:0 0 auto;font-family:var(--ui);font-size:11.5px;color:var(--dim);padding-top:6px;direction:ltr;min-width:52px;text-align:left}
.seg.cur{background:var(--goldb)}
.seg.cur time{color:var(--gold);font-weight:600}
.lessonHead{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin-bottom:12px}
.lessonHead h3{margin:0;font-size:17px;line-height:1.5}
.lessonHead .row{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;align-items:center}
.pill{border:1px solid var(--line);background:var(--card2);border-radius:10px;padding:9px 14px;cursor:pointer;font-size:14px;text-decoration:none;min-height:42px;display:inline-flex;align-items:center}
.pill.gold{background:var(--gold);border-color:var(--gold);color:var(--onGold);font-weight:600}
.pill.on{border-color:var(--gold);color:var(--gold)}
.field{width:100%;background:var(--card);border:1px solid var(--line);color:var(--ink);border-radius:11px;padding:12px 14px;font:inherit;font-size:16px;outline:none}
.field:focus{border-color:var(--gold)}
.stickyTools{position:sticky;top:calc(env(safe-area-inset-top) + var(--barH));z-index:5;background:var(--bg);padding:8px 0 10px;display:flex;gap:8px;align-items:center}
.stickyTools .field{flex:1}
.bar2{height:3px;background:var(--line);border-radius:3px;overflow:hidden;margin-top:6px}
.bar2 i{display:block;height:100%;background:var(--gold)}

/* search */
.scopes{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 4px}
.res{padding:12px 14px;border-bottom:1px solid var(--line);cursor:pointer}
.res:last-child{border-bottom:0}
.res:active{background:var(--card2)}
.res small{display:block;color:var(--gold);font-size:12px;margin-bottom:2px}
.res .q{font-family:var(--txt);font-size:17px;line-height:1.9}
mark{background:var(--mark);color:inherit;padding:0 1px;border-radius:2px}
.more{display:block;width:100%;padding:12px;border:0;background:var(--card2);cursor:pointer;color:var(--dim)}

/* bottom nav (reader) */
#nav{position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--bg);border-top:1px solid var(--line);
  padding:9px 12px calc(env(safe-area-inset-bottom) + 9px);display:flex;gap:9px;align-items:center}
#nav .next{flex:1;padding:14px;border-radius:12px;border:0;background:var(--gold);color:var(--onGold);font-size:17px;font-weight:600;cursor:pointer}
#nav .sq{width:52px;height:52px;flex:0 0 auto;border-radius:12px;border:1px solid var(--line);background:var(--card2);color:var(--dim);font-size:20px;cursor:pointer}
#nav .sq.on{background:var(--gold);color:var(--onGold);border-color:var(--gold)}

/* player */
#player{position:fixed;left:0;right:0;z-index:29;bottom:var(--navH);background:var(--card);border-top:1px solid var(--line);
  padding:0 10px calc(env(safe-area-inset-bottom) * var(--pSafe,1) + 8px);box-shadow:0 -6px 18px rgba(0,0,0,.06)}
#pTrack{position:relative;height:16px;margin:0 -10px}
#pTrack::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--line)}
#pFill{position:absolute;right:0;top:0;height:3px;background:var(--gold);width:0}
#pSeek{position:absolute;inset:-6px 0 0 0;width:100%;opacity:0;cursor:pointer;margin:0;direction:rtl}
#pRow{display:flex;align-items:center;gap:6px}
.pb{background:none;border:1px solid var(--line);border-radius:10px;min-width:44px;height:40px;padding:0 8px;cursor:pointer;font-size:13px;color:var(--dim)}
.pb.big{background:var(--gold);border-color:var(--gold);color:var(--onGold);font-size:17px;width:46px;height:46px;border-radius:50%}
#pInfo{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3;cursor:pointer;padding-inline:4px}
#pInfo b{font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#pInfo small{font-size:12px;color:var(--dim);direction:ltr;text-align:right}
@media (max-width:380px){#pClose{display:none}}

#toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--playerH) + var(--navH) + 20px + env(safe-area-inset-bottom));
  background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:10px;font-size:14px;opacity:0;pointer-events:none;transition:opacity .25s;z-index:60;max-width:90vw;text-align:center}
#toast.show{opacity:1}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}