/* Issalam — keeps the original look (white, green serif logo, centered nav)
   and adds the tools: prayer bar, Quran reader, duas, names, mosques, charity */
:root{
  --green:#2E7D32;
  --green-deep:#1F5C23;
  --green-soft:#EAF4EB;
  --ink:#1a1a1a;
  --gray:#6f6f6f;
  --line:#e8e8e8;
  --paper:#fafaf8;
  --maxw:1180px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Inter',Arial,sans-serif;
  background:#fff;
  color:var(--gray);
  line-height:1.6;
  font-size:1.05rem;
}
h1,h2,h3{color:var(--ink);font-weight:700;line-height:1.25}
h1{font-size:clamp(2rem,4.5vw,3rem)}
h2{font-size:clamp(1.5rem,3vw,2rem)}
h3{font-size:1.2rem}
p{max-width:66ch}
a{color:var(--green)}
img{max-width:100%}
button{font:inherit}
.arabic{font-family:'Amiri','Scheherazade New',serif;direction:rtl;font-size:1.75rem;line-height:2;color:var(--ink)}

/* ---------- header ---------- */
.top{background:#fff;padding:22px 16px 0;text-align:center;position:relative}
.brand{
  font-family:'Cinzel',Georgia,serif;
  font-size:clamp(1.9rem,5vw,3.2rem);
  letter-spacing:.12em;
  color:var(--green);
  text-decoration:none;
  text-transform:uppercase;
  font-weight:700;
  display:inline-block;
}
.menu-btn{
  display:none;position:absolute;right:12px;top:22px;width:44px;height:44px;border:1px solid var(--line);
  border-radius:8px;background:#fff;cursor:pointer;color:var(--ink);font-size:1.4rem;line-height:1;
}
nav.main{
  display:flex;justify-content:center;gap:2px;flex-wrap:wrap;
  max-width:var(--maxw);margin:16px auto 0;
  border-top:1px solid var(--line);
  padding:10px 6px 4px;
}
nav.main a{color:#3d3d3d;text-decoration:none;padding:6px 12px;font-size:1rem;border-radius:6px}
nav.main a:hover{color:var(--green);background:var(--green-soft)}
nav.main a.here{text-decoration:underline;text-underline-offset:6px;color:var(--ink)}
nav.tools{
  display:flex;justify-content:center;gap:2px;flex-wrap:wrap;max-width:var(--maxw);margin:0 auto;padding:2px 6px 10px;
}
nav.tools a{color:#5a5a5a;text-decoration:none;padding:5px 11px;font-size:.9rem;border-radius:6px}
nav.tools a:hover{color:var(--green);background:var(--green-soft)}
nav.tools a.here{color:var(--green);font-weight:600}
.menu-group{display:none}
@media (max-width:820px){
  .top{text-align:left;padding:18px 16px 12px}
  .menu-btn{display:block}
  nav.main,nav.tools{display:none}
  body.menu-open nav.main,body.menu-open nav.tools{display:block;border:0;padding:0;margin:0}
  body.menu-open .top{padding-bottom:6px}
  body.menu-open .menu-group{display:block;color:#9a9a9a;font-size:.8rem;margin:14px 0 4px;text-transform:none}
  body.menu-open nav a{display:block;padding:12px 8px;font-size:1.05rem;border-bottom:1px solid var(--line);border-radius:0}
  body.menu-open nav.tools a{font-size:1.05rem;color:#3d3d3d}
}
a:focus-visible,button:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid var(--green);outline-offset:2px}

/* ---------- prayer bar (the one dark strip on the site) ---------- */
.pbar{background:var(--green-deep);color:#fff}
.pbar-inner{
  max-width:var(--maxw);margin:0 auto;padding:10px 16px;
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  font-size:.92rem;
}
.pbar-loc{display:flex;align-items:center;gap:8px;white-space:nowrap}
.pbar-loc button{
  background:transparent;border:1px solid rgba(255,255,255,.45);color:#fff;
  border-radius:20px;padding:3px 11px;font-size:.82rem;cursor:pointer;
}
.pbar-loc button:hover{background:rgba(255,255,255,.12)}
.pbar-times{display:flex;gap:4px;flex-wrap:wrap;justify-content:center}
.pbar-times span{padding:5px 11px;border-radius:20px;white-space:nowrap}
.pbar-times span b{font-weight:600;margin-right:6px;opacity:.85}
.pbar-times span.next{background:#fff;color:var(--green-deep)}
.pbar-times span.next b{opacity:1}
.pbar-hijri{white-space:nowrap;opacity:.9}
@media (max-width:700px){
  .pbar-inner{padding:8px 12px;gap:8px;justify-content:space-between}
  .pbar-times{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;width:100%;scrollbar-width:none;padding-bottom:2px;-webkit-overflow-scrolling:touch}
  .pbar-times::-webkit-scrollbar{display:none}
  .pbar-times span{background:rgba(255,255,255,.08);font-size:.85rem;padding:6px 10px}
  .pbar-hijri{font-size:.82rem;width:auto}
}

/* ---------- shared layout ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}
.pagehead{padding:52px 0 10px;text-align:center}
@media (max-width:640px){
  body{font-size:1rem}
  .wrap{padding:0 16px}
  .pagehead{padding:30px 0 6px}
  .pagehead p{font-size:1rem}
  h1{font-size:1.7rem}
  h2{font-size:1.35rem}
  .section{padding:32px 0}
  .duo{gap:22px}
  .tools{gap:10px;padding:22px 0 0}
  .tool{padding:16px}
  .tool .ar{font-size:1.3rem;margin-bottom:8px}
  .cards{gap:30px;padding:24px 0 40px}
  .more{padding:12px 20px;width:100%;text-align:center}
}
.pagehead p{margin:14px auto 0;font-size:1.1rem}
.section{padding:52px 0}
.center{text-align:center}
.muted{color:#9a9a9a;font-size:.92rem}

.more{
  display:inline-block;margin-top:18px;background:var(--ink);color:#fff;text-decoration:none;
  padding:11px 24px;border-radius:8px;font-size:1rem;border:0;cursor:pointer;
}
.more:hover{background:#000}
.more.quiet{background:#fff;color:var(--ink);border:1.5px solid #cfcfcf}
.more.quiet:hover{border-color:var(--ink)}
.more.green{background:var(--green)}
.more.green:hover{background:var(--green-deep)}

/* home: tools grid */
.tools{
  display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding:36px 0 10px;
}
@media (max-width:980px){.tools{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.tools{grid-template-columns:1fr}}
.tool{
  display:block;text-decoration:none;color:var(--gray);
  border:1px solid var(--line);border-radius:10px;padding:22px 20px;
  background:#fff;
}
.tool:hover{border-color:var(--green);background:var(--green-soft)}
.tool h3{color:var(--ink);margin-bottom:6px}
.tool .ar{font-family:'Amiri',serif;font-size:1.6rem;color:var(--green);line-height:1;margin-bottom:14px;display:block}
.tool p{font-size:.95rem;line-height:1.5}

/* home: video + text side by side */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.duo.flip .text{order:2}
.duo.flip .media{order:1}
@media (max-width:820px){
  .duo{grid-template-columns:1fr}
  .duo.flip .text{order:1}
  .duo.flip .media{order:2}
}
.duo h2{margin-bottom:12px}
.video{position:relative;width:100%;aspect-ratio:16/9;background:#000;overflow:hidden;border-radius:6px}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* prophets / books cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:44px 34px;padding:44px 0 72px}
@media (max-width:980px){.cards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.cards{grid-template-columns:1fr}}
.card{display:flex;flex-direction:column}
.card .media{order:1}
.card .text{order:2;margin-top:18px}
.card h2{font-size:1.45rem;margin-bottom:10px}

/* prose pages */
.prose{padding:48px 0 72px;max-width:760px;margin:0 auto}
.prose h1{text-align:center}
.prose h2{margin:30px 0 10px}
.prose p{margin:12px 0}
.prose ul{margin:12px 0 12px 22px}
.note{background:#f6f6f6;border-left:4px solid var(--green);padding:14px 18px;margin:20px 0;color:#555}

/* ---------- Quran reader ---------- */
.reader{padding:30px 0 70px}
.reader-controls{
  display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:center;
  padding:14px;border:1px solid var(--line);border-radius:10px;background:var(--paper);
}
.reader-controls select,.reader-controls input{
  font-size:1rem;padding:9px 12px;border:1px solid #cfcfcf;border-radius:8px;background:#fff;color:var(--ink);
}
.reader-controls select{min-width:240px;flex:1}
@media (max-width:640px){
  .reader-controls{padding:10px}
  .reader-controls select{min-width:0;width:100%;order:-1}
  .ayah .arabic{font-size:calc(var(--arsize,1.9rem) * .85)}
  .resume{padding:12px}
}
.btn{
  background:#fff;border:1.5px solid #cfcfcf;color:var(--ink);padding:9px 14px;border-radius:8px;cursor:pointer;font-size:.95rem;
}
.btn:hover{border-color:var(--ink)}
.btn.on{background:var(--green);border-color:var(--green);color:#fff}
.surah-head{text-align:center;margin:36px 0 10px}
.surah-head .ar{font-family:'Amiri',serif;font-size:2.6rem;color:var(--green);line-height:1.3}
.surah-head p{margin:6px auto 0}
.bismillah{font-family:'Amiri',serif;font-size:2rem;text-align:center;color:var(--ink);margin:18px 0 26px}
audio{width:100%;max-width:640px;display:block;margin:16px auto 0}
.ayah{
  border-bottom:1px solid var(--line);padding:22px 0;max-width:820px;margin:0 auto;
}
.ayah .arabic{margin-bottom:10px;font-size:var(--arsize,1.9rem)}
.ayah .arabic .num{
  font-family:'Inter',sans-serif;font-size:.8rem;color:var(--green);border:1px solid var(--green);border-radius:50%;
  display:inline-block;width:1.9em;height:1.9em;line-height:1.75em;text-align:center;margin-right:10px;vertical-align:middle;
}
.ayah .en{color:#444;font-size:1.02rem;max-width:none}
.ayah.mark{background:var(--green-soft);padding-left:12px;padding-right:12px;border-radius:8px}
.ayah-tools{margin-top:8px;font-size:.85rem}
.ayah-tools button{background:none;border:0;color:var(--green);cursor:pointer;padding:2px 6px;font-size:.85rem}
.ayah-tools button:hover{text-decoration:underline}
/* verse-by-verse playback (2026-09-14): the verse being read, and the play row */
.vv{display:flex;flex-direction:column;gap:10px;align-items:center;justify-content:center;margin:18px 0 0;text-align:center}
.vv .btn{font-size:1rem;padding:10px 18px}
/* (2026-09-15 UX) play row + "Arabic + English" / "Arabic only" pill toggle + one-sentence credit */
.vv-row{display:flex;gap:12px;align-items:center;justify-content:center;flex-wrap:wrap}
.vv-mode{display:inline-flex;border:1.5px solid #cfcfcf;border-radius:30px;padding:3px;background:#fff}
.vv-mode button{background:transparent;border:0;color:var(--ink);padding:7px 14px;border-radius:24px;cursor:pointer;font:inherit;font-size:.9rem;line-height:1.2}
.vv-mode button.on{background:var(--green);color:#fff}
.vv-mode button:not(.on):hover{background:var(--green-soft)}
.vv-credit{color:#9a9a9a;font-size:.92rem;max-width:720px;margin:0 auto;line-height:1.5}
#vv-status:empty{display:none}
/* (2026-09-15) Arabic script toggle. While IndoPak text is on screen the Arabic (and the bismillah line)
   use "IndoPak Nastaleeq" - the purpose-built font Quran Foundation documents for its text_indopak,
   loaded live from their CDN (terms: credit line below, no copy of the file on this server). The
   browser fetches it only when this rule applies, i.e. only in IndoPak mode. Noto Nastaliq Urdu
   (Google Fonts) stays in the stack as the fallback if the CDN font does not load; Uthmani keeps Amiri
   exactly as before. Sizing tuned by eye against a printed IndoPak page: denser lines than Nastaliq Urdu. */
@font-face{
  font-family:'IndoPak Nastaleeq';
  src:url(https://verses.quran.foundation/fonts/quran/hafs/nastaleeq/indopak/indopak-nastaleeq-waqf-lazim-v4.2.1.woff2) format('woff2'),
      url(https://verses.quran.foundation/fonts/quran/hafs/nastaleeq/indopak/indopak-nastaleeq-waqf-lazim-v4.2.1.woff) format('woff'),
      url(https://verses.quran.foundation/fonts/quran/hafs/nastaleeq/indopak/indopak-nastaleeq-waqf-lazim-v4.2.1.ttf) format('truetype');
  font-display:swap;
}
html.indopak .ayah .arabic,html.indopak .bismillah{font-family:'IndoPak Nastaleeq','Noto Nastaliq Urdu','Amiri',serif}
html.indopak .ayah .arabic{line-height:1.8;font-size:calc(var(--arsize,1.9rem) * 1.15)}
@media (max-width:640px){ html.indopak .ayah .arabic{font-size:var(--arsize,1.9rem)} }
/* the Quran Foundation font credit is part of the credit sentence only while their font is in use */
#vv-credit-qf{display:none}
html.indopak #vv-credit-qf{display:inline}
#ar-notice:empty{display:none}
.ayah.playing{background:var(--green-soft);border-radius:14px;padding-left:12px;padding-right:12px;box-shadow:inset 4px 0 0 var(--green)}
.ayah.playing .en{color:var(--ink)}
.ayah.playing.en-part .arabic{opacity:.75}
.resume{
  background:var(--green-soft);border:1px solid #cfe3d1;border-radius:10px;padding:14px 18px;margin:22px auto 0;max-width:820px;
  display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;color:#2c4a2f;
}
.loading{text-align:center;padding:40px;color:#9a9a9a}

/* ---------- prayer times page ---------- */
.ptable{max-width:620px;margin:30px auto 0;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.prow{display:flex;justify-content:space-between;padding:16px 22px;border-bottom:1px solid var(--line);color:var(--ink)}
.prow:last-child{border-bottom:0}
.prow.next{background:var(--green-soft);font-weight:600}
.prow small{color:#8a8a8a;font-weight:400;margin-left:10px}
.countdown{text-align:center;margin:24px 0 0;font-size:1.15rem;color:var(--ink)}
.countdown b{color:var(--green)}
.cityform{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:26px}
.cityform input{font-size:1rem;padding:10px 14px;border:1px solid #cfcfcf;border-radius:8px;min-width:260px}
/* (2026-09-15 UX) city autocomplete: same input box, suggestions drop down below it */
.citybox{position:relative;flex:0 1 340px;min-width:260px}
.citybox input{width:100%;min-width:0;font-family:inherit}
.citylist{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:20;list-style:none;margin:0;padding:6px;background:#fff;border:1px solid #cfcfcf;border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.12);text-align:left}
.citylist li{padding:9px 12px;border-radius:8px;cursor:pointer;color:var(--ink);display:flex;flex-direction:column;gap:2px;line-height:1.3}
.citylist li small{color:#8a8a8a;font-size:.82rem}
.citylist li:hover,.citylist li.hi{background:var(--green-soft)}

/* ---------- duas & names ---------- */
.searchbox{display:flex;justify-content:center;margin:26px 0 8px}
.searchbox input{font-size:1rem;padding:11px 16px;border:1px solid #cfcfcf;border-radius:30px;width:min(520px,100%)}
.dua{border:1px solid var(--line);border-radius:10px;padding:22px 24px;margin:16px auto;max-width:820px}
.dua h3{margin-bottom:12px}
.dua .arabic{font-size:1.65rem;margin-bottom:8px}
.dua .tr{font-style:italic;color:#555;margin-bottom:6px}
.dua .en{color:#444}
.dua .src{font-size:.82rem;color:#9a9a9a;margin-top:10px}
.dua .tag{display:inline-block;font-size:.78rem;color:var(--green);background:var(--green-soft);padding:2px 10px;border-radius:20px;margin-bottom:10px}
.names{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:26px 0 70px}
@media (max-width:900px){.names{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.names{grid-template-columns:1fr}}
.name{border:1px solid var(--line);border-radius:10px;padding:18px 18px 16px;display:flex;gap:14px;align-items:center}
.name .n{color:#b5b5b5;font-size:.85rem;min-width:24px}
.name .ar{font-family:'Amiri',serif;font-size:1.8rem;color:var(--green);line-height:1.2}
.name b{color:var(--ink);display:block}
.name small{color:#777}
.name-audio{margin-top:auto}

/* ---------- mosques / charity ---------- */
.list{max-width:820px;margin:26px auto 60px}
.place{border:1px solid var(--line);border-radius:10px;padding:20px 22px;margin-bottom:14px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;align-items:center}
.place b{color:var(--ink);display:block;font-size:1.1rem}
.place small{color:#777}
.place .more{margin-top:0;padding:9px 18px;font-size:.95rem}
.calendar{max-width:620px;margin:26px auto 0}
.calendar .prow{padding:13px 22px}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);margin-top:30px}
.foot-inner{
  max-width:var(--maxw);margin:0 auto;padding:28px 20px;
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;align-items:center;
  color:#8a8a8a;font-size:.95rem;
}
.foot-nav{display:flex;gap:16px;flex-wrap:wrap}
.foot-nav a{color:#3d3d3d;text-decoration:none}
.foot-nav a:hover{color:var(--green)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ---------- qibla compass ---------- */
.compass{width:min(320px,80vw);aspect-ratio:1;margin:26px auto 0;position:relative}
.compass .dial{position:absolute;inset:0;border-radius:50%;border:2px solid var(--line);background:#fff;transition:transform .2s ease-out}
.compass .dial span{position:absolute;left:50%;top:14px;transform:translateX(-50%);font-weight:600;color:var(--ink);font-size:.95rem}
.compass .dial span.e{left:auto;right:12px;top:50%;transform:translateY(-50%)}
.compass .dial span.s{top:auto;bottom:12px}
.compass .dial span.w{left:12px;top:50%;transform:translateY(-50%)}
.compass .dial i{position:absolute;left:50%;top:0;width:2px;height:100%;background:linear-gradient(var(--line) 0 4%,transparent 4% 96%,var(--line) 96%);transform-origin:center}
.compass .needle{
  position:absolute;left:50%;top:50%;width:14px;height:46%;margin-left:-7px;transform-origin:50% 100%;
  transform:translateY(-100%) rotate(0deg);transition:transform .2s ease-out;
}
.compass .needle::before{content:"";position:absolute;inset:0;background:var(--green);clip-path:polygon(50% 0,100% 100%,50% 88%,0 100%)}
.compass .kaaba{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:26px;height:26px;background:var(--ink);border-radius:4px;border:3px solid #c9a227}
.compass-info{text-align:center;margin-top:20px;color:var(--ink);font-size:1.1rem}
.compass-info small{display:block;color:#8a8a8a;font-size:.9rem;margin-top:4px}
.compass-help{max-width:520px;margin:20px auto 60px;text-align:center}

/* ---------- baby names ---------- */
.seg{display:flex;justify-content:center;gap:0;margin:22px auto 0;border:1.5px solid var(--green);border-radius:30px;overflow:hidden;width:max-content;max-width:100%}
.seg button{background:#fff;color:var(--green);border:0;padding:10px 26px;cursor:pointer;font-size:1rem}
.seg button.on{background:var(--green);color:#fff}
.bnames{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;padding:20px 0 60px}
@media (max-width:640px){.bnames{grid-template-columns:1fr}}
.bname{border:1px solid var(--line);border-radius:10px;padding:16px 18px;display:grid;grid-template-columns:1fr auto;gap:6px 14px;align-items:center}
.bname b{color:var(--ink);font-size:1.1rem}
.bname .ar{font-family:'Amiri',serif;font-size:1.6rem;color:var(--green);grid-row:span 2;line-height:1.2}
.bname .o{font-size:.8rem;color:var(--green);background:var(--green-soft);padding:2px 9px;border-radius:20px;display:inline-block;margin-left:8px;vertical-align:middle}
.bname small{color:#666;font-size:.95rem;grid-column:1}

/* ---------- dreams ---------- */
.chips{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:16px 0 6px}
.chips button{border:1px solid #cfcfcf;background:#fff;border-radius:20px;padding:7px 14px;cursor:pointer;font-size:.9rem;color:#3d3d3d}
.chips button.on{background:var(--green);border-color:var(--green);color:#fff}
.dream{border:1px solid var(--line);border-radius:10px;padding:18px 20px;margin:12px auto;max-width:820px}
.dream b{color:var(--ink);font-size:1.08rem;display:block;margin-bottom:4px}
.dream small{color:var(--green);font-size:.8rem}
.dream p{margin-top:8px;color:#444;max-width:none}

/* ---------- islamic calendar ---------- */
.calnav{display:flex;justify-content:center;align-items:center;gap:10px;margin:22px 0 10px;flex-wrap:wrap}
.calnav h2{min-width:200px;text-align:center;font-size:1.4rem}
.calgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;max-width:760px;margin:16px auto 0}
.calgrid .dow{text-align:center;font-size:.8rem;color:#9a9a9a;padding:4px 0}
.calgrid .day{border:1px solid var(--line);border-radius:8px;padding:8px 6px;min-height:64px;font-size:.9rem;color:var(--ink);text-align:center}
.calgrid .day small{display:block;color:#9a9a9a;font-size:.72rem}
.calgrid .day.today{background:var(--green);color:#fff;border-color:var(--green)}
.calgrid .day.today small{color:#dff0e0}
.calgrid .day.hol{border-color:#c9a227;background:#fdf8e6}
.calgrid .day.empty{border:0}
@media (max-width:520px){.calgrid{gap:4px}.calgrid .day{min-height:54px;padding:6px 2px;font-size:.85rem}}
.hols{max-width:760px;margin:20px auto 0}
.hols .prow{padding:12px 18px}
.ram{max-width:760px;margin:20px auto 60px;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.ram .prow{padding:11px 16px;font-size:.95rem}
.ram .prow small{margin-left:8px}

/* ---------- recipes ---------- */
.regions{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:18px 0 6px}
.regions button{border:1px solid #cfcfcf;background:#fff;border-radius:20px;padding:8px 14px;cursor:pointer;font-size:.92rem;color:#3d3d3d}
.regions button.on{background:var(--green);border-color:var(--green);color:#fff}
.rgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:20px 0 60px}
@media (max-width:980px){.rgrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.rgrid{grid-template-columns:1fr}}
.rcard{border:1px solid var(--line);border-radius:10px;padding:18px 20px;background:#fff;cursor:pointer}
.rcard:hover{border-color:var(--green)}
.rcard .rg{font-size:.78rem;color:var(--green);background:var(--green-soft);padding:2px 9px;border-radius:20px;display:inline-block;margin-bottom:8px}
.rcard h3{margin-bottom:6px}
.rcard p{font-size:.95rem;max-width:none}
.rcard .meta{color:#9a9a9a;font-size:.85rem;margin-top:8px}
.rcard.open{grid-column:1 / -1;cursor:default}
.rbody{display:none;margin-top:16px;border-top:1px solid var(--line);padding-top:16px}
.rcard.open .rbody{display:grid;grid-template-columns:1fr 1.4fr;gap:26px}
@media (max-width:760px){.rcard.open .rbody{grid-template-columns:1fr}}
.rbody h4{color:var(--ink);margin-bottom:8px}
.rbody ul,.rbody ol{margin-left:20px;color:#444;font-size:.97rem}
.rbody li{margin-bottom:6px}
.rbody .close{margin-top:14px;font-size:.9rem}

/* =====================================================================
   POLISH — iOS-style feel: system fonts, soft motion, press feedback,
   frosted sticky bar, scroll reveal, and a slow living background.
   Everything here respects "Reduce Motion".
   ===================================================================== */
:root{
  --ease:cubic-bezier(.22,1,.36,1);        /* iOS-like spring-ish ease-out */
  --gold:#C9A227;
  --shadow-sm:0 1px 2px rgba(0,0,0,.04),0 2px 8px rgba(0,0,0,.04);
  --shadow-md:0 2px 6px rgba(0,0,0,.05),0 12px 30px rgba(20,60,25,.10);
}
html{-webkit-text-size-adjust:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display",'Inter',"Segoe UI",Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  -webkit-tap-highlight-color:transparent;
  animation:pagein .45s var(--ease) both;
}
body.leaving{opacity:0;transition:opacity .18s ease}
@keyframes pagein{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
h1,h2,h3{letter-spacing:-.02em}
h1{letter-spacing:-.03em}
.pbar,.ptable,.calgrid,.countdown,.compass-info{font-variant-numeric:tabular-nums}

/* ---- living background: three soft colour clouds drifting + faint star lattice ---- */
.bg{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:#fff}
.bg i{
  position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;will-change:transform;
  animation:drift 38s ease-in-out infinite alternate;
}
.bg i:nth-child(1){width:60vmax;height:60vmax;left:-20vmax;top:-25vmax;background:radial-gradient(circle,#dff0e0 0%,rgba(223,240,224,0) 70%)}
.bg i:nth-child(2){width:55vmax;height:55vmax;right:-20vmax;top:20vh;background:radial-gradient(circle,#f6efd6 0%,rgba(246,239,214,0) 70%);animation-duration:46s;animation-delay:-12s}
.bg i:nth-child(3){width:50vmax;height:50vmax;left:15vw;bottom:-30vmax;background:radial-gradient(circle,#e3f1e8 0%,rgba(227,241,232,0) 70%);animation-duration:52s;animation-delay:-25s}
.bg svg{position:absolute;inset:-10%;width:120%;height:120%;opacity:.12;animation:pan 90s linear infinite;will-change:transform}
@keyframes drift{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(6vw,-4vh,0) scale(1.08)}
  100%{transform:translate3d(-4vw,5vh,0) scale(.96)}
}
@keyframes pan{from{transform:translate3d(0,0,0)}to{transform:translate3d(-84px,-84px,0)}}
@media (max-width:640px){.bg i{filter:blur(48px)}}

/* ---- frosted sticky prayer bar (like the iOS nav bar) ---- */
.pbar{
  position:sticky;top:0;z-index:20;
  background:rgba(31,92,35,.82);
  -webkit-backdrop-filter:saturate(180%) blur(18px);backdrop-filter:saturate(180%) blur(18px);
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 6px 20px rgba(20,60,25,.15);
}
.pbar-times span{transition:background .25s var(--ease),transform .25s var(--ease)}
.pbar-times span.next{box-shadow:0 2px 8px rgba(0,0,0,.15)}

/* ---- buttons: pill, soft shadow, press-down feedback ---- */
.more,.btn,.seg button,.chips button,.regions button,.pbar-loc button,.menu-btn{
  transition:transform .18s var(--ease),background .2s ease,border-color .2s ease,box-shadow .2s ease,color .2s ease;
  border-radius:14px;
}
.more{box-shadow:var(--shadow-sm)}
.more.green{box-shadow:0 6px 18px rgba(46,125,50,.28)}
.more:active,.btn:active,.seg button:active,.chips button:active,.regions button:active,.pbar-loc button:active,.menu-btn:active,.tool:active,.rcard:not(.open):active{transform:scale(.96)}
.btn.on{box-shadow:0 4px 14px rgba(46,125,50,.25)}
.chips button,.regions button{border-radius:999px}
.chips button.on,.regions button.on{box-shadow:0 4px 14px rgba(46,125,50,.25)}

/* iOS segmented control */
.seg{border:0;background:#eef0ee;padding:3px;border-radius:12px;gap:3px;box-shadow:inset 0 1px 2px rgba(0,0,0,.04)}
.seg button{background:transparent;color:#3d3d3d;border-radius:10px;padding:8px 26px;font-weight:600}
.seg button.on{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.10),0 3px 8px rgba(0,0,0,.06)}

/* inputs */
.searchbox input,.reader-controls select,.reader-controls input,.cityform input{
  border-radius:14px;background:rgba(255,255,255,.85);transition:box-shadow .2s ease,border-color .2s ease;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
.searchbox input{border-radius:999px}
.searchbox input:focus,.reader-controls select:focus,.cityform input:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 4px rgba(46,125,50,.15)}

/* ---- cards: gentle lift, glassy surface ---- */
.tool,.dua,.name,.bname,.dream,.rcard,.place,.ptable,.reader-controls,.resume,.calgrid .day,.ram,.note{
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-radius:16px;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .2s ease;
}
.tool:hover,.rcard:not(.open):hover,.place:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.rcard.open{box-shadow:var(--shadow-md);background:rgba(255,255,255,.92)}
.rbody{animation:fadeup .35s var(--ease) both}
@keyframes fadeup{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.video{border-radius:14px;box-shadow:var(--shadow-md)}
.calgrid .day{border-radius:12px}
.calgrid .day.today{box-shadow:0 6px 16px rgba(46,125,50,.3)}
.ayah{transition:background .3s ease}
.ayah.mark{border-radius:14px}

/* ---- scroll reveal ---- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal:nth-child(2){transition-delay:.05s}.reveal:nth-child(3){transition-delay:.1s}.reveal:nth-child(4){transition-delay:.15s}
.reveal:nth-child(5){transition-delay:.2s}.reveal:nth-child(6){transition-delay:.25s}.reveal:nth-child(7){transition-delay:.3s}.reveal:nth-child(8){transition-delay:.35s}

/* ---- header / mobile menu motion ---- */
.brand{transition:opacity .2s ease,transform .3s var(--ease)}
.brand:active{transform:scale(.98)}
nav.main a,nav.tools a{transition:background .2s ease,color .2s ease}
.menu-btn{border-radius:12px;box-shadow:var(--shadow-sm)}
@media (max-width:820px){
  .top{background:rgba(255,255,255,.6)}
  body.menu-open nav.main,body.menu-open nav.tools{animation:menuin .32s var(--ease) both}
  body.menu-open nav.tools{animation-delay:.06s}
  body.menu-open nav a{border-radius:10px;transition:background .15s ease}
  body.menu-open nav a:active{background:var(--green-soft)}
}
@keyframes menuin{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* compass motion */
.compass .dial{box-shadow:var(--shadow-md);background:rgba(255,255,255,.9)}
.compass .needle::before{filter:drop-shadow(0 4px 8px rgba(46,125,50,.35))}

/* cross-page fade (Safari/Chrome that support it) */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .18s ease both}
::view-transition-new(root){animation:vt-in .28s var(--ease) both}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
  .bg svg,.bg i{animation:none!important}
}

/* =====================================================================
   ZAKHRAFA — Andalusian/Ottoman ornament around the logo
   ===================================================================== */
.top{padding-top:0;overflow:hidden}
.orn-band{
  height:48px;width:100%;max-width:var(--maxw);margin:0 auto;opacity:.5;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent);mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent);
}
.orn-band svg{width:100%;height:100%;display:block}
.brand-row{display:flex;align-items:center;justify-content:center;gap:22px;margin-top:8px}
.flourish{width:clamp(120px,18vw,220px);height:auto;opacity:.9;flex:none}
.flourish.r{transform:scaleX(-1)}
.rule{display:flex;align-items:center;justify-content:center;gap:12px;max-width:var(--maxw);margin:14px auto 0;padding:0 20px}
.rule span{flex:1;height:1px;background:linear-gradient(90deg,transparent,#d9c98a 30%,#d9c98a 70%,transparent)}
.rule span:first-child{background:linear-gradient(90deg,transparent,#d9c98a)}
.rule span:last-child{background:linear-gradient(90deg,#d9c98a,transparent)}
nav.main{border-top:0;margin-top:6px}
@media (max-width:820px){
  .orn-band{height:48px;opacity:.4;-webkit-mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent);mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent)}
  .brand-row{justify-content:flex-start;gap:12px;padding-right:56px}
  .flourish{width:74px}
  .flourish.r{display:none}
  .rule{display:none}
  .menu-btn{top:36px}
}

/* =====================================================================
   SQUIRCLES — Apple-style continuous (G2) corners where the browser can
   draw them; everywhere else the same radius with normal rounding.
   ===================================================================== */
.more,.btn,.seg,.seg button,.menu-btn,.pbar-loc button,.pbar-times span,
.tool,.dua,.name,.bname,.dream,.rcard,.place,.ptable,.reader-controls,.resume,.calgrid .day,.ram,.note,.video,.ayah.mark,
.searchbox input,.reader-controls select,.reader-controls input,.cityform input,.chips button,.regions button,.compass .kaaba,.tool .ar{
  corner-shape:squircle;
}
.tool,.dua,.name,.bname,.dream,.rcard,.place,.reader-controls,.resume,.ram,.note{border-radius:22px}
.ptable{border-radius:22px}
.video{border-radius:18px}
.more,.btn,.menu-btn{border-radius:16px}
.calgrid .day{border-radius:14px}
.compass .kaaba{border-radius:7px}
.pbar-times span{border-radius:14px}

/* =====================================================================
   LIBRARY — bookshelf + page-flip reader (same white / green / gold)
   ===================================================================== */
.lib-group{margin:34px 0 12px;text-align:center;font-size:1.3rem;letter-spacing:.02em}
.lib-group::after{content:"";display:block;width:60px;height:2px;background:var(--gold);margin:8px auto 0;opacity:.7}
.shelf{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media (max-width:980px){.shelf{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.shelf{grid-template-columns:1fr}}
.book{
  position:relative;display:flex;flex-direction:column;text-decoration:none;color:var(--gray);
  background:rgba(255,255,255,.78);border:1px solid var(--line);border-radius:18px;corner-shape:squircle;padding:22px 20px 18px 26px;overflow:hidden;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .2s;
}
.book:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:#d9c98a}
.book .spine{position:absolute;left:0;top:0;bottom:0;width:8px;background:linear-gradient(180deg,var(--green),var(--green-deep));}
.book .spine::after{content:"";position:absolute;left:0;right:0;top:14px;height:2px;background:var(--gold);box-shadow:0 8px 0 var(--gold)}
.book .ar{font-family:'Amiri',serif;font-size:1.5rem;color:var(--green);line-height:1.2;margin-bottom:8px}
.book b{color:var(--ink);font-size:1.08rem}
.book small{color:#8a8a8a;font-size:.85rem;margin-bottom:8px}
.book p{font-size:.93rem;line-height:1.5;max-width:none;flex:1}
.book .src{font-size:.75rem;color:var(--green);margin-top:12px}
.lib-note{max-width:820px;margin:26px auto 60px}

/* reader */
#reader{--rsize:1}
.r-head{text-align:center;padding:30px 0 6px}
.r-head .ar{font-family:'Amiri',serif;font-size:2.2rem;color:var(--green);line-height:1.2}
.r-head h1{font-size:clamp(1.5rem,3vw,2.2rem)}
.r-head p{margin:4px auto 0}
.r-bar{
  display:flex;gap:8px;flex-wrap:wrap;align-items:center;justify-content:center;
  padding:12px;border:1px solid var(--line);border-radius:18px;corner-shape:squircle;background:rgba(255,255,255,.8);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);margin-top:14px;
}
.r-bar select{font-size:.98rem;padding:9px 12px;border:1px solid #cfcfcf;border-radius:12px;background:#fff;color:var(--ink);max-width:100%;flex:1;min-width:220px}
.r-bar .sep{width:1px;height:26px;background:var(--line);margin:0 4px}
.r-tools{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:12px 0 0}
.r-tools .btn{padding:8px 12px;font-size:.9rem}
#r-pos{color:#8a8a8a;font-size:.9rem;align-self:center}
#r-status{margin:14px auto;max-width:820px}
.r-stage{margin:22px auto 0;max-width:1100px;min-height:200px}
.r-scroll{display:none;max-width:760px;margin:22px auto 0}
.mode-scroll .r-stage{display:none}
.mode-scroll .r-scroll{display:block}
.r-scroll .page{margin:0 auto 18px;position:relative;min-height:300px}

.page{
  background:#fffdf7;color:#3a3a3a;overflow:hidden;
  border:1px solid #eadfb8;box-shadow:inset 0 0 40px rgba(201,162,39,.06);
}
.r-scroll .page{border-radius:18px;corner-shape:squircle;box-shadow:var(--shadow-sm),inset 0 0 40px rgba(201,162,39,.06)}
.page-content{padding:34px 34px 44px;height:100%;overflow:auto;font-size:calc(1rem * var(--rsize));line-height:1.65}
.page-content::-webkit-scrollbar{width:4px}
.page-content::-webkit-scrollbar-thumb{background:#e0d6b5;border-radius:4px}
.pnum{position:absolute;left:0;right:0;bottom:12px;text-align:center;font-size:.72rem;color:#b9ad85;letter-spacing:.1em}
.chead{text-align:center;margin-bottom:22px;padding-bottom:14px;border-bottom:1px solid #eadfb8}
.chead .ar{font-family:'Amiri',serif;font-size:1.7em;color:var(--green);line-height:1.3}
.chead h2{font-size:1.15em;margin-top:4px}
.item{margin-bottom:22px}
.ititle{font-weight:600;color:var(--green);font-size:.9em;margin-bottom:8px}
.item .arabic{font-size:calc(1.55em);line-height:2;margin-bottom:8px;color:#222}
.item .arabic .vnum{font-family:'Inter',sans-serif;font-size:.5em;color:var(--green);border:1px solid var(--green);border-radius:50%;display:inline-block;width:1.9em;height:1.9em;line-height:1.75em;text-align:center;vertical-align:middle;margin-right:6px}
.no-ar .item .arabic{display:none}
.item .en{color:#333}
.item .en p{margin:0 0 6px;max-width:none}
.iref{font-size:.78em;color:#9a8f6a;margin-top:6px}
.iref a{color:#9a8f6a;text-decoration:none}
.iref a:hover{color:var(--green)}
.taf p{margin:0 0 10px;max-width:none;color:#333}
.r-credit{text-align:center;color:#9a9a9a;font-size:.85rem;margin:18px 0 60px}
@media (max-width:640px){
  .page-content{padding:22px 18px 40px}
  .r-bar select{min-width:0;width:100%;order:-1}
}
@media print{
  header,.pbar,.bg,footer,.r-bar,.r-tools,.r-stage,#r-status,.r-credit{display:none!important}
  .r-scroll{display:block!important;max-width:none}
  .page{border:0;box-shadow:none;page-break-after:always;background:#fff}
  .page-content{overflow:visible;height:auto}
}