/* Ayatul Kursi app, premium design (approved board: app-design/phase1.html).
   Emerald, gold foil and ivory paper; Islamic geometric patterns; a mushaf page for the verse.
   Built for anyone: big text, big touch targets, a picture and a word on every button. */
.akr{
  --g900:#062419;--g800:#0a3326;--g700:#0f4634;--g600:#165c45;--g100:#e4efe8;--g50:#f2f7f3;
  --gold:#c9a24e;--gold-l:#f1dc9c;--gold-d:#8a6a28;--gold-50:#fbf3df;
  --foil:linear-gradient(135deg,#8a6a28 0%,#e9cf86 28%,#fff1c4 45%,#c9a24e 60%,#8a6a28 100%);
  --bg:#fbf6ea;--paper:#fffbf2;--card:#ffffff;--ink:#18261f;--muted:#5e6b63;--line:#e7dcc3;
  --hi:linear-gradient(180deg,rgba(241,220,156,0) 8%,rgba(241,220,156,.9) 10%,rgba(233,200,110,.95));--hi-ink:#3b2b06;
  --ok:#0f4634;--mid:#8a6a28;--bad:#b4442f;
  --sh:0 1px 0 var(--line),0 16px 34px -26px rgba(10,51,38,.45);
  --pat:rgba(201,162,78,.10);
  --fb:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans","Noto Sans Devanagari","Noto Sans Bengali",sans-serif;
  --fd:"Cormorant Garamond",Georgia,serif;
  --fa:"Amiri Quran","Amiri","Noto Naskh Arabic",serif;
  --fc:"Aref Ruqaa","Amiri",serif;
  --fu:"Noto Nastaliq Urdu","Jameel Noori Nastaleeq","Noto Naskh Arabic",var(--fa);
  --ar:34px;
  --tj-silent:#9aa3a0;--tj-madd:#c7372c;--tj-madd2:#d9782e;--tj-ghunnah:#138a55;--tj-ikhfa:#8e44ad;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){.akr:not([data-theme="light"]){
  --bg:#06150f;--paper:#0d1d17;--card:#10231c;--ink:#efe8d6;--muted:#a7b3aa;--line:#24382f;--g100:#173229;--g50:#11261f;
  --g800:#f1dc9c;--g700:#e2c57a;--gold-50:#2a2414;--hi:linear-gradient(180deg,rgba(201,162,78,0) 8%,rgba(201,162,78,.35) 10%);--hi-ink:#fff3cf;
  --ok:#e2c57a;--mid:#e2c57a;--bad:#e2826d;--pat:rgba(241,220,156,.05);
  --tj-silent:#7d8a85;--tj-madd:#ff6b5f;--tj-madd2:#ffa25c;--tj-ghunnah:#4fd08f;--tj-ikhfa:#c88ee0;
  --sh:0 1px 0 var(--line);color-scheme:dark}}
.akr[data-theme="dark"]{
  --bg:#06150f;--paper:#0d1d17;--card:#10231c;--ink:#efe8d6;--muted:#a7b3aa;--line:#24382f;--g100:#173229;--g50:#11261f;
  --g800:#f1dc9c;--g700:#e2c57a;--gold-50:#2a2414;--hi:linear-gradient(180deg,rgba(201,162,78,0) 8%,rgba(201,162,78,.35) 10%);--hi-ink:#fff3cf;
  --ok:#e2c57a;--mid:#e2c57a;--bad:#e2826d;--pat:rgba(241,220,156,.05);
  --tj-silent:#7d8a85;--tj-madd:#ff6b5f;--tj-madd2:#ffa25c;--tj-ghunnah:#4fd08f;--tj-ikhfa:#c88ee0;
  --sh:0 1px 0 var(--line);color-scheme:dark}

*{box-sizing:border-box}
.akr{margin:0;background:var(--bg);color:var(--ink);font:500 17px/1.55 var(--fb);-webkit-text-size-adjust:100%}
/* the faint eight-fold lattice behind every screen */
.akr{overscroll-behavior-y:none;-webkit-tap-highlight-color:transparent;background-image:var(--lattice);background-size:46px 46px}
.akr[lang="ur"]{font-family:var(--fu),var(--fb);line-height:1.9}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .08s ease}
button:active{transform:scale(.96)}
svg{width:24px;height:24px;flex:none}
a{color:var(--g700)}
h2{font:700 30px/1.2 var(--fd);margin:4px 0 8px;color:var(--g800);letter-spacing:.1px}
.akr[lang="ur"] h2,.akr[lang="ur"] h3{font-family:var(--fu)}
h3{font:800 17px/1.35 var(--fb);margin:0 0 4px}
[hidden]{display:none!important}
.ar{font-family:var(--fa);direction:rtl}
.saw{font-family:"Amiri Quran","Amiri",serif}   /* ﷺ: the text fonts have no glyph for it */

.app{max-width:680px;margin:0 auto;min-height:100dvh}
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:6px;padding:calc(10px + env(safe-area-inset-top)) 12px 10px 14px;
  background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;flex:1;min-width:0}
