:root{--tl:#1f9c8d;--bar:#e9e9ee;--mk:#1b7f3b;--hh:50px}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:#fff}
body{font-family:"Amiri","Noto Naskh Arabic",serif;color:#111}
header{position:sticky;top:0;z-index:5;height:var(--hh);background:var(--bar);border-bottom:1px solid #d4d4da;padding:0 16px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;font-size:1.15rem;color:#222;cursor:pointer}
#hj{justify-self:end;white-space:nowrap}
#hr{justify-self:start;display:flex;align-items:center;gap:10px;white-space:nowrap}
#mn{font-style:normal;font-size:1.5rem;line-height:1}
#ctl{display:flex;align-items:center;gap:10px;cursor:default}
button,select,input{font:inherit;font-size:1rem;border-radius:8px;border:1px solid #c9c9d0;background:#fff;color:#222;padding:6px 12px;cursor:pointer}
input{cursor:text}
input[type=number]{width:90px;text-align:center}
#hd button{width:36px;height:36px;padding:0;border-radius:50%;display:grid;place-items:center;font-size:1rem;line-height:1}
#hd #pp{width:42px;height:42px;font-size:1.15rem;border:0;background:var(--tl);color:#fff}
#now{display:none}
#mush{height:calc(100dvh - var(--hh));max-width:640px;margin:0 auto;padding:6px 10px 0;display:flex;flex-direction:column;font-family:"Amiri Quran","Amiri",serif;color:#000;border-inline:1px solid #e3e3e8}
#mush .ln,#mush .sh,#mush .bs{flex:1;display:flex;align-items:center;white-space:nowrap;min-height:0}
#mush .ln{justify-content:space-between}
#mush .ln.ce,#mush .sh,#mush .bs{justify-content:center}
#mush .sh{background:#eef6f4;color:#14665c;border:1px solid var(--tl);border-radius:6px;margin:2px 0}
#mush .pf{flex:none;text-align:center;color:#555;font-size:16px;line-height:26px}
.g{display:flex;justify-content:space-between;padding-inline:.12em;cursor:pointer}
.g.on{color:var(--hc,#c62828)}
.g.on .m{color:inherit}
.m{color:var(--mk);font-size:.85em}
.hint,.err{text-align:center;color:#777;margin-top:10px;font-size:1rem}
#ov{display:none;position:fixed;inset:0;z-index:20;background:rgba(0,0,0,.4)}
#ov.open{display:block}
#dr{position:fixed;z-index:21;top:0;bottom:0;right:0;width:min(320px,86vw);background:#fff;padding:18px;display:flex;flex-direction:column;gap:14px;transform:translateX(100%);transition:transform .25s;box-shadow:-4px 0 16px rgba(0,0,0,.25);overflow-y:auto}
#dr.open{transform:none}
#dr h3{color:#14665c;font-weight:700}
#dr label,#dr .lb{display:flex;flex-direction:column;gap:6px;color:#333}
#dr .row{display:flex;gap:8px}
#dr .row button{flex:1;border-color:var(--tl);color:var(--tl)}
#cl{display:flex;gap:10px;flex-wrap:wrap}
#cl button{width:34px;height:34px;border-radius:50%;padding:0;border:3px solid #fff;box-shadow:0 0 0 1px #bbb}
#cl button.on{box-shadow:0 0 0 3px #222}