:root{
  --bg:#f7f3ec;--bg2:#ede8df;--surface:#fdfaf5;
  --border:rgba(0,0,0,.08);--border2:rgba(0,0,0,.13);
  --text:#181410;--text2:#5c4e38;--text3:#9a876a;
  --accent:#2a5c24;--accent-l:#e6f0e4;
  --ink:#181410;--r:10px;
  --font-q:'Amiri Quran','Amiri',serif;
  --font-ui:'Amiri',serif;
}
[data-theme=dark]{
  --bg:#0e0c09;--bg2:#1a170f;--surface:#141209;
  --border:rgba(255,255,255,.07);--border2:rgba(255,255,255,.13);
  --text:#ece4d4;--text2:#a0906e;--text3:#6a5a3e;
  --accent:#7dba73;--accent-l:rgba(125,186,115,.12);
  --ink:#f0e8d6;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font-ui);background:var(--bg);color:var(--text);min-height:100vh;transition:background .25s,color .25s}
a{color:inherit;text-decoration:none}
button{font-family:var(--font-ui);cursor:pointer}

/* ── NAV ── */
nav{position:sticky;top:0;z-index:100;height:52px;background:var(--bg);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px;padding:0 1.5rem;backdrop-filter:blur(8px)}
.nav-logo{font-size:1.05rem;font-weight:700;color:var(--accent);white-space:nowrap}
.nav-logo span{font-size:.78rem;font-weight:400;color:var(--text3);margin-right:6px}
.nav-search{flex:1;max-width:380px;position:relative}
.nav-search input{width:100%;background:var(--surface);border:1px solid var(--border2);border-radius:8px;padding:6px 12px 6px 34px;font-family:var(--font-ui);font-size:.9rem;color:var(--text);outline:none;transition:border .15s;direction:rtl}
.nav-search input:focus{border-color:var(--accent)}
.nav-search input::placeholder{color:var(--text3)}
.search-icon{position:absolute;left:9px;top:50%;transform:translateY(-50%);width:15px;height:15px;opacity:.38;pointer-events:none}
.search-drop{position:absolute;top:calc(100% + 5px);right:0;left:0;background:var(--surface);border:1px solid var(--border2);border-radius:var(--r);box-shadow:0 4px 20px rgba(0,0,0,.12);max-height:300px;overflow-y:auto;display:none;z-index:200}
.search-drop.open{display:block}
.s-item{display:flex;align-items:center;gap:10px;padding:9px 14px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .12s}
.s-item:last-child{border-bottom:none}
.s-item:hover{background:rgba(0,0,0,.035)}
.s-num{font-size:.75rem;color:var(--text3);min-width:24px;text-align:center}
.s-ar{font-size:1rem;color:var(--text)}
.s-en{font-size:.78rem;color:var(--text3);margin-right:auto}
.nav-actions{display:flex;align-items:center;gap:6px;margin-right:auto}
.btn-ic{width:34px;height:34px;border:1px solid var(--border2);border-radius:8px;background:transparent;color:var(--text2);display:flex;align-items:center;justify-content:center;transition:background .12s,color .12s;font-size:15px}
.btn-ic:hover{background:var(--bg2);color:var(--text)}
.btn-ic.on{background:var(--accent-l);color:var(--accent);border-color:var(--accent)}

/* ── GENERIC BTN ── */
.btn{display:inline-flex;align-items:center;gap:6px;padding:7px 15px;border-radius:8px;border:1px solid var(--border2);background:var(--surface);color:var(--text2);font-size:.85rem;transition:all .12s}
.btn:hover{background:var(--bg2);color:var(--text)}
.btn-primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn-primary:hover{opacity:.88}

/* ── TOAST ── */
.toast{position:fixed;bottom:1.5rem;left:50%;transform:translateX(-50%) translateY(6px);background:var(--text);color:var(--bg);padding:7px 18px;border-radius:99px;font-size:.82rem;opacity:0;transition:all .22s;pointer-events:none;z-index:999;white-space:nowrap}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ── SCROLLBAR ── */
::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:99px}

@media(max-width:640px){
  nav{padding:0 .9rem}
  .nav-logo span{display:none}
}