.brand img{border-radius:12px;box-shadow:0 4px 10px -4px rgba(4,26,18,.6)}
.brand b{display:block;font:700 26px/1.1 var(--fd);color:var(--g800);letter-spacing:.2px}
.akr[lang="ur"] .brand b{font-family:var(--fu);font-size:22px}
.brand span{font-size:12.5px;color:var(--muted)}
.icon-btn{width:46px;height:46px;display:grid;place-items:center;border-radius:15px;color:var(--g700);background:color-mix(in srgb,var(--g700) 7%,transparent)}
.icon-btn.help{background:var(--foil);color:#2e2106;box-shadow:0 0 0 3px rgba(201,162,78,.22)}
.icon-btn.help.speaking{animation:speak 1s ease-in-out infinite}
@keyframes speak{50%{box-shadow:0 0 0 8px rgba(201,162,78,.18)}}

.akmain{padding:14px 14px calc(236px + var(--ad-h,0px) + env(safe-area-inset-bottom))}
.view{animation:fade .22s ease}
@keyframes fade{from{opacity:.2;transform:translateY(6px)}to{opacity:1;transform:none}}
.sub,.note{color:var(--muted);font-size:15px;margin:0 0 12px}
.note{text-align:center;margin-top:16px}

/* reciter chip */
.rec-chip{display:flex;align-items:center;gap:12px;width:100%;padding:9px 10px 9px 9px;border-radius:20px;background:var(--card);border:1px solid var(--line);margin-bottom:14px;text-align:start;box-shadow:var(--sh)}
.rec-chip small{display:block;font-size:12px;color:var(--muted)}
.rec-chip b{font-size:16px;display:block;line-height:1.25}
.rec-chip .chg{margin-inline-start:auto;display:flex;align-items:center;gap:3px;font-size:13px;font-weight:800;color:var(--g700);background:var(--g50);padding:8px 10px;border-radius:13px;white-space:nowrap}
.rec-chip .chg svg{width:16px;height:16px}
.akr[dir="rtl"] .rec-chip .chg svg,.akr[dir="rtl"] .go2 svg{transform:scaleX(-1)}
/* reciter medallion: the first letter of the name in Arabic calligraphy */
.avatar{width:46px;height:46px;border-radius:50%;flex:none;display:grid;place-items:center;position:relative;
  background:radial-gradient(circle at 35% 30%,#17573f,#0a3326 70%);color:var(--gold-l);font:700 22px/1 var(--fc);box-shadow:inset 0 0 0 2px rgba(241,220,156,.55),0 0 0 2px var(--card),0 0 0 3.5px var(--gold)}
.avatar svg{width:22px;height:22px}

/* ---------- Listen: the mushaf page ---------- */
.mushaf{position:relative;border-radius:8px;background:var(--paper);padding:16px 14px 12px;margin:6px 6px 0;
  box-shadow:0 0 0 1px #e2cf9f,0 0 0 5px var(--paper),0 0 0 6.5px var(--gold),0 0 0 9px var(--paper),0 0 0 10px #e2cf9f,0 22px 34px -22px rgba(60,40,0,.45)}
.corners{position:absolute;inset:0;pointer-events:none}
.corners svg{position:absolute;width:30px;height:30px}
.cartouche{display:block;margin:0 auto 8px;width:min(100%,250px)}
.cartouche svg{width:100%;height:auto;display:block}
.verse{font-size:var(--ar);line-height:2.05;text-align:justify;text-align-last:center;color:#1c1408}
.verse .w{border-radius:9px;padding:0 3px;cursor:pointer;transition:background .15s,box-shadow .15s;display:inline-block}
.verse .w.on,.wg-w.on{background:var(--hi);color:var(--hi-ink);box-shadow:0 0 0 2px rgba(201,162,78,.35)}
.verse .w.on i{color:inherit!important}
.verse .w i,.w i{font-style:normal}
.verse .w.inpart{background:rgba(201,162,78,.055)}
.waqf{color:var(--gold);font-size:.78em}
.ayah-end{display:inline-block;width:1.25em;height:1.25em;vertical-align:middle;margin:0 2px}
.tj .ham_wasl,.tj .laam_shamsiyah{color:var(--tj-silent)}
.tj .madda_obligatory,.tj .madda_necessary{color:var(--tj-madd)}
.tj .madda_normal,.tj .madda_permissible{color:var(--tj-madd2)}
.tj .idgham_ghunnah,.tj .ghunnah,.tj .iqlab{color:var(--tj-ghunnah)}
.tj .ikhafa,.tj .ikhafa_shafawi,.tj .idgham_wo_ghunnah{color:var(--tj-ikhfa)}
.akr[data-theme="dark"] .verse{color:#efe4c4}
@media (prefers-color-scheme:dark){.akr:not([data-theme="light"]) .verse{color:#efe4c4}}
.akr[data-theme="dark"] .mushaf{box-shadow:0 0 0 1px #5a4a22,0 0 0 5px var(--paper),0 0 0 6.5px #b8913f,0 0 0 9px var(--paper),0 0 0 10px #5a4a22}
@media (prefers-color-scheme:dark){.akr:not([data-theme="light"]) .mushaf{box-shadow:0 0 0 1px #5a4a22,0 0 0 5px var(--paper),0 0 0 6.5px #b8913f,0 0 0 9px var(--paper),0 0 0 10px #5a4a22}}
.legend{display:flex;flex-wrap:wrap;gap:6px 14px;justify-content:center;margin:18px 4px 0;font-size:13px;color:var(--muted)}
.legend span{display:flex;align-items:center;gap:6px}
.legend i{width:12px;height:12px;border-radius:4px;display:inline-block}

/* the current part: pronunciation and meaning, kept above the player */
.part{position:sticky;bottom:calc(222px + var(--ad-h,0px) + env(safe-area-inset-bottom));z-index:5;margin:14px 2px 0;padding:12px 12px 12px 14px;border-radius:20px;
  background:color-mix(in srgb,var(--card) 96%,transparent);backdrop-filter:blur(8px);border:1px solid var(--line);box-shadow:0 14px 30px -20px rgba(10,51,38,.6);
  display:flex;gap:10px;align-items:center}
.part .pn{width:34px;height:34px;flex:none}
.part .txt{flex:1;min-width:0}
.part .tl{font-weight:800;color:var(--g700);font-size:15.5px;line-height:1.35}
.part .tl[lang="en"]{font-style:italic}
.part .mean{font-size:14.5px;margin-top:2px;line-height:1.4}
.part .mean[dir="rtl"]{font-family:var(--fu);font-size:17px;line-height:1.9}
.part .pbtns{display:flex;flex-direction:column;gap:6px}
.part .pbtns button{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;background:var(--g50);color:var(--g700)}
.part .pbtns button svg{width:20px;height:20px}
.part .pbtns .pp{background:var(--g700);color:#fff}
.akr[data-theme="dark"] .part .pbtns .pp{color:#06231a}
@media (prefers-color-scheme:dark){.akr:not([data-theme="light"]) .part .pbtns .pp{color:#06231a}}
.hide-tl .part .tl,.hide-mean .part .mean{display:none}

/* ---------- player: emerald glass, gold play button with a progress ring ---------- */
.player{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(76px + env(safe-area-inset-bottom));z-index:30;width:min(664px,calc(100% - 14px));
  padding:10px 8px 6px;border-radius:30px;color:#f6ecd0;overflow:hidden;
  background:radial-gradient(120% 150% at 50% 0%,#14513d 0%,#0a3326 55%,#062419 100%);box-shadow:0 18px 34px -16px rgba(3,23,15,.65),inset 0 1px 0 rgba(241,220,156,.15)}
.player:before{content:"";position:absolute;inset:0;background-image:var(--lattice-gold);background-size:38px 38px;opacity:.9;pointer-events:none}
.p-row{display:flex;align-items:center;justify-content:space-around;gap:2px;position:relative}
.p-btn{min-width:62px;display:flex;flex-direction:column;align-items:center;gap:3px;padding:2px;font-size:12px;font-weight:800;color:#f1e3bd}
.p-btn .ic{width:44px;height:44px;border-radius:15px;display:grid;place-items:center;background:rgba(241,220,156,.09);border:1px solid rgba(241,220,156,.2)}
.p-btn .ic svg{width:23px;height:23px;color:var(--gold-l)}
.p-btn.on{color:var(--gold-l)}
.p-btn.on .ic{background:rgba(201,162,78,.28);border-color:rgba(241,220,156,.6)}
.p-btn span:last-child{white-space:nowrap;max-width:78px;overflow:hidden;text-overflow:ellipsis}
.play{width:94px;height:94px;position:relative;flex:none;border-radius:50%}
.play .ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.play .ring circle{fill:none;stroke-width:4}
.play .ring .track{stroke:rgba(241,220,156,.16)}
.play .ring .fill{stroke-linecap:round;stroke-dasharray:0 264;transition:stroke-dasharray .25s linear}
.play .core{position:absolute;inset:11px;border-radius:50%;background:var(--foil);display:grid;place-items:center;
  box-shadow:0 8px 18px rgba(0,0,0,.4),inset 0 1px 2px rgba(255,255,255,.75),inset 0 -2px 4px rgba(90,60,0,.35)}
.play .core svg{width:34px;height:34px;color:#3a2a08}
.play .ic-play{margin-left:4px}
.play .ic-pause,.playing .play .ic-play{display:none}
.playing .play .ic-pause{display:block}
.playing .play .core{animation:glow 2.4s ease-in-out infinite}
@keyframes glow{50%{box-shadow:0 8px 18px rgba(0,0,0,.4),0 0 0 6px rgba(241,220,156,.16),inset 0 1px 2px rgba(255,255,255,.75)}}
.p-status{text-align:center;font-size:12px;color:#d7c79c;min-height:18px;margin-top:1px;position:relative}

/* ---------- tabs: mihrab-arch highlight ---------- */
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:25;display:flex;justify-content:center;background:var(--paper);border-top:1px solid var(--line);padding:6px 4px env(safe-area-inset-bottom)}
.tabs button{flex:1;max-width:160px;display:flex;flex-direction:column;align-items:center;gap:1px;padding:4px 2px 8px;font-size:12.5px;font-weight:800;color:var(--muted)}
.akr[dir="rtl"] .tabs button{font-size:14px}
.tabs .ti{width:56px;height:36px;display:grid;place-items:center;border-radius:28px 28px 10px 10px;transition:background .2s}
.tabs svg{width:25px;height:25px}
.tabs button[aria-current="page"]{color:var(--g700)}
.tabs button[aria-current="page"] .ti{background:var(--g100);box-shadow:inset 0 -2px 0 var(--gold)}
.player.mini .p-row,.player.mini .p-status{display:none}

/* ---------- Learn ---------- */
.pathcard{border-radius:24px;padding:16px;margin-bottom:12px;color:#f3e7c5;position:relative;overflow:hidden;
  background:linear-gradient(160deg,#0f4634,#062419);box-shadow:var(--sh)}
.pathcard:before{content:"";position:absolute;inset:0;background-image:var(--lattice-gold);background-size:36px 36px;pointer-events:none}
.pathcard b{display:block;font:700 24px/1.15 var(--fd);color:var(--gold-l);position:relative}
.pathcard small{display:block;color:#cdbf98;font-size:13px;position:relative}
.beads{display:flex;justify-content:space-between;margin-top:14px;position:relative}
.beads:before{content:"";position:absolute;left:12px;right:12px;top:50%;height:2px;background:rgba(241,220,156,.28)}
.beads i{position:relative;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font:800 12px var(--fb);font-style:normal;background:#0b2a20;border:2px solid rgba(241,220,156,.35);color:#cdbf98}
.beads i.done{background:var(--foil);border-color:#f1dc9c;color:#2e2106}
.beads i.cur{border-color:var(--gold-l);box-shadow:0 0 0 4px rgba(201,162,78,.3);color:var(--gold-l)}
.big-card{display:flex;align-items:center;gap:14px;width:100%;text-align:start;padding:14px;border-radius:24px;background:var(--card);border:1px solid var(--line);margin-bottom:10px;box-shadow:var(--sh)}
.big-card b{display:block;font-size:18px;line-height:1.3}
.big-card small{display:block;color:var(--muted);font-size:13.5px;margin-top:2px}
.big-card .go2{margin-inline-start:auto;width:36px;height:36px;border-radius:12px;background:var(--g50);display:grid;place-items:center;color:var(--g700);flex:none}
.big-card .go2 svg{width:18px;height:18px}
.bc-ico{width:64px;height:64px;border-radius:20px;display:grid;place-items:center;flex:none;position:relative;overflow:hidden}
.bc-ico:before{content:"";position:absolute;inset:0;background-image:var(--lattice-white);background-size:24px 24px}
.bc-ico svg{width:32px;height:32px;position:relative}
.c1{background:linear-gradient(145deg,#165c45,#0a3326);color:var(--gold-l)}
.c2{background:linear-gradient(145deg,#c9a24e,#8a6a28);color:#fff6dc}
.c3{background:linear-gradient(145deg,#3c5f8a,#1e3554);color:#e7eefc}
.c4{background:linear-gradient(145deg,#a3552f,#5e2814);color:#ffe8d2}
.back{display:inline-flex;align-items:center;gap:6px;padding:10px 14px 10px 8px;border-radius:15px;background:var(--g50);color:var(--g800);font-weight:800;margin-bottom:12px}
.akr[dir="rtl"] .back svg{transform:scaleX(-1)}
.stepper{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 -14px 14px;padding:4px 14px}
.stepper::-webkit-scrollbar{display:none}
.stepper button{min-width:46px;height:46px;border-radius:50%;border:2px solid var(--line);background:var(--card);font-weight:800;font-size:16px;position:relative}
.stepper button.cur{border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,162,78,.25)}
.stepper button.done{background:var(--foil);border-color:#e9cf86;color:#2e2106}
.learn-card{background:var(--paper);border-radius:10px;padding:16px;margin:4px 6px 0;
  box-shadow:0 0 0 1px #e2cf9f,0 0 0 5px var(--paper),0 0 0 6.5px var(--gold),0 18px 30px -22px rgba(60,40,0,.45)}
.learn-card .ar{font-size:calc(var(--ar) * 1.12);line-height:2.25;text-align:center}
.lv{display:flex;gap:6px;margin:0 0 16px}
.lv button{flex:1;font-size:14.5px;padding:12px 4px;border-radius:15px;border:1.5px solid var(--line);color:var(--muted);background:var(--card);font-weight:800}
.lv button[aria-pressed="true"]{border-color:var(--gold);color:var(--g800);background:var(--gold-50)}
.w.gone{color:transparent!important;background:var(--g100);border-bottom:3px dashed var(--g600)}
.w.gone i{color:transparent!important}
.w.gone.peek{color:var(--gold-d)!important;background:var(--gold-50)}
.w.gone.peek i{color:inherit!important}
.learn-tl{text-align:center;color:var(--g700);font-size:18px;margin-top:4px;font-weight:700}
.learn-m{text-align:center;color:var(--muted);font-size:15px;margin-top:4px}
.learn-m[dir="rtl"]{font-family:var(--fu);font-size:18px}
.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px;justify-content:center}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:54px;padding:12px 20px;border-radius:18px;background:var(--g700);color:#fff;font-weight:800;font-size:16px;box-shadow:0 8px 16px -10px rgba(10,51,38,.7)}
.btn svg{width:20px;height:20px}
.akr[data-theme="dark"] .btn{color:#06231a}
@media (prefers-color-scheme:dark){.akr:not([data-theme="light"]) .btn{color:#06231a}}
.akr .btn.ghost{background:var(--g50);color:var(--g800);box-shadow:none;border:1px solid var(--line)}
.akr .btn.gold{background:var(--foil);color:#2e2106}
.btn.wide{width:100%}
.answer{min-height:84px;border:2px dashed var(--line);border-radius:18px;padding:8px 10px;display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center;direction:rtl;margin-bottom:14px}
.answer.full{border-color:var(--gold);border-style:solid;background:var(--gold-50)}
.pool{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;direction:rtl}
.tile{font-family:var(--fa);font-size:calc(var(--ar) * .88);min-height:60px;padding:2px 16px;border-radius:16px;border:1px solid var(--line);background:var(--card);line-height:1.9;box-shadow:0 3px 0 var(--line)}
.tile i{font-style:normal}
.tile.used{visibility:hidden}
.tile.placed{background:var(--gold-50);border-color:var(--gold);box-shadow:none}
.tile.wrong{animation:shake .3s;border-color:var(--bad)}
@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.word-card{background:var(--paper);border-radius:24px;padding:14px 16px;border:1px solid var(--line);box-shadow:var(--sh);margin-bottom:14px;position:relative;overflow:hidden}
.wc-top{display:flex;justify-content:space-between;color:var(--muted);font-size:13.5px;font-weight:700}
.wc-ar{font-family:var(--fa);font-size:calc(var(--ar) * 1.65);text-align:center;line-height:1.75;color:var(--g800);direction:rtl}
.wc-ar i{font-style:normal}
.wc-tl{text-align:center;font-style:italic;color:var(--g700);font-size:19px;font-weight:700}
.wc-m{text-align:center;font-size:22px;font-weight:800;margin:4px 0 6px}
.wc-m[dir="rtl"]{font-family:var(--fu);font-weight:400;font-size:24px}
.wc-root{text-align:center;font-size:14px;color:var(--muted)}
.wc-root b{font-family:"Amiri Quran","Amiri",serif;font-size:21px;color:var(--gold-d);font-weight:400}
.wc-nav{display:flex;align-items:center;justify-content:space-between;margin-top:10px}
.round{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:var(--g50);color:var(--g700)}
.round.main{width:70px;height:70px;background:var(--foil);color:#3a2a08;box-shadow:0 8px 16px -8px rgba(0,0,0,.5)}
.round.main svg{width:30px;height:30px;margin-left:3px}
.word-grid{display:flex;flex-direction:column;gap:10px;direction:rtl}
.wg-ph{display:flex;flex-wrap:wrap;gap:8px;padding-bottom:10px;border-bottom:1px dashed var(--line)}
.wg-w{font-family:var(--fa);font-size:calc(var(--ar) * .82);min-height:56px;padding:2px 14px;border-radius:15px;border:1px solid var(--line);background:var(--card);line-height:1.9}
.wg-w i{font-style:normal}
.wg-w.sel{border-color:var(--gold);background:var(--gold-50);box-shadow:inset 0 0 0 1px var(--gold)}

/* ---------- Daily ---------- */
.datecard{margin:2px 2px 10px}
.datecard .hij{font:700 28px/1.1 var(--fd);color:var(--g800)}
.datecard .greg{font-size:13.5px;color:var(--muted);margin-top:2px}
.arc{background:linear-gradient(180deg,var(--gold-50) 0%,var(--paper) 100%);border:1px solid var(--line);border-radius:24px;padding:8px 8px 10px;margin-bottom:12px;box-shadow:var(--sh)}
.arc svg{width:100%;height:auto;display:block}
.arc .lbls{display:flex;justify-content:space-between}
.arc .lbls button{width:20%;text-align:center;font-size:12px;font-weight:800;color:var(--ink);padding:2px 0}
.arc .lbls small{display:block;font-weight:600;color:var(--muted);font-size:11.5px}
.checks{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.check{display:flex;align-items:center;gap:10px;min-height:66px;padding:10px 12px;border-radius:20px;border:1px solid var(--line);background:var(--card);text-align:start;font-weight:800;font-size:16px;box-shadow:var(--sh)}
.check i{width:34px;height:34px;border-radius:50%;border:2.5px solid var(--line);display:grid;place-items:center;flex:none;color:transparent;background:var(--paper)}
.check i svg{width:19px;height:19px}
.check[aria-pressed="true"]{background:var(--gold-50);border-color:var(--gold)}
.check[aria-pressed="true"] i{background:var(--g700);border-color:var(--g700);color:var(--gold-l)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 0}
.stat{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:12px 6px;text-align:center;box-shadow:var(--sh)}
.stat b{display:block;font:700 35px/1.05 var(--fd);color:var(--g800)}
.stat span{font-size:13px;color:var(--muted)}
.week{display:flex;justify-content:space-between;gap:4px;background:var(--card);border:1px solid var(--line);border-radius:20px;padding:12px 10px;box-shadow:var(--sh)}
.day{display:flex;flex-direction:column;align-items:center;gap:5px;font-size:12.5px;color:var(--muted);flex:1}
.day .ring{width:34px;height:34px;border-radius:50%;background:conic-gradient(var(--gold) calc(var(--p) * 1%),var(--g100) 0);display:grid;place-items:center}
.day .ring::after{content:"";width:24px;height:24px;border-radius:50%;background:var(--card)}
.day.today span{color:var(--g800);font-weight:800}
/* the counter: a ring of 33 tasbih beads */
.counter-card{display:flex;align-items:center;gap:16px;border-radius:24px;padding:14px;margin-top:14px;color:#f3e7c5;position:relative;overflow:hidden;
  background:linear-gradient(160deg,#0f4634,#062419);box-shadow:var(--sh)}
.counter-card:before{content:"";position:absolute;inset:0;background-image:var(--lattice-gold);background-size:36px 36px;pointer-events:none}
.counter-card>div{position:relative}
.counter-card h3{font:700 24px var(--fd);color:var(--gold-l)}
.counter-card .sub{color:#cdbf98;font-size:13.5px}
.counter{width:132px;height:132px;flex:none;position:relative;display:grid;place-items:center;border-radius:50%}
.counter svg{position:absolute;inset:0;width:100%;height:100%}
.counter span{position:relative;font:700 41px/1 var(--fd);color:var(--gold-l)}
.counter:active{transform:scale(.95)}
.counter-card .link-btn{color:var(--gold-l)}
.link-btn{color:var(--g700);font-weight:800;font-size:15px;padding:8px 0}
.link-btn.muted{color:var(--muted);font-weight:700}

/* reminders */
#rem{margin-top:14px}
#rem.busy{opacity:.6;pointer-events:none}
.rem-cta{margin:0;border-color:var(--gold);background:var(--gold-50)}
.rem-card{background:var(--card);border:1px solid var(--line);border-radius:24px;padding:14px;box-shadow:var(--sh)}
.rem-head{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.rem-head .bc-ico{width:52px;height:52px;border-radius:16px}
.rem-head .bc-ico svg{width:28px;height:28px}
.rem-head b{display:block;font-size:18px}
.rem-head small{display:flex;align-items:center;gap:4px;color:var(--muted);font-size:13.5px}
.rem-head .pin{width:16px;height:16px}
.rem-row{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:56px;border-top:1px solid var(--line)}
.rem-row b{font-size:18px;font-variant-numeric:tabular-nums;color:var(--g800)}
.rem-tog{display:flex;align-items:center;gap:10px;font-weight:800;font-size:16px;min-height:48px;text-align:start}
.rem-tog i{width:30px;height:30px;border-radius:9px;border:2.5px solid var(--line);display:grid;place-items:center;color:transparent;flex:none}
.rem-tog i svg{width:18px;height:18px}
.rem-tog[aria-pressed="true"] i{background:var(--g700);border-color:var(--g700);color:var(--gold-l)}
.rem-tog[aria-pressed="false"] span{color:var(--muted);text-decoration:line-through}
.rem-row input[type=time]{font:inherit;font-size:17px;font-weight:800;color:var(--g800);background:var(--g50);border:1.5px solid var(--line);border-radius:12px;padding:8px 10px;min-height:48px}
.rem-card h4{margin:14px 0 8px;font-size:14px;color:var(--muted);font-weight:700}
.rem-foot{display:flex;justify-content:space-between;gap:10px;margin-top:10px;flex-wrap:wrap}

/* ---------- Virtues ---------- */
.why-sec{margin-bottom:24px}
.why-sec h2{display:flex;align-items:center;gap:10px}
.why-sec h2:before{content:"";width:22px;height:22px;flex:none;background:var(--foil);clip-path:polygon(50% 0,61% 26%,85% 15%,74% 39%,100% 50%,74% 61%,85% 85%,61% 74%,50% 100%,39% 74%,15% 85%,26% 61%,0 50%,26% 39%,15% 15%,39% 26%)}
.card{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:14px 16px;margin-bottom:10px;box-shadow:var(--sh)}
.card p{margin:4px 0 0;font-size:16px}
.src{display:block;color:var(--muted);font-size:13px;margin-top:8px}
.grade{display:inline-block;font-size:12px;font-weight:800;padding:3px 10px;border-radius:99px;margin-bottom:6px;letter-spacing:.3px}
.grade.ok{background:var(--g100);color:var(--ok)}
.grade.mid{background:var(--gold-50);color:var(--mid)}
.grade.weak{background:color-mix(in srgb,var(--bad) 14%,transparent);color:var(--bad)}
.nope{padding-inline-start:20px}
.nope li{margin:6px 0;text-decoration:line-through;text-decoration-color:var(--bad);color:var(--muted)}
.site-link{display:block;text-align:center;padding:16px;border-radius:20px;background:var(--g50);font-weight:800;text-decoration:none;border:1px solid var(--line)}
.fine{color:var(--muted);font-size:12.5px;margin-top:18px;text-align:center}

/* ---------- first open: language ---------- */
.lang-screen{position:fixed;inset:0;z-index:80;color:#fff;display:flex;flex-direction:column;align-items:center;padding:calc(24px + env(safe-area-inset-top)) 22px calc(24px + env(safe-area-inset-bottom));overflow:auto;
  background:radial-gradient(130% 90% at 50% 8%,#145440 0%,#0a3326 45%,#03170f 100%)}
.lang-screen:before{content:"";position:fixed;inset:0;background-image:var(--lattice-gold);background-size:46px 46px;pointer-events:none}
.lang-screen>*{position:relative}
.ls-icon{border-radius:26px;margin-top:4vh;box-shadow:0 16px 30px -10px rgba(0,0,0,.6)}
.ls-ar{font-family:var(--fc);font-size:46px;line-height:1.6;color:transparent;background:var(--foil);-webkit-background-clip:text;background-clip:text;margin:6px 0 4px}
.ls-h{display:flex;align-items:center;gap:8px;color:#e9dcb4;font-weight:800;margin-bottom:16px;font-size:15px}
.ls-h svg{width:20px;height:20px;color:var(--gold-l)}
.ls-list{display:grid;gap:10px;width:min(420px,100%)}
.ls-list button{display:flex;align-items:center;gap:12px;min-height:64px;padding:0 16px;border-radius:20px;background:rgba(255,255,255,.06);border:1.5px solid rgba(241,220,156,.22);color:#fbf1d6;font-size:22px;font-weight:800}
.ls-list button .ck{width:26px;height:26px;border-radius:50%;border:2px solid rgba(241,220,156,.4);flex:none}
.ls-list button.guess{background:rgba(201,162,78,.22);border-color:var(--gold-l);box-shadow:0 0 0 3px rgba(201,162,78,.25)}
.ls-list button.guess .ck{background:var(--gold);border-color:var(--gold)}
.ls-list .tag{margin-inline-start:auto;font-size:11px;font-weight:800;background:var(--gold);color:#062419;padding:3px 8px;border-radius:99px}
.ls-list button:active{background:var(--gold);color:#2b2108}

/* ---------- "show me" tour ---------- */
.tour{position:fixed;inset:0;z-index:70}
.tour-dim{position:absolute;inset:0;background:radial-gradient(circle var(--r,60px) at var(--x,50%) var(--y,80%),transparent calc(var(--r,60px) - 2px),rgba(3,18,12,.84) var(--r,60px))}
.tour-pulse{position:absolute;width:calc(var(--r,60px) * 2);height:calc(var(--r,60px) * 2);left:calc(var(--x) - var(--r,60px));top:calc(var(--y) - var(--r,60px));border-radius:50%;border:3px solid var(--gold-l);animation:tpulse 1.4s ease-out infinite;pointer-events:none}
@keyframes tpulse{0%{transform:scale(.92);opacity:1}100%{transform:scale(1.35);opacity:0}}
.tour-hand{position:absolute;width:68px;height:68px;left:calc(var(--x) - 8px);top:calc(var(--y) + 4px);fill:#fffbf2;stroke:#0a3326;filter:drop-shadow(0 6px 8px rgba(0,0,0,.5));animation:tap 1.4s ease-in-out infinite;pointer-events:none}
@keyframes tap{0%,100%{transform:translate(0,0)}50%{transform:translate(-6px,-12px)}}
.tour-bubble{position:absolute;left:18px;right:18px;max-width:440px;margin:0 auto;background:var(--paper);color:var(--ink);border-radius:24px;padding:16px;box-shadow:0 18px 30px -10px rgba(0,0,0,.6)}
.tour-bubble b{display:flex;align-items:center;gap:8px;font-size:20px;color:var(--g800);line-height:1.3}
.tour-bubble p{margin:6px 0 12px;font-size:15px;color:var(--muted)}
.tour-bubble .nav{display:flex;align-items:center;gap:8px}
.dots{display:flex;gap:6px}.dots i{width:8px;height:8px;border-radius:50%;background:var(--line)}.dots i.on{background:var(--gold);width:22px;border-radius:9px}
.tour-bubble .skip{color:var(--muted);font-weight:800;font-size:14px;padding:8px}
.tour-bubble .spk{margin-inline-start:auto;width:44px;height:44px;border-radius:14px;background:var(--foil);display:grid;place-items:center;color:#2e2106}
.tour-bubble .nx{background:var(--g700);color:#fff;font-weight:800;padding:12px 18px;border-radius:15px;font-size:15px}
.akr[data-theme="dark"] .tour-bubble .nx{color:#06231a}

/* ---------- bottom sheets ---------- */
.sheet{border:0;padding:0 16px calc(20px + env(safe-area-inset-bottom));margin:auto auto 0;width:100%;max-width:680px;max-height:88dvh;border-radius:28px 28px 0 0;background:var(--bg);color:var(--ink)}
.sheet::backdrop{background:rgba(4,20,14,.6)}
.sheet[open]{animation:up .24s ease}
@keyframes up{from{transform:translateY(50px);opacity:.4}to{transform:none;opacity:1}}
.sheet-top{position:sticky;top:0;background:var(--bg);display:flex;justify-content:space-between;align-items:center;padding:16px 0 10px;z-index:1}
.sheet-top:before{content:"";position:absolute;top:7px;left:50%;width:44px;height:5px;margin-left:-22px;border-radius:5px;background:var(--line)}
.sheet-top h2{margin:0;font-size:24px}
.sheet h3{margin:18px 0 10px;color:var(--muted);font-size:14px;font-weight:700}
.sheet .hint{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:13.5px;margin:-4px 0 10px}
.sheet .hint svg{width:18px;height:18px;color:var(--gold-d)}
.grid-btns{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.grid-btns.three{grid-template-columns:repeat(3,1fr)}
.grid-btns button{min-height:64px;border-radius:18px;border:1.5px solid var(--line);background:var(--card);font-size:20px;font-weight:800;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;line-height:1.2}
.grid-btns button svg{width:20px;height:20px;color:var(--gold-d)}
.grid-btns button small{font-size:12px;font-weight:600;color:var(--muted)}
.grid-btns button[aria-pressed="true"]{border-color:var(--gold);background:var(--gold-50);color:var(--g800);box-shadow:inset 0 0 0 1px var(--gold)}
.rec-list{display:flex;flex-direction:column;gap:8px}
.rec{display:flex;align-items:center;gap:8px;padding:8px;border-radius:20px;border:1.5px solid var(--line);background:var(--card);min-height:66px}
.rec.sel{border-color:var(--gold);box-shadow:0 0 0 2px rgba(201,162,78,.3);background:var(--gold-50)}
.rec-pick{flex:1;display:flex;align-items:center;gap:10px;text-align:start;line-height:1.3;min-height:48px;min-width:0}
.rec-pick b{display:block;font-size:15.5px}
.rec-pick small{font-size:12.5px;color:var(--muted)}
.rec-pick .size{display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:800;color:var(--g700);background:var(--g50);padding:2px 7px;border-radius:8px;margin-top:3px}
.rec-pick .size svg{width:12px;height:12px}
.rec-sample{display:flex;align-items:center;gap:4px;padding:10px 11px;border-radius:14px;background:var(--g700);color:#fff;font-size:12.5px;font-weight:800;white-space:nowrap;flex:none}
.rec-sample svg{width:15px;height:15px}
.rec-sample.on{background:var(--foil);color:#2e2106}
.akr[data-theme="dark"] .rec-sample{color:#06231a}
.rec-save{font-size:13px;font-weight:800;color:var(--g700);display:flex;align-items:center;gap:4px;padding:10px;border-radius:13px;background:var(--g50);white-space:nowrap;flex:none}
.rec-save svg{width:17px;height:17px}
.rec-save.saved{background:none;color:var(--ok)}
.allbtn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:14px;border-radius:18px;border:1.5px dashed var(--gold);color:var(--gold-d);font-weight:800;margin-top:10px}
.toggle{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:60px;padding:8px 14px;border-radius:18px;background:var(--card);border:1px solid var(--line);margin-bottom:8px;font-weight:800;font-size:16px;text-align:start}
.toggle i{width:52px;height:30px;border-radius:99px;background:var(--line);position:relative;flex:none;transition:.2s}
.toggle i::after{content:"";position:absolute;top:3px;inset-inline-start:3px;width:24px;height:24px;border-radius:50%;background:#fff;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.toggle[aria-pressed="true"] i{background:var(--g700)}
.toggle[aria-pressed="true"] i::after{inset-inline-start:25px}
.size-row{display:flex;align-items:center;gap:10px}
.size-row button{width:60px;height:60px;border-radius:18px;background:var(--card);border:1.5px solid var(--line);font-weight:800}
.size-row .demo{flex:1;text-align:center;font-family:var(--fa);font-size:var(--ar);line-height:1.6;direction:rtl}
.sheet .btn{margin-top:12px}
.rate-box{text-align:center;padding:10px 0 4px}
.rate-box .stars{font-size:42px;letter-spacing:4px;color:transparent;background:var(--foil);-webkit-background-clip:text;background-clip:text}
/* picture screens: before a permission, help */
.pic{text-align:center;padding:6px 6px 0}
.pic .illus{width:150px;height:150px;margin:4px auto 0;display:block}
.pic h2{font-size:27px;margin:8px 0 6px}
.pic p{color:var(--muted);margin:0 0 12px;font-size:15.5px}
.mock-allow{border-radius:20px;background:var(--card);border:1px solid var(--line);padding:12px;text-align:start;font-size:13.5px;color:var(--muted);position:relative;margin:4px 0 6px}
.mock-allow .ab{margin-top:8px;padding:11px;border-radius:13px;background:#dfe5ff;color:#1b2b6b;text-align:center;font-weight:800}
.mock-allow .ab2{margin-top:6px;padding:11px;border-radius:13px;background:#eef0f7;color:#555;text-align:center;font-weight:700}
.mock-allow .finger{position:absolute;inset-inline-end:34px;top:40px;width:46px;height:46px;fill:#fffbf2;stroke:#0a3326;animation:tap 1.4s ease-in-out infinite}
.spkrow{display:inline-flex;align-items:center;gap:8px;margin:0 0 10px;color:var(--g700);font-weight:800;font-size:14px;padding:6px 12px 6px 6px;border-radius:14px;background:var(--g50)}
.spkrow i{width:32px;height:32px;border-radius:11px;background:var(--foil);display:grid;place-items:center;color:#2e2106}
.spkrow svg{width:18px;height:18px}

/* toast: a picture and a few words after every action */
.toast{position:fixed;left:50%;bottom:calc(240px + var(--ad-h,0px) + env(safe-area-inset-bottom));transform:translate(-50%,20px);opacity:0;pointer-events:none;z-index:90;
  display:flex;align-items:center;gap:10px;background:#062419;color:#f6ecd0;border:1px solid rgba(241,220,156,.3);
  padding:11px 16px;border-radius:16px;font-size:15px;font-weight:800;transition:.25s;max-width:calc(100% - 32px);box-shadow:0 14px 26px -10px rgba(0,0,0,.55)}
.toast svg{width:22px;height:22px;color:var(--gold-l);flex:none}
.toast.show{opacity:1;transform:translate(-50%,0)}

@media (min-width:700px){
  .checks{grid-template-columns:repeat(3,1fr)}
  .tabs{left:50%;transform:translateX(-50%);width:680px;border:1px solid var(--line);border-bottom:0;border-radius:24px 24px 0 0}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* eight-fold star-and-cross lattice textures (generated; see the design board) */
.akr{--lattice:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='46'%3E%3Cg fill='none' stroke='%23c9a24e' stroke-opacity='0.13' stroke-width='1'%3E%3Cpolygon points='28.46,9.83 28.53,17.47 36.17,17.54 30.82,23.00 36.17,28.46 28.53,28.53 28.46,36.17 23.00,30.82 17.54,36.17 17.47,28.53 9.83,28.46 15.18,23.00 9.83,17.54 17.47,17.47 17.54,9.83 23.00,15.18'/%3E%3Cpath d='M0 0L8.3 8.3M46 0L37.7 8.3M0 46L8.3 37.7M46 46L37.7 37.7'/%3E%3Ccircle cx='23.0' cy='23.0' r='4.1'/%3E%3C/g%3E%3C/svg%3E");--lattice-gold:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='46'%3E%3Cg fill='none' stroke='%23f1dc9c' stroke-opacity='0.08' stroke-width='1'%3E%3Cpolygon points='28.46,9.83 28.53,17.47 36.17,17.54 30.82,23.00 36.17,28.46 28.53,28.53 28.46,36.17 23.00,30.82 17.54,36.17 17.47,28.53 9.83,28.46 15.18,23.00 9.83,17.54 17.47,17.47 17.54,9.83 23.00,15.18'/%3E%3Cpath d='M0 0L8.3 8.3M46 0L37.7 8.3M0 46L8.3 37.7M46 46L37.7 37.7'/%3E%3Ccircle cx='23.0' cy='23.0' r='4.1'/%3E%3C/g%3E%3C/svg%3E");--lattice-white:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='46'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.14' stroke-width='1'%3E%3Cpolygon points='28.46,9.83 28.53,17.47 36.17,17.54 30.82,23.00 36.17,28.46 28.53,28.53 28.46,36.17 23.00,30.82 17.54,36.17 17.47,28.53 9.83,28.46 15.18,23.00 9.83,17.54 17.47,17.47 17.54,9.83 23.00,15.18'/%3E%3Cpath d='M0 0L8.3 8.3M46 0L37.7 8.3M0 46L8.3 37.7M46 46L37.7 37.7'/%3E%3Ccircle cx='23.0' cy='23.0' r='4.1'/%3E%3C/g%3E%3C/svg%3E")}
@media (prefers-color-scheme:dark){.akr:not([data-theme="light"]){--lattice:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='46'%3E%3Cg fill='none' stroke='%23f1dc9c' stroke-opacity='0.045' stroke-width='1'%3E%3Cpolygon points='28.46,9.83 28.53,17.47 36.17,17.54 30.82,23.00 36.17,28.46 28.53,28.53 28.46,36.17 23.00,30.82 17.54,36.17 17.47,28.53 9.83,28.46 15.18,23.00 9.83,17.54 17.47,17.47 17.54,9.83 23.00,15.18'/%3E%3Cpath d='M0 0L8.3 8.3M46 0L37.7 8.3M0 46L8.3 37.7M46 46L37.7 37.7'/%3E%3Ccircle cx='23.0' cy='23.0' r='4.1'/%3E%3C/g%3E%3C/svg%3E")}}
.akr[data-theme="dark"]{--lattice:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='46'%3E%3Cg fill='none' stroke='%23f1dc9c' stroke-opacity='0.045' stroke-width='1'%3E%3Cpolygon points='28.46,9.83 28.53,17.47 36.17,17.54 30.82,23.00 36.17,28.46 28.53,28.53 28.46,36.17 23.00,30.82 17.54,36.17 17.47,28.53 9.83,28.46 15.18,23.00 9.83,17.54 17.47,17.47 17.54,9.83 23.00,15.18'/%3E%3Cpath d='M0 0L8.3 8.3M46 0L37.7 8.3M0 46L8.3 37.7M46 46L37.7 37.7'/%3E%3Ccircle cx='23.0' cy='23.0' r='4.1'/%3E%3C/g%3E%3C/svg%3E")}

/* Repeat after me */
.echo-state{display:flex;align-items:center;gap:14px;margin:-2px 0 10px;padding:10px 12px;border-radius:18px;background:var(--g50);transition:background .3s}
.echo-state.you{background:var(--gold-50);box-shadow:inset 0 0 0 1.5px var(--gold)}
.echo-state.done{background:var(--gold-50)}
.es-ic{position:relative;width:64px;height:64px;flex:none;display:grid;place-items:center;border-radius:50%;background:var(--card);color:var(--g700)}
.echo-state.you .es-ic{background:var(--foil);color:#3a2a08;animation:speak 1.6s ease-in-out infinite}
.echo-state.listen .es-ic{animation:speak 1.6s ease-in-out infinite}
.es-i{width:32px;height:32px}
.es-ring{position:absolute;inset:0;width:64px;height:64px;transform:rotate(-90deg)}
.es-ring circle{fill:none;stroke:var(--g700);stroke-width:3.5;stroke-linecap:round;stroke-dasharray:182.2;stroke-dashoffset:182.2}
.echo-state.you .es-ring circle{stroke:var(--g800)}
.es-t{display:flex;flex-direction:column;gap:2px;font-weight:800;font-size:18px;color:var(--g800);line-height:1.3}
.echo-state.idle .es-t{font-weight:700;font-size:15.5px;color:var(--muted)}
.es-n{font-size:15px;color:var(--gold-d)}
.echo-set{margin:20px 2px 0}
.echo-row>span{display:block;font-weight:800;font-size:14.5px;color:var(--muted);margin:0 4px 6px}
.echo-row .lv{margin-bottom:12px}

/* sheets: feedback and the story */
.bc-ico.big{width:96px;height:96px;margin:2px auto 0;border-radius:28px}
.bc-ico.big svg{width:48px;height:48px}
.fb-row{display:flex;align-items:center;gap:14px;width:100%;padding:10px 14px 10px 10px;margin:0 0 10px;border-radius:20px;background:var(--card);border:1px solid var(--line);text-align:start}
.fb-row .bc-ico{width:52px;height:52px;border-radius:16px}
.fb-row .bc-ico svg{width:28px;height:28px}
.fb-row b{flex:1;font-size:17px;color:var(--ink)}
.fb-row .go{width:22px;height:22px;color:var(--gold-d)}
.scene{text-align:center;padding:2px 6px 0;min-height:340px}
.scene p{font-size:19px;line-height:1.6;color:var(--ink);margin:12px 0 4px}
.scene h2{font-size:24px;margin:12px 0 18px}
.st-chip{display:inline-block;margin-top:14px;padding:5px 14px;border-radius:99px;background:var(--gold-50);color:var(--gold-d);font-weight:800;font-size:14px}
.st-dots{display:flex;justify-content:center;gap:6px;margin:0 0 14px}
.st-dots i{width:8px;height:8px;border-radius:50%;background:var(--line)}
.st-dots i.past{background:var(--gold)}
.st-dots i.on{width:22px;border-radius:99px;background:var(--g700)}
.st-nav{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:16px 0 4px}
.st-nav>span{width:56px}
.st-nav .round.main svg{margin:0}
.st-nav .spkrow{margin:0}
.scene .grade{margin-top:14px}
.story-card{display:flex;align-items:center;gap:14px;width:100%;padding:16px;margin:0 0 22px;border-radius:24px;text-align:start;color:#f6ecd0;
  background:var(--lattice-gold),linear-gradient(150deg,#123d5e,#0a2236);background-size:26px 26px,auto;box-shadow:0 14px 26px -16px rgba(5,20,35,.8);border:1px solid rgba(201,162,78,.45)}
.sc-art{position:relative;width:76px;height:76px;flex:none;border-radius:22px;background:rgba(255,255,255,.07);border:1px solid rgba(241,220,156,.35)}
.sc-art svg{position:absolute;color:var(--gold-l)}
.sc-art svg:first-child{width:30px;height:30px;top:9px;inset-inline-start:9px}
.sc-art svg:last-child{width:38px;height:38px;bottom:8px;inset-inline-end:8px}
.sc-txt{display:flex;flex-direction:column;gap:3px;flex:1}
.sc-txt b{font-family:var(--fd);font-weight:700;font-size:24px;line-height:1.15;color:#fff6dc}
.sc-txt small{font-size:13.5px;opacity:.85}
.sc-go{display:inline-flex;align-items:center;gap:4px;margin-top:6px;font-weight:800;font-size:14.5px;color:var(--gold-l)}
.sc-go svg{width:16px;height:16px}
.fb-btn{margin-top:12px}

/* meaning language */
.ml-grid{grid-template-columns:repeat(2,1fr)}
.ml-grid button{font-size:16px;font-weight:700;padding:14px 6px}
.ml-grid button[lang="ur"]{font-family:var(--fu);font-size:20px;padding:8px 6px}
.card p[dir="rtl"]{font-family:var(--fu);font-size:18px;line-height:2}

/* Indo-Pak script */
.akr.ip{--fa:"DK IndoPak","Amiri Quran",serif}
.akr.ip .size-row .demo{font-family:"Amiri Quran",serif}
.scr-grid{grid-template-columns:repeat(2,1fr)}
.scr-grid button{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 6px}
.scr-ar{font-family:"Amiri Quran",serif;font-size:22px;line-height:1.9;direction:rtl;color:var(--g800)}
.scr-ar.ipf{font-family:"DK IndoPak",serif}
.scr-grid small{font-size:13.5px;font-weight:800}

/* "Put it on your home screen" */
#wcard .wd-cta{margin-top:16px}

/* Reciter medallions: Arabic name in gold Ruqaa on the reciter's own colour, with his country's flag */
.avatar.rv{width:50px;height:50px;background:radial-gradient(circle at 32% 26%,rgba(255,255,255,.22),rgba(255,255,255,0) 58%),radial-gradient(circle at 70% 85%,rgba(0,0,0,.28),rgba(0,0,0,0) 60%),var(--av)}
.avatar.rv b{font-family:var(--fc);font-weight:700;line-height:1;color:transparent;background:linear-gradient(160deg,#fff1c4 0%,#e9cf86 40%,#c9a24e 75%);-webkit-background-clip:text;background-clip:text;
  direction:rtl;white-space:nowrap;max-width:46px;text-align:center;padding-bottom:4px;filter:drop-shadow(0 1px 0 rgba(0,0,0,.35))}
.avatar.rv b.lat{font-family:var(--fb);font-weight:800;direction:ltr;padding:0;letter-spacing:-.02em}
.avatar .flag{position:absolute;inset-inline-end:-4px;bottom:-3px;width:19px;height:19px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px var(--card),0 1px 3px rgba(0,0,0,.25)}
.rec-chip .avatar.rv{width:54px;height:54px}
.rec-chip .rc-t{min-width:0}
.rec-chip .rc-t small{display:flex;align-items:center;gap:6px;margin-top:2px;font-size:12.5px}
.rec-chip .rc-t small span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rec-chip .chg{flex-direction:column;gap:2px;padding:7px 10px;font-size:12px;line-height:1.1;text-align:center;max-width:84px;white-space:normal}
.rec-chip .chg svg{width:22px;height:22px}
.akr[dir="rtl"] .rec-chip .chg svg{transform:none}
.wave{display:none;align-items:flex-end;gap:2px;height:12px;flex:none}
.wave i{width:3px;border-radius:2px;background:var(--gold);animation:wv 1s ease-in-out infinite}
.wave i:nth-child(2){animation-delay:-.25s}.wave i:nth-child(3){animation-delay:-.5s}.wave i:nth-child(4){animation-delay:-.75s}
.akr.playing .rec-chip .wave{display:flex}
@keyframes wv{0%,100%{height:3px}50%{height:12px}}
@media (prefers-reduced-motion:reduce){.wave i{animation:none;height:8px}}

/* The display serif (Cormorant Garamond) tops out at weight 700; a hairline outline in the text's own colour makes it read bolder */
h2,.brand b,.pathcard b,.datecard .hij,.stat b,.counter-card h3,.counter span,.sc-txt b{-webkit-text-stroke:.45px currentColor}

/* Settings: section headers with a gold icon, flags on the language buttons, a tick on the chosen one, theme previews */
.sheet h3.sh{display:flex;align-items:center;gap:9px;margin:22px 0 10px;color:var(--g800);font-size:15px;font-weight:800}
.sheet h3.sh>span{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;flex:none;background:var(--gold-50);color:var(--gold-d);box-shadow:inset 0 0 0 1px rgba(201,162,78,.35)}
.sheet h3.sh>span svg{width:17px;height:17px}
.sheet h3.sh .aa{font:800 13px/1 var(--fb);letter-spacing:-.3px}
.grid-btns button[aria-pressed="true"]{position:relative}
.lang-grid button[aria-pressed="true"]:after,.ml-grid button[aria-pressed="true"]:after,.scr-grid button[aria-pressed="true"]:after,.theme-grid button[aria-pressed="true"]:after{
  content:"";position:absolute;top:-7px;inset-inline-end:-6px;width:22px;height:22px;border-radius:50%;box-shadow:0 0 0 2px var(--card);
  background:var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat}
.lang-grid,.ml-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.lang-grid button,.ml-grid button{min-width:0}
.lang-grid button,.ml-grid button{flex-direction:row;justify-content:flex-start;gap:10px;padding:10px 12px;min-height:60px;text-align:start}
.lflag{width:30px;height:30px;border-radius:50%;flex:none;object-fit:cover;box-shadow:0 0 0 1.5px var(--card),0 0 0 2.5px rgba(201,162,78,.55),0 2px 5px rgba(0,0,0,.15)}
.ln{display:flex;flex-direction:column;min-width:0;line-height:1.2}
.ln b{font-size:17px;font-weight:800;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ml-grid .ln b{font-size:15.5px;white-space:normal;overflow-wrap:anywhere}
.lang-grid .ln b{white-space:normal;overflow-wrap:anywhere}
.ln b[lang="ur"]{font-family:var(--fu);font-size:19px;line-height:1.7;font-weight:400}
.ln small{font-size:11.5px;font-weight:700;color:var(--muted);margin-top:1px}
.ml-grid button[lang="ur"]{font-family:inherit;font-size:inherit;padding:10px 12px}
.tog-card{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:4px 4px 0;overflow:hidden}
.tog-card .toggle{border:0;border-radius:16px;margin-bottom:4px;background:transparent}
.tog-card .toggle+.toggle{border-top:1px solid var(--line);border-radius:0}
.theme-grid button{font-size:15px;gap:7px;padding:12px 4px}
.theme-grid .sw{width:44px;height:30px;border-radius:10px;display:grid;place-items:center;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.theme-grid .sw svg{width:16px;height:16px}
.sw-light{background:#fbf6ea;color:#c9a24e}
.sw-dark{background:#0d1d17;color:#f1dc9c}
.sw-auto{background:linear-gradient(135deg,#fbf6ea 50%,#0d1d17 50%);color:#c9a24e}

.fine.ver{margin-top:4px;opacity:.75;font-weight:700;letter-spacing:.3px}

/* the display serif draws old-style numbers ("1" looks like "I"); use normal ones */
h2,.brand b,.pathcard b,.datecard .hij,.stat b,.counter-card h3,.counter span,.sc-txt b{font-variant-numeric:lining-nums}
/* first-open language screen: flags */
.ls-list .lflag{width:34px;height:34px;box-shadow:0 0 0 2px rgba(241,220,156,.35),0 2px 6px rgba(0,0,0,.35)}
.ls-list button.guess .lflag{box-shadow:0 0 0 2.5px var(--gold-l),0 2px 6px rgba(0,0,0,.35)}
/* Learn: one tap to the next part */
.path-go{margin-top:14px;width:100%;position:relative;font-size:16px}
.path-go svg{width:18px;height:18px}

/* language names keep their own script's font when the app is in Urdu (the page font there is Nastaliq) */
.ln b:not([lang="ur"]),.ln small,.ls-list button span:not([style]){font-family:var(--fb)}

.fine.ver a{color:inherit;text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:3px}

/* touch targets of at least 48dp (Android accessibility guideline; Play's pre-launch report checks it) */
.icon-btn{width:48px;height:48px}
.stepper button{min-width:48px;height:48px}
.arc .lbls button{min-height:48px}
.link-btn{min-height:48px;padding:12px 4px}
.rec-save,.rec-sample{min-height:48px;min-width:48px;justify-content:center}
/* the app name stays on one line on narrow phones */
.brand b{white-space:nowrap;font-size:clamp(18px,5.6vw,26px)}
.brand>span,.brand>div{min-width:0}
.brand{min-width:0}
@media (max-width:400px){
  .top{gap:4px;padding-left:12px;padding-right:10px}
  .brand{gap:8px}
  .brand img{width:36px;height:36px}
  .brand b{font-size:clamp(17px,5.3vw,22px)}
}

/* Arabic interface: a clear Naskh face (system Arabic sans for text, Amiri for headings); Nastaliq stays Urdu-only */
.akr[lang="ar"]{font-family:var(--fb),"Noto Naskh Arabic UI","Noto Sans Arabic",sans-serif;line-height:1.75}
.akr[lang="ar"] h2,.akr[lang="ar"] h3,.akr[lang="ar"] .brand b,.akr[lang="ar"] .datecard .hij{font-family:"Amiri",var(--fb);-webkit-text-stroke:0}
/* first-open screen: "More languages" */
.ls-list .ls-more{justify-content:center;font-size:16px;opacity:.9}
.ls-list .ls-more .ck{display:none}
.ls-rest{display:grid;gap:10px}

/* Arabic interface: the part card shows the part itself in Quran script (no meaning line) */
.part .mean.ar-part{font-family:var(--fa);font-size:22px;line-height:1.9;color:var(--ink)}

/* Repeat: any number */
.rep-own{display:flex;gap:10px;margin-top:12px}
.rep-own input{flex:1;min-width:0;height:54px;border-radius:16px;border:1.5px solid var(--gold);background:var(--card);color:var(--ink);font:700 20px var(--fb);padding:0 16px;text-align:center}
.rep-own .btn{min-width:96px}

/* Before sleep */
.night-card{margin:14px 0 0;background:linear-gradient(135deg,#0d3a2c,#0a2a22);border-color:rgba(201,162,78,.35);color:#f4e8c8}
.night-card small{color:rgba(244,232,200,.72)}
.night-card .go2{background:var(--foil);color:#3a2a08}
.ns-chips{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:2px 0 10px}
.ns-chip{padding:5px 11px;border-radius:99px;background:var(--g50);color:var(--muted);font-weight:700;font-size:13px}
.ns-chip.past{color:var(--g700)}
.ns-chip.on{background:var(--gold-50);color:var(--gold-d);box-shadow:0 0 0 1.5px rgba(201,162,78,.6)}
.ns-now{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.ns-now b{font-size:19px}
.ns-now small{color:var(--muted);font-weight:700}
.ns-x{padding:2px 9px;border-radius:99px;background:var(--g700);color:#fff;font-weight:800;font-size:13px}
.ns-card{background:var(--paper,var(--card));border:1px solid var(--line);border-radius:22px;padding:12px 14px;max-height:36vh;overflow-y:auto}
.ns-ar{font-family:"Amiri Quran","Amiri",serif;font-size:calc(var(--ar) * .9);text-align:center;text-align-last:center}
.ns-ar .nw{border-radius:9px;padding:0 3px;display:inline-block;transition:background .15s}
.ns-ar .nw.on{background:var(--hi);color:var(--hi-ink);box-shadow:0 0 0 2px rgba(201,162,78,.35)}
.ns-tl{font-weight:800;color:var(--g700);font-size:15px;line-height:1.4;margin:8px 0 0;font-style:italic;text-align:center}
.ns-mean{font-size:14.5px;line-height:1.45;margin:4px 0 0;text-align:center}
.ns-mean[dir="rtl"]{font-family:var(--fu);font-size:17px;line-height:1.9}
.ns-ctl{display:flex;flex-direction:column;align-items:center;gap:6px;margin:14px 0 4px}
.ns-ctl .round.main svg{margin:0}
.ns-ctl small{color:var(--muted);font-weight:700}

/* the part panel can be folded away to read the whole verse */
.part-x{position:absolute;top:-12px;inset-inline-end:-6px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--card);
  border:1px solid var(--line);color:var(--muted);box-shadow:0 4px 10px -6px rgba(10,51,38,.6)}
.part-x::after{content:"";position:absolute;inset:-9px}
.part-x svg{width:15px;height:15px}
.part.min{width:max-content;margin-inline-start:auto;padding:0;background:none;border:0;box-shadow:none;backdrop-filter:none}
.part-pill{display:flex;align-items:center;gap:8px;min-height:48px;padding:6px 14px 6px 8px;border-radius:99px;background:var(--card);border:1px solid var(--line);
  box-shadow:0 10px 24px -14px rgba(10,51,38,.7);font-weight:800;color:var(--g700);font-size:15px}
.part-pill .pn{width:30px;height:30px}
.part-pill .up{width:18px;height:18px;transform:rotate(-90deg)}

:host{all:initial;display:block}
.akr{position:relative;display:block;contain:layout paint;isolation:isolate}
.akr .top,.akr .tabs{display:none!important}
.akr [data-nightset],.akr #rem,.akr #wcard{display:none!important}
.akr{overscroll-behavior:auto!important;touch-action:pan-y pinch-zoom}
/* overflow:clip, not hidden: a hidden box is a scroll container, and with the app's overscroll-behavior it kept swipes
   from reaching the page, so the page would not scroll from the first screen */
.akr-listen{height:calc(100svh - var(--akapp-top,124px));min-height:480px;max-height:940px;overflow:clip}
.akr-listen .app{height:100%;min-height:0;overflow:clip}
.akr-listen .akmain{padding:12px 14px 0}
.akr-listen #read-list{visibility:hidden}.akr-listen.akfit #read-list{visibility:visible}
.akr-listen .view{animation:none!important}
.akr-listen .verse{font-size:var(--arfit,clamp(17px,calc((100svh - 380px) / 16),40px));line-height:1.85;word-spacing:.04em}
.akr-listen .mushaf{position:relative}
.akr .ak-big{position:absolute;top:6px;left:8px;z-index:2;min-width:44px;height:40px;padding:0 10px;border-radius:12px;border:1px solid var(--line);background:var(--paper);color:var(--g700);font:800 15px var(--fb);box-shadow:var(--sh);cursor:pointer}
.akr-listen #tj-legend{display:none}
/* a compact player at the very bottom (no tab bar under it on the web), so the verse gets the space */
.akr-listen .player{bottom:calc(8px + env(safe-area-inset-bottom));padding:6px 6px 6px;border-radius:24px}
.akr-listen .p-status{display:none}
.akr-listen .play{width:62px;height:62px}
.akr-listen .play .core{inset:8px}
.akr-listen .play .core svg{width:26px;height:26px}
.akr-listen .p-btn{min-width:52px;gap:2px;font-size:11px}
.akr-listen .p-btn .ic{width:34px;height:34px;border-radius:11px}
.akr-listen .p-btn .ic svg{width:19px;height:19px}
.akr-listen .part{bottom:calc(96px + env(safe-area-inset-bottom));margin-top:8px}
.akr-listen .part-pill{min-height:44px;padding:4px 12px 4px 6px;font-size:14px;background:linear-gradient(160deg,#165c45,#0a3326);color:#fff;border:1px solid rgba(201,162,78,.6)}
.akr-listen .part-pill .up{color:#f1dc9c}
/* the word being recited: a clear gold highlight */
.akr-listen .verse .w.on{background:linear-gradient(180deg,#fff0b8,#f5cf5a);box-shadow:0 0 0 2px #e9b93a,0 4px 10px -4px rgba(138,106,40,.7);color:#0a3326}
/* the two things to take away, in gold */
.akr-listen .p-link .ic{background:var(--foil);border-color:rgba(255,241,196,.8);box-shadow:0 6px 12px -6px rgba(0,0,0,.6)}
.akr-listen .p-link .ic svg{color:#3a2a08}
.akr-listen .p-link{color:#ffe7a3}
.akr a.p-btn{text-decoration:none;color:inherit;-webkit-tap-highlight-color:transparent}
/* wide desktop: the player moves up between the reciter and Meaning, the page widens, the verse gets everything below */
@media (min-width:1100px){
  .akr-listen .akmain{max-width:1240px!important}
  .akr-listen #v-listen{grid-template-rows:minmax(80px,auto) 1fr!important}
  .akr-listen .player{top:16px!important;bottom:auto!important;left:auto!important;right:204px!important;transform:none!important}
  .akr-listen .p-row{gap:8px!important}
  .akr-listen .p-btn{min-width:52px!important}
  .akr-listen .rec-chip .chg:after{display:none!important}
  .akr-listen #part:not(.min){position:absolute!important;top:auto!important;bottom:14px!important;left:50%;right:auto;transform:translateX(-50%);z-index:7;width:min(760px,calc(100% - 64px));max-width:none;height:auto;min-height:0;margin:0!important;padding:8px 10px 8px 14px;box-shadow:0 18px 40px -16px rgba(0,0,0,.55)}
  .akr-listen #part:not(.min) .pbtns{flex-direction:row}
  .akr-listen #part:not(.min) .part-x{top:-10px}
  .akr-listen #mushaf{margin-top:12px!important}
}
/* tablet and desktop: a centred mushaf page, like a printed Quran, on an emerald field with the gold lattice.
   Top strip: reciter and the meaning of the current part; the page; the player bar under it */
@media (min-width:768px){
  .akr.akr-listen{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='46'%3E%3Cg fill='none' stroke='%23f1dc9c' stroke-opacity='0.10' stroke-width='1'%3E%3Cpolygon points='28.46,9.83 28.53,17.47 36.17,17.54 30.82,23.00 36.17,28.46 28.53,28.53 28.46,36.17 23.00,30.82 17.54,36.17 17.47,28.53 9.83,28.46 15.18,23.00 9.83,17.54 17.47,17.47 17.54,9.83 23.00,15.18'/%3E%3Ccircle cx='23.0' cy='23.0' r='4.1'/%3E%3C/g%3E%3C/svg%3E") 0 0/46px 46px,
    radial-gradient(80% 70% at 50% 40%,#16624a 0%,#0c3d2e 60%,#072a1f 100%)}
  .akr.akr-listen:before{display:none}
  .akr-listen .app{max-width:none}
  .akr-listen .akmain{max-width:980px;margin:0 auto;padding:18px 24px 0}
  .akr-listen #v-listen{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:14px;align-items:center}
  .akr-listen #rec-chip{grid-column:1;grid-row:1;margin:0;width:auto;max-width:none;justify-self:start;display:inline-flex;gap:12px;padding:6px 6px 6px 6px;border-radius:999px;background:rgba(255,255,255,.07);border-color:rgba(241,220,156,.45);box-shadow:none}
  .akr-listen #rec-chip .rc-t{flex:0 1 auto;padding-right:4px}
  .akr-listen #rec-chip .chg{border-radius:999px;padding:6px 14px}
  .akr-listen #part{grid-column:2;grid-row:1;position:static;margin:0}
  .akr-listen #part:not(.min){max-width:440px;padding:8px 10px 8px 12px}
  .akr-listen #mushaf{grid-column:1 / -1;grid-row:2;margin:18px 10px 0;box-shadow:0 0 0 1px #e2cf9f,0 0 0 5px var(--paper),0 0 0 6.5px var(--gold),0 0 0 9px var(--paper),0 0 0 10px #c9a24e,0 30px 60px -30px rgba(0,0,0,.65)}
  .akr-listen #tj-legend{display:none}
  .akr-listen .part-pill{background:rgba(255,255,255,.08);border-color:rgba(241,220,156,.55)}
  .akr-listen .player{width:auto;max-width:calc(100% - 48px);bottom:14px;padding:6px 18px;border-radius:999px;background:rgba(6,36,25,.8);border:1px solid rgba(241,220,156,.4);backdrop-filter:blur(6px);box-shadow:0 18px 36px -18px rgba(0,0,0,.7)}
  .akr-listen .p-row{justify-content:center;gap:12px}
  .akr-listen .p-btn{min-width:58px}
  .akr-listen #p-mp3{margin-left:14px;position:relative}
  .akr-listen #p-mp3:before{content:"";position:absolute;left:-14px;top:6px;bottom:6px;width:1px;background:rgba(241,220,156,.35)}
  .akr-listen .play{width:64px;height:64px}
  .akr-listen .rec-chip .chg:after{display:block}
}
/* app-only parts nobody uses on a website: app language and colour theme (the page is English and light), rate / share /
   feedback / app version, saving voices offline (the MP3 pages do that), streak stats and the week strip (they need daily
   visits), and the Virtues texts the page already has as sections (only the story stays) */
.akr .sh:has(+ .lang-grid),.akr .lang-grid,.akr .sh:has(+ .theme-grid),.akr .theme-grid,.akr #sheet-body [data-rate],
.akr #sheet-body:has(.scr-grid) [data-share],.akr #sheet-body [data-feedback],.akr #sheet-body [data-privacy],.akr #sheet-body:has(.scr-grid) .fine,
.akr .rec-save,.akr .rec .size,.akr #stats,.akr #week,.akr #why-body > :not(.story-card){display:none!important}
/* first screen: the reciter card in emerald and gold, "Change voice" as the gold button it is */
.akr-listen{background:radial-gradient(120% 60% at 50% 0%,rgba(22,92,69,.10),transparent 70%),var(--bg)}
.akr-listen .rec-chip{background:linear-gradient(160deg,#165c45,#0a3326);border:1px solid rgba(201,162,78,.55);color:#fff;box-shadow:0 14px 28px -18px rgba(6,36,25,.8)}
.akr-listen .rec-chip .rc-t b{color:#fff}
.akr-listen .rec-chip .rc-t small,.akr-listen .rec-chip #rec-from{color:#f1dc9c}
.akr-listen .rec-chip .chg{background:var(--foil);color:#3a2a08;border-radius:16px;padding:8px 12px;font-weight:800;box-shadow:0 8px 16px -8px rgba(138,106,40,.9);animation:akpulse 2.2s ease-in-out 1.5s 3}
.akr-listen .rec-chip .chg:after{content:"53 voices";font-size:11px;font-weight:700;opacity:.7;line-height:1.1}
@keyframes akpulse{0%,100%{box-shadow:0 8px 16px -8px rgba(138,106,40,.9),0 0 0 0 rgba(233,207,134,.7)}50%{box-shadow:0 8px 16px -8px rgba(138,106,40,.9),0 0 0 9px rgba(233,207,134,0)}}
.akr-listen .mushaf{box-shadow:0 0 0 1px #e2cf9f,0 0 0 5px var(--paper),0 0 0 6.5px var(--gold),0 0 0 9px var(--paper),0 0 0 10px #e2cf9f,0 22px 40px -28px rgba(10,51,38,.55)}
.akr-listen .rec-chip{padding:5px 8px 5px 5px;margin-bottom:8px;border-radius:16px;gap:10px}
.akr-listen .rec-chip .rc-t b{font-size:15.5px;line-height:1.25}.akr-listen .rec-chip .rc-t small{font-size:12px}
.akr-listen .rec-chip .avatar.rv{width:40px;height:40px;flex:none}
.akr-listen .rec-chip .avatar.rv b{font-size:12px!important}
.akr-listen .mushaf{padding:6px 8px 6px}
.akr-listen .cartouche{width:min(100%,168px);margin:0 auto}
.akr-listen .rec-chip{overflow:hidden}
.akr-listen .rec-chip .rc-t{min-width:0;flex:1}
.akr-listen .rec-chip .rc-t b{white-space:normal;overflow-wrap:anywhere}
.akr-listen .rec-chip .chg{flex:0 0 auto;max-width:none;width:auto;min-height:44px;padding:6px 12px;flex-direction:row;gap:6px;align-items:center;justify-content:center;font-size:13.5px;line-height:1.1;white-space:nowrap;border-radius:14px}
.akr-listen .rec-chip .chg span{white-space:nowrap}
.akr-listen .rec-chip .chg svg{flex:none;width:18px;height:18px}
@media (max-width:767px){.akr-listen .rec-chip .chg:after{display:none}}
.akr-sec{background:transparent}
.akr-sec:before,.akr-sec:after{display:none!important}
.akr-sec .app{min-height:0}
.akr-sec .akmain{padding:4px 0 6px}
.akr-sec .view{animation:none}
.akr-ui{contain:none;height:0;overflow:visible;background:none}
.akr-ui:before,.akr-ui:after{display:none!important}