:root{
  --bg:#f7f2e7; --bg2:#efe6d2; --paper:#fffdf8; --ink:#1f2a24; --ink2:#55605a; --muted:#8a8f86;
  --emerald:#0d5c46; --emerald2:#0a4535; --emerald-soft:#e3efe8; --gold:#b8892f; --gold2:#d9b25f; --gold-soft:#f6ecd4;
  --line:#e4d9c2; --shadow:0 10px 30px -12px rgba(40,30,10,.25); --shadow-s:0 4px 14px -6px rgba(40,30,10,.2);
  --radius:22px; --fs:1;
  --pattern-op:.07;
}
:root[data-theme="dark"]{
  --bg:#0c1512; --bg2:#101c18; --paper:#14211c; --ink:#ece6d6; --ink2:#bdb7a6; --muted:#868b80;
  --emerald:#3fb58c; --emerald2:#7fd6b5; --emerald-soft:#173328; --gold:#e0b75e; --gold2:#f0d28e; --gold-soft:#2a2414;
  --line:#24352e; --shadow:0 10px 30px -12px rgba(0,0,0,.6); --shadow-s:0 4px 14px -6px rgba(0,0,0,.5);
  --pattern-op:.05;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Tajawal",system-ui,sans-serif;line-height:1.8;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;z-index:-1;opacity:var(--pattern-op);pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='%230d5c46' stroke-width='1.2'%3E%3Cpath d='M40 4l10 16 18 2-12 14 4 18-20-8-20 8 4-18L12 22l18-2z'/%3E%3Ccircle cx='40' cy='40' r='9'/%3E%3Cpath d='M0 40h12M68 40h12M40 0v4M40 68v12'/%3E%3C/g%3E%3C/svg%3E");background-size:80px}
a{color:inherit}
button{font-family:inherit;cursor:pointer}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}

