:root{
  --bg:#f3f6f5; --surface:#ffffff; --surface2:#eaf0ee; --ink:#1b2422; --muted:#5b6965; --line:#d6e0dd;
  --accent:#1e5b4f; --head-bg:#fbe3ea; --head-ink:#6d1a2c; --head-line:#800020;
  --ayah:#1b6e2a; --hadith:#7a4a1c; --sharh:#4a5d73;
  --g-bg:#cdeccf; --g-ink:#14532d; --b-bg:#cfe3f7; --b-ink:#0b3d6e; --y-bg:#fff3b0; --y-ink:inherit;
  --display:"Amiri","Traditional Arabic",serif; --body:"IBM Plex Sans Arabic","Segoe UI","Tahoma",sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  color-scheme:dark;
  --bg:#0f1614; --surface:#16211e; --surface2:#1c2a27; --ink:#e4ebe8; --muted:#9aaba6; --line:#2a3a36;
  --accent:#6cbca6; --head-bg:#3a1f27; --head-ink:#f3c4d1; --head-line:#c4546f;
  --ayah:#8fd6a0; --hadith:#e2b98a; --sharh:#a9bcd2;
  --g-bg:#1f4a2c; --g-ink:#c9f0d2; --b-bg:#1d3a57; --b-ink:#cfe3f7; --y-bg:#4a4318; --y-ink:#f5ecc0;
}}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0f1614; --surface:#16211e; --surface2:#1c2a27; --ink:#e4ebe8; --muted:#9aaba6; --line:#2a3a36;
  --accent:#6cbca6; --head-bg:#3a1f27; --head-ink:#f3c4d1; --head-line:#c4546f;
  --ayah:#8fd6a0; --hadith:#e2b98a; --sharh:#a9bcd2;
  --g-bg:#1f4a2c; --g-ink:#c9f0d2; --b-bg:#1d3a57; --b-ink:#cfe3f7; --y-bg:#4a4318; --y-ink:#f5ecc0;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font-family:var(--body);direction:rtl}
a{color:var(--accent)}
.app{display:grid;grid-template-columns:300px minmax(0,1fr);min-height:100vh}
aside{background:var(--surface);border-left:1px solid var(--line);position:sticky;top:0;height:100vh;display:flex;flex-direction:column}
.brand{padding:18px 18px 8px}
.brand a.back{font-size:13px;text-decoration:none}
.brand h1{font-family:var(--display);font-size:26px;line-height:1.35;margin:4px 0 0;color:var(--head-ink)}
.brand p{margin:2px 0 0;color:var(--muted);font-size:13px}
.search{padding:6px 18px 10px}
.search input{width:100%;padding:8px 12px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink);font:inherit;font-size:14px}
nav{overflow-y:auto;padding:4px 10px 24px;flex:1}
nav a{display:block;padding:4px 8px;border-radius:8px;font-size:14px;line-height:1.6;color:var(--ink);text-decoration:none}
nav a:hover{background:var(--surface2)}
main{min-width:0}
.wrap{max-width:820px;margin:0 auto;padding:28px 24px 80px}
.title{font-family:var(--display);font-size:clamp(30px,5vw,42px);color:var(--head-ink);text-align:center;margin:0 0 6px}
.legend{display:flex;flex-wrap:wrap;gap:6px 14px;justify-content:center;font-size:14px;margin:0 0 10px}
.dl{text-align:center;font-size:14px;margin:0 0 24px}
.book{font-family:var(--display);font-size:20px;line-height:2.05;text-align:justify}
.book p{margin:0 0 8px}
.book h2{font-size:22px;color:var(--head-ink);background:var(--head-bg);border-bottom:2px solid var(--head-line);padding:4px 12px;margin:26px 0 10px;line-height:1.6;scroll-margin-top:12px}
.pg{display:flex;align-items:center;gap:10px;margin:22px 0 10px;color:var(--muted);font-family:var(--body);font-size:12px}
.pg::before,.pg::after{content:"";flex:1;border-top:1px dashed var(--line)}
.pg span{border:1px solid var(--line);border-radius:99px;padding:0 10px}
.ayah{color:var(--ayah);font-weight:700;font-size:1.08em}
.hadith{color:var(--hadith);font-weight:700}
.sharh,.sharh p{color:var(--sharh);font-style:italic;font-size:.93em}
.sharh{margin:4px 0 10px;padding-inline-start:12px;border-inline-start:3px solid var(--line)}
.side{color:var(--sharh);font-style:italic;font-size:.85em;margin:0 0 8px;padding-inline-start:12px;border-inline-start:2px dotted var(--line)}
.lbl{font-style:normal}
.lm,.lh,mark.g,.lbl.g{background:var(--g-bg);color:var(--g-ink);font-weight:700;padding:0 3px;border-radius:3px}
.le,mark.b,.lbl.b{background:var(--b-bg);color:var(--b-ink);font-weight:700;padding:0 3px;border-radius:3px}
mark.y,.lbl.y{background:var(--y-bg);color:var(--y-ink);padding:0 3px;border-radius:3px}
mark{color:inherit}
.hit{outline:2px solid var(--accent);border-radius:3px}
@media (max-width:860px){
  .app{grid-template-columns:minmax(0,1fr)}
  aside{position:static;height:auto;border-left:0;border-bottom:1px solid var(--line)}
  nav{max-height:32vh}
  .brand,.search{padding-inline:16px}
  .wrap{padding:20px 16px 60px}
  .book{font-size:18px}
}