/* أذكار الصباح والمساء — style.css
   Layout: single-column reading app — sticky header + tabs, stack of dhikr cards each with a tap-counter */
:root{
  --bg:#f3f0e9;
  --surface:#ffffff;
  --surface-2:#faf7f0;
  --ink:#1f2a28;
  --ink-soft:#5c6a66;
  --line:#e4ddcf;
  --accent:#0f6e5c;
  --accent-soft:#e4f0ec;
  --gold:#b08633;
  --done:#0f6e5c;
  --shadow:0 1px 2px rgba(31,42,40,.05),0 6px 18px rgba(31,42,40,.06);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#121715; --surface:#1a211f; --surface-2:#161c1a;
    --ink:#e8edeb; --ink-soft:#9fb0ab; --line:#2a332f;
    --accent:#3fae95; --accent-soft:#17302a; --gold:#d2a84e; --done:#3fae95;
    --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 22px rgba(0,0,0,.35);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#121715; --surface:#1a211f; --surface-2:#161c1a;
  --ink:#e8edeb; --ink-soft:#9fb0ab; --line:#2a332f;
  --accent:#3fae95; --accent-soft:#17302a; --gold:#d2a84e; --done:#3fae95;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 22px rgba(0,0,0,.35);
  color-scheme:dark;
}

*{-webkit-tap-highlight-color:transparent}
html,body{margin:0}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:"Noto Kufi Arabic",system-ui,"Segoe UI",sans-serif;
  padding-top:env(safe-area-inset-top,0);
}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:20;background:var(--accent)}

.wrap{
  max-width:720px;margin-inline:auto;
  padding-left:max(16px,env(safe-area-inset-left,0px));
  padding-right:max(16px,env(safe-area-inset-right,0px));
  padding-block:0 2.5rem;
}

/* header */
.app-head{
  position:sticky;top:env(safe-area-inset-top,0px);z-index:15;
  background:var(--accent);color:#fff;
  margin-inline:calc(-1 * max(16px,env(safe-area-inset-left,0px)));
  padding-inline:max(16px,env(safe-area-inset-left,0px));
  padding-block:.85rem;
  display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  box-shadow:0 4px 16px rgba(15,110,92,.18);
}
.app-head h1{font-family:"Amiri",serif;font-weight:700;font-size:1.5rem;margin:0;display:flex;align-items:center;gap:.5rem;line-height:1}
.app-head .date{font-size:.72rem;opacity:.85;margin-top:.15rem}
.theme-btn{background:rgba(255,255,255,.14);border:0;color:#fff;width:40px;height:40px;border-radius:12px;font-size:1.1rem;cursor:pointer;display:grid;place-items:center;transition:background .15s}
.theme-btn:hover{background:rgba(255,255,255,.26)}

/* tabs */
.tabs{
  position:sticky;top:calc(env(safe-area-inset-top,0px) + 62px);z-index:14;background:var(--bg);
  margin-inline:calc(-1 * max(16px,env(safe-area-inset-left,0px)));
  padding:.6rem max(16px,env(safe-area-inset-left,0px));
  display:flex;gap:.5rem;border-bottom:1px solid var(--line);
}
.tab{flex:1;border:1px solid var(--line);background:var(--surface);color:var(--ink-soft);padding:.6rem;border-radius:14px;font-family:inherit;font-weight:500;font-size:.95rem;cursor:pointer;transition:all .15s;display:flex;align-items:center;justify-content:center;gap:.4rem}
.tab[aria-selected="true"]{background:var(--accent);color:#fff;border-color:var(--accent);box-shadow:var(--shadow)}

/* progress */
.progress-row{display:flex;align-items:center;gap:.75rem;margin:1rem 0 .25rem;font-size:.82rem;color:var(--ink-soft)}
.bar{flex:1;height:8px;border-radius:99px;background:var(--line);overflow:hidden}
.bar>span{display:block;height:100%;background:var(--accent);width:0;transition:width .35s ease}
.reset{background:none;border:0;color:var(--accent);font-family:inherit;font-size:.8rem;cursor:pointer;padding:.2rem .4rem}
.reset:hover{text-decoration:underline}

/* dhikr card */
.dhikr{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:1.1rem 1.1rem 1rem;margin-top:1rem;box-shadow:var(--shadow);transition:border-color .2s,opacity .2s;position:relative;overflow:hidden}
.dhikr::before{content:"";position:absolute;inset-block:0;inset-inline-end:0;width:4px;background:var(--gold);opacity:.5}
.dhikr.done{border-color:var(--accent)}
.dhikr.done::before{background:var(--accent);opacity:1}
.dhikr .text{font-family:"Amiri",serif;font-size:1.42rem;line-height:2.15;color:var(--ink);margin:0 0 .75rem;text-align:justify}
.dhikr .meta{display:flex;flex-wrap:wrap;gap:.5rem .9rem;align-items:center;font-size:.76rem;color:var(--ink-soft)}
.dhikr .ref{display:inline-flex;align-items:center;gap:.3rem}
.dhikr .virtue{width:100%;font-size:.8rem;color:var(--ink-soft);background:var(--surface-2);border-radius:10px;padding:.5rem .65rem;line-height:1.7}

/* counter */
.count-zone{display:flex;align-items:center;gap:.75rem;margin-top:.85rem;padding-top:.85rem;border-top:1px dashed var(--line)}
.tap{flex-shrink:0;border:0;cursor:pointer;font-family:inherit;width:72px;height:72px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;line-height:1;box-shadow:0 6px 16px rgba(15,110,92,.3);transition:transform .08s ease,background .2s;user-select:none}
.tap:active{transform:scale(.92)}
.tap .n{font-size:1.7rem;font-weight:700;font-variant-numeric:tabular-nums}
.tap .of{font-size:.68rem;opacity:.85;margin-top:2px}
.tap.done{background:var(--done)}
.tap.done .check{font-size:2rem}
.count-label{font-size:.85rem;color:var(--ink-soft);line-height:1.6}
.count-label b{color:var(--ink);font-weight:700;display:block;font-size:.95rem}

footer{text-align:center;color:var(--ink-soft);font-size:.78rem;margin-top:2rem;line-height:1.9}
footer b{color:var(--accent)}

.celebrate{text-align:center;background:var(--accent-soft);border:1px solid var(--accent);color:var(--accent);border-radius:16px;padding:1rem;margin-top:1rem;font-family:"Amiri",serif;font-size:1.25rem;font-weight:700}
@media (prefers-reduced-motion:no-preference){
  .celebrate{animation:pop .4s ease}
  @keyframes pop{from{transform:scale(.96);opacity:.4}to{transform:scale(1);opacity:1}}
}

@media (max-width:420px){
  .dhikr .text{font-size:1.3rem;line-height:2.05}
  .app-head h1{font-size:1.3rem}
}