/* ---------- top bar ---------- */
.top{position:sticky;top:0;z-index:50;backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);background:color-mix(in srgb,var(--bg) 82%,transparent);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:14px;height:66px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:800;font-size:1.15rem;color:var(--emerald)}
.brand .seal{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,var(--emerald),var(--emerald2));color:#f6e7c1;font-family:"Amiri",serif;font-size:1.25rem;box-shadow:var(--shadow-s)}
:root[data-theme="dark"] .brand .seal{background:linear-gradient(135deg,#145a45,#0c3a2d)}
.top nav{margin-inline-start:auto;display:flex;gap:6px;align-items:center}
.iconbtn{border:1px solid var(--line);background:var(--paper);color:var(--ink);height:40px;min-width:40px;padding:0 12px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;gap:6px;font-size:.95rem;text-decoration:none;transition:.2s}
.iconbtn:hover{border-color:var(--gold);color:var(--gold)}
.iconbtn svg{width:18px;height:18px}
@media (max-width:640px){.iconbtn .lbl{display:none}.brand .t{font-size:1rem}}

/* ---------- hero ---------- */
.hero{position:relative;padding:56px 0 36px;text-align:center}
.hero .bism{font-family:"Amiri",serif;font-size:clamp(1.4rem,3.5vw,2rem);color:var(--gold);margin:0 0 8px}
.hero h1{font-family:"Amiri",serif;font-size:clamp(2.4rem,7vw,4.6rem);line-height:1.25;margin:0;color:var(--emerald);font-weight:700}
.hero h1 span{background:linear-gradient(90deg,var(--gold),var(--gold2),var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p.sub{max-width:720px;margin:14px auto 0;color:var(--ink2);font-size:1.08rem}
.ornament{display:flex;align-items:center;justify-content:center;gap:12px;color:var(--gold);margin:18px 0}
.ornament i{height:1px;width:80px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.ornament b{font-size:1.1rem}

.progress-card{max-width:760px;margin:26px auto 0;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:18px 22px;box-shadow:var(--shadow-s);display:flex;align-items:center;gap:18px;text-align:start}
.ring{--p:0;width:74px;height:74px;flex:none;border-radius:50%;background:conic-gradient(var(--gold) calc(var(--p)*1%),var(--line) 0);display:grid;place-items:center}
.ring span{width:58px;height:58px;border-radius:50%;background:var(--paper);display:grid;place-items:center;font-weight:800;color:var(--emerald);font-size:1.05rem}
.progress-card h3{margin:0;font-size:1.05rem}
.progress-card p{margin:2px 0 0;color:var(--ink2);font-size:.92rem}
.badges{display:flex;gap:6px;margin-inline-start:auto;flex-wrap:wrap;justify-content:flex-end}
.badge{font-size:1.4rem;filter:grayscale(1) opacity(.35);transition:.3s}
.badge.on{filter:none;transform:scale(1.08)}
@media (max-width:640px){.progress-card{flex-wrap:wrap}.badges{margin:0;width:100%;justify-content:center}}

/* ---------- toolbar ---------- */
.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:28px 0 18px}
.search{flex:1 1 280px;position:relative}
.search input{width:100%;height:50px;border-radius:16px;border:1px solid var(--line);background:var(--paper);color:var(--ink);padding:0 48px 0 16px;font:inherit;font-size:1rem;outline:none;transition:.2s}
.search input:focus{border-color:var(--gold);box-shadow:0 0 0 4px color-mix(in srgb,var(--gold) 18%,transparent)}
.search svg{position:absolute;inset-inline-start:16px;top:50%;transform:translateY(-50%);width:20px;color:var(--muted)}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{border:1px solid var(--line);background:var(--paper);color:var(--ink2);border-radius:999px;padding:8px 16px;font-size:.92rem;transition:.2s}
.chip.on{background:var(--emerald);color:#fff;border-color:var(--emerald)}
:root[data-theme="dark"] .chip.on{color:#08140f}

/* ---------- grid ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px;padding-bottom:40px}
.card{position:relative;text-decoration:none;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:20px 20px 18px;box-shadow:var(--shadow-s);transition:transform .25s,box-shadow .25s,border-color .25s;overflow:hidden;display:flex;flex-direction:column;gap:10px;min-height:190px;animation:rise .5s both}
.card:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:var(--gold2)}
.card::after{content:"";position:absolute;inset-inline-end:-40px;top:-40px;width:130px;height:130px;border-radius:50%;background:radial-gradient(circle,hsl(var(--h) 60% 60% / .22),transparent 70%)}
.card .head{display:flex;align-items:center;gap:12px}
.num{width:48px;height:48px;flex:none;display:grid;place-items:center;font-weight:800;font-size:1.1rem;color:var(--emerald);background:var(--emerald-soft);border-radius:14px;position:relative}
.num::before{content:"";position:absolute;inset:-4px;border:1.5px dashed color-mix(in srgb,var(--gold) 60%,transparent);border-radius:17px}
.card .ic{font-size:1.9rem;margin-inline-start:auto;line-height:1}
.card h3{margin:0;font-size:1.12rem;line-height:1.5;color:var(--ink)}
.card p{margin:0;color:var(--ink2);font-family:"Amiri",serif;font-size:1.02rem;line-height:1.9;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card .foot{margin-top:auto;display:flex;align-items:center;gap:8px;font-size:.82rem;color:var(--muted)}
.done-tag{margin-inline-start:auto;background:var(--gold-soft);color:var(--gold);padding:2px 10px;border-radius:999px;font-weight:700}
.empty{text-align:center;padding:60px 0;color:var(--muted)}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ---------- reader ---------- */
.reader{max-width:880px;margin:0 auto;padding:30px 0 50px}
.crumbs{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:.92rem;margin-bottom:16px}
.crumbs a{text-decoration:none;color:var(--emerald)}
.hcard{background:var(--paper);border:1px solid var(--line);border-radius:28px;box-shadow:var(--shadow);overflow:hidden;position:relative}
.hcard .band{padding:28px 30px 22px;background:linear-gradient(135deg,var(--emerald),var(--emerald2));color:#fdf7e6;position:relative;overflow:hidden}
:root[data-theme="dark"] .hcard .band{background:linear-gradient(135deg,#124d3b,#0b3127)}
.hcard .band::after{content:"";position:absolute;inset:0;opacity:.12;background-image:inherit;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cpath d='M30 3l8 12 14 2-9 11 3 14-16-6-16 6 3-14-9-11 14-2z' fill='none' stroke='%23f6e7c1' stroke-width='1'/%3E%3C/svg%3E");background-size:60px}
.band .row{display:flex;align-items:center;gap:14px;position:relative;z-index:1}
.band .big{font-size:2.6rem;line-height:1}
.band small{display:block;color:var(--gold2);font-weight:700;letter-spacing:.5px}
.band h1,.band h2{margin:0;font-family:"Amiri",serif;font-size:clamp(1.6rem,4vw,2.2rem);line-height:1.4}
.tools{display:flex;gap:8px;flex-wrap:wrap;padding:14px 22px;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--paper) 92%,var(--gold-soft))}
.tbtn{border:1px solid var(--line);background:var(--paper);color:var(--ink2);border-radius:12px;height:38px;padding:0 12px;display:inline-flex;align-items:center;gap:6px;font-size:.88rem;transition:.2s}
.tbtn:hover{color:var(--emerald);border-color:var(--emerald)}
.tbtn.on{background:var(--emerald);color:#fff;border-color:var(--emerald)}
.tbtn svg{width:16px;height:16px}
.matn{padding:30px 34px 10px;font-family:"Amiri",serif;font-size:calc(1.55rem*var(--fs));line-height:2.25;color:var(--ink);text-align:justify}
.matn .w{transition:filter .25s,background .25s;border-radius:6px;cursor:default}
.memo .matn .w{filter:blur(6px);cursor:pointer;background:color-mix(in srgb,var(--gold) 12%,transparent)}
.memo .matn .w.show{filter:none;background:transparent}
.takhrij{margin:0 34px 26px;padding:12px 16px;border-radius:14px;background:var(--gold-soft);color:color-mix(in srgb,var(--gold) 70%,var(--ink));font-family:"Amiri",serif;font-size:calc(1.05rem*var(--fs));border-inline-start:4px solid var(--gold)}
.en{margin:0 34px 26px;direction:ltr;text-align:left;color:var(--ink2);font-size:.98rem;line-height:1.75;display:none;border-top:1px dashed var(--line);padding-top:14px}
.show-en .en{display:block}
@media (max-width:640px){.matn{padding:22px 18px 6px;font-size:calc(1.32rem*var(--fs))}.takhrij,.en{margin-inline:18px}.hcard .band{padding:22px 18px}}

.sharh{margin-top:26px;background:var(--paper);border:1px solid var(--line);border-radius:28px;box-shadow:var(--shadow-s);overflow:hidden}
.sharh header{display:flex;align-items:center;gap:12px;padding:20px 28px;border-bottom:1px solid var(--line)}
.sharh header .bk{width:44px;height:44px;border-radius:12px;background:var(--gold-soft);display:grid;place-items:center;font-size:1.4rem}
.sharh header h3{margin:0;font-size:1.15rem}
.sharh header p{margin:0;color:var(--muted);font-size:.86rem;line-height:1.5}
.sharh .body{padding:10px 30px 26px;font-family:"Amiri",serif;font-size:calc(1.22rem*var(--fs));line-height:2.1;text-align:justify}
.sharh .body p{margin:14px 0}
.sharh .q{color:var(--emerald);font-weight:700}
.sharh .ay{color:var(--gold);font-weight:700}
.sharh sup{font-family:"Tajawal",sans-serif;font-size:.62em}
.sharh sup a{color:var(--gold);text-decoration:none;padding:0 2px}
.notes{margin:0 30px 26px;padding:16px 20px;background:var(--bg2);border-radius:16px;font-size:calc(.95rem*var(--fs));color:var(--ink2);line-height:1.9}
.notes h4{margin:0 0 6px;font-size:.95rem;color:var(--ink)}
.notes ol{margin:0;padding-inline-start:22px}
.notes li:target{background:var(--gold-soft);border-radius:8px}
.src{display:inline-flex;gap:6px;align-items:center;font-size:.85rem;color:var(--emerald);text-decoration:none;margin:0 30px 22px}
.sharh.collapsed .body{max-height:420px;overflow:hidden;-webkit-mask-image:linear-gradient(#000 70%,transparent)}
.sharh.collapsed .notes,.sharh.collapsed .src{display:none}
.more{display:block;margin:0 auto 22px;border:none;background:var(--emerald);color:#fff;border-radius:999px;padding:10px 26px;font-size:.98rem;font-weight:700;box-shadow:var(--shadow-s)}
:root[data-theme="dark"] .more{color:#08140f}
.sharh:not(.collapsed) .more{display:none}
@media (max-width:640px){.sharh .body{padding:6px 18px 20px}.notes{margin-inline:14px}.sharh header{padding:16px 18px}}

.finish{margin:26px 0;text-align:center}
.finish button{border:none;background:linear-gradient(135deg,var(--gold),var(--gold2));color:#3a2a06;font-weight:800;font-size:1.05rem;padding:14px 30px;border-radius:999px;box-shadow:var(--shadow);transition:.2s}
.finish button:hover{transform:translateY(-2px)}
.finish button.got{background:var(--emerald-soft);color:var(--emerald)}
.pager{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:10px}
.pager a{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:14px 18px;text-decoration:none;display:flex;flex-direction:column;transition:.2s}
.pager a:hover{border-color:var(--gold)}
.pager small{color:var(--muted)}
.pager b{font-size:1rem}
.pager .nx{text-align:left}
.pager .ghost{visibility:hidden}

.readbar{position:fixed;top:66px;inset-inline:0;height:3px;z-index:49;background:transparent}
.readbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold),var(--emerald));transition:width .1s}

/* ---------- confetti / toast ---------- */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(120px);background:var(--emerald);color:#fff;padding:12px 22px;border-radius:999px;box-shadow:var(--shadow);transition:.35s;z-index:99;font-weight:700}
.toast.on{transform:translateX(-50%) translateY(0)}
.conf{position:fixed;top:-20px;z-index:98;font-size:22px;pointer-events:none;animation:fall 2.4s ease-in forwards}
@keyframes fall{to{transform:translateY(105vh) rotate(540deg);opacity:.7}}

/* ---------- footer ---------- */
footer{margin-top:40px;border-top:1px solid var(--line);background:var(--paper)}
footer .wrap{padding:34px 20px;display:grid;grid-template-columns:1.4fr 1fr;gap:26px;align-items:center}
footer h4{margin:0 0 6px;font-family:"Amiri",serif;font-size:1.4rem;color:var(--emerald)}
footer p{margin:0;color:var(--ink2);font-size:.92rem}
.dev{justify-self:end;text-align:center;background:linear-gradient(135deg,var(--emerald),var(--emerald2));color:#fdf7e6;border-radius:22px;padding:18px 24px;box-shadow:var(--shadow)}
:root[data-theme="dark"] .dev{background:linear-gradient(135deg,#124d3b,#0b3127)}
.dev small{color:var(--gold2);display:block;font-size:.8rem}
.dev b{display:block;font-size:1.15rem;margin:2px 0 10px}
.wa{display:inline-flex;align-items:center;gap:8px;background:#25d366;color:#05351a;text-decoration:none;font-weight:800;padding:9px 18px;border-radius:999px;direction:ltr}
.wa svg{width:20px;height:20px}
.copy{text-align:center;color:var(--muted);font-size:.82rem;padding:0 0 22px}
@media (max-width:760px){footer .wrap{grid-template-columns:1fr;text-align:center}.dev{justify-self:center}}

/* ---------- stats ---------- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px;margin:24px 0}
.kpi{background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:18px 20px;box-shadow:var(--shadow-s);position:relative;overflow:hidden}
.kpi small{color:var(--muted);font-size:.86rem;display:flex;align-items:center;gap:6px}
.kpi b{display:block;font-size:2rem;font-weight:800;color:var(--emerald);line-height:1.3;margin-top:4px;font-variant-numeric:tabular-nums}
.kpi em{font-style:normal;font-size:.8rem;color:var(--ink2)}
.kpi .live{width:9px;height:9px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 0 #22c55e88;animation:pulse 1.6s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 9px transparent}}
.panel{background:var(--paper);border:1px solid var(--line);border-radius:22px;padding:20px 22px;box-shadow:var(--shadow-s);margin-bottom:18px}
.panel h3{margin:0 0 14px;font-size:1.08rem;display:flex;align-items:center;gap:8px}
.panel h3 .hint{margin-inline-start:auto;font-size:.8rem;color:var(--muted);font-weight:400}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:860px){.cols{grid-template-columns:1fr}}
.chart{width:100%;height:240px;display:block}
.chart text{fill:var(--muted);font-family:"Tajawal",sans-serif;font-size:11px}
.bars{display:flex;flex-direction:column;gap:9px}
.bar{display:grid;grid-template-columns:minmax(110px,190px) 1fr auto;gap:10px;align-items:center;font-size:.9rem}
.bar .lab{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink)}
.bar .tr{height:12px;background:var(--bg2);border-radius:999px;overflow:hidden}
.bar .tr i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--emerald),color-mix(in srgb,var(--emerald) 60%,var(--gold)))}
.bar .v{color:var(--ink2);font-variant-numeric:tabular-nums;font-size:.85rem;min-width:70px;text-align:end}
table.tb{width:100%;border-collapse:collapse;font-size:.92rem}
.tb th,.tb td{padding:9px 8px;border-bottom:1px solid var(--line);text-align:start}
.tb th{color:var(--muted);font-weight:600;font-size:.82rem}
.tb td.n{font-variant-numeric:tabular-nums}
.tbl-wrap{overflow-x:auto}
.seg{display:inline-flex;background:var(--bg2);border-radius:12px;padding:3px}
.seg button{border:none;background:transparent;color:var(--ink2);padding:6px 14px;border-radius:9px;font-size:.88rem}
.seg button.on{background:var(--paper);color:var(--emerald);box-shadow:var(--shadow-s);font-weight:700}
.legend{display:flex;gap:16px;font-size:.82rem;color:var(--ink2);margin-top:6px}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-inline-end:5px;vertical-align:middle}
.tip{position:fixed;pointer-events:none;background:var(--ink);color:var(--bg);padding:6px 10px;border-radius:8px;font-size:.8rem;opacity:0;transition:opacity .15s;z-index:99;white-space:nowrap}
.loading{padding:60px;text-align:center;color:var(--muted)}
.matn .nb{color:var(--emerald)}
:root[data-theme="dark"] .matn .nb{color:#8fdcbc}
@media (max-width:640px){
  .hero{padding:34px 0 20px}
  .kpis{grid-template-columns:1fr 1fr;gap:10px}
  .kpi{padding:14px}
  .kpi b{font-size:1.5rem!important}
  .bar{grid-template-columns:minmax(90px,130px) 1fr auto}
  .pager{grid-template-columns:1fr}
}
.lockbox{max-width:380px;margin:20px auto 40px;text-align:center;padding:30px 26px}
.lockbox .lk{font-size:2.6rem}
.lockbox h3{justify-content:center;margin:6px 0 2px}
.lockbox p{color:var(--ink2);margin:0 0 16px}
.lockbox input{width:100%;height:50px;border-radius:14px;border:1px solid var(--line);background:var(--bg);color:var(--ink);padding:0 16px;font:inherit;font-size:1rem;text-align:center;outline:none;margin-bottom:14px}
.lockbox input:focus{border-color:var(--gold)}
.lockbox .err{color:#c0392b;font-weight:700}
.lockbox .more{margin:0 auto}
.seg[hidden]{display:none}