/* Annual Quran Reading — the few screens that are new on top of the khatam suite */
/* the week screen: one list, Sunday to Saturday, sized to fit one phone screen */
.aqrweekscreen{background:linear-gradient(180deg,#FBF8F0,#F3F5EC); overflow-y:auto; scrollbar-width:none; display:flex; flex-direction:column}
.aqrweekscreen::-webkit-scrollbar{display:none}
.aqrwhead{display:flex; align-items:center; gap:8px; padding:9px 12px 8px; background:var(--cream-card); border-bottom:1px solid var(--line); flex:none}
.aqrwlogo{width:28px; height:28px; border-radius:8px; flex:none}
.aqrwttl{flex:1; min-width:0} .aqrwttl b{display:block; font-size:14px; line-height:1.15} .aqrwttl small{display:block; font-size:10px; color:var(--a-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.aqrtrbtn{flex:none; width:auto; height:auto; display:block; background:none; border:none; border-radius:5px; cursor:pointer; padding:0; overflow:hidden; box-shadow:0 1px 3px rgba(0,0,0,.25); line-height:0}
.aqrtrbtn svg, .aqrtrbtn svg.flagsvg{width:33px !important; height:22px !important; display:block; border-radius:5px}
.aqrinstallbtn{flex:none; display:inline-flex; align-items:center; gap:5px; font:inherit; font-size:11px; font-weight:800; color:#fff; background:linear-gradient(135deg,#1e64d2,#164ea8); border:none; border-radius:999px; padding:6px 11px; cursor:pointer}
.aqrlogout{font:inherit; font-size:11px; font-weight:700; color:var(--a-soft); background:none; border:1px solid var(--line); border-radius:999px; padding:5px 10px; cursor:pointer}
.aqrnav{display:flex; align-items:center; gap:8px; margin:8px 22px 6px; flex:none}
.aqrnav h4{flex:1; margin:0; text-align:center; font-size:15px; display:flex; flex-direction:column; align-items:center; gap:2px} .aqrnav h4 small{display:block; font-size:10.5px; color:var(--a-soft); font-weight:600}
.aqrnavb{font:inherit; width:32px; height:32px; border-radius:50%; border:1px solid var(--line); background:#fff; color:var(--qc-green); font-size:20px; cursor:pointer; line-height:1; padding:0; display:inline-flex; align-items:center; justify-content:center}
.aqrnavb:disabled{opacity:.3; cursor:default}
.aqrtoday{font:inherit; font-size:10.5px; font-weight:800; color:#8A6F35; background:#FCF3D9; border:1px solid #E9C46A; border-radius:999px; padding:3px 9px; cursor:pointer; margin-top:2px}
/* the list and its days fill the screen but never shrink below their text: on a short screen or with
   a bigger phone text size the screen scrolls instead of the last day sliding over the week line */
.aqrlist{display:flex; flex-direction:column; gap:5px; padding:0 12px; flex:1 0 auto}
.aqrrow{flex:1 0 auto; min-height:44px; display:grid; grid-template-columns:44px 1fr auto 22px; align-items:center; gap:8px; width:100%; font:inherit; text-align:left; background:#fff; border:1.5px solid var(--line); border-radius:12px; padding:5px 8px; cursor:pointer; color:var(--a-ink)}
.aqrrow .aqrd{display:flex; flex-direction:column; align-items:center; line-height:1.05}
.aqrrow .aqrd small{font-size:9px; text-transform:uppercase; letter-spacing:.06em; color:var(--a-soft); font-weight:700}
.aqrrow .aqrd b{font-size:17px; font-variant-numeric:tabular-nums}
.aqrrow .aqrd em{font-style:normal; font-size:7.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#8A6F35; background:#FCF3D9; border-radius:999px; padding:1px 5px; margin-top:2px}
.aqrrow .aqrt{min-width:0} .aqrrow .aqrt b{display:block; font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis} .aqrrow .aqrt small{display:block; font-size:10px; color:var(--a-soft); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.aqrrow .aqrstatus{font-weight:700; color:var(--a-soft)} .aqrrow .aqrstatus.ok{color:var(--qc-green-deep)} .aqrrow .aqrstatus.late{color:#B5542D}
.aqrrow .aqrs{font-size:16px; font-weight:800; color:var(--qc-green); text-align:center}
.aqrrow.done{background:var(--green-tint); border-color:var(--green-line)}
.aqrrow.part{background:#FCF8EC; border-color:#E9C46A}
.aqrrow .aqrstatus.part{color:#8A6F35}
.aqrrow.today{border-color:#D9B45A; box-shadow:0 0 0 2px #E9C46A, 0 6px 16px rgba(217,180,90,.25)}
.aqrrow.catch{background:#F3EFE3; color:#8B8471} .aqrrow.catch .aqrs{color:#B5AD95}
.aqrfoot{flex:none; margin:6px 12px; padding-bottom:calc(6px + var(--qc-safe-bottom, 0px)); text-align:center; font-size:10.5px; color:var(--a-soft); font-weight:600}

/* finish box: the ghost option sits under the main button */
.aqrfinish .btn.ghost{font-size:11.5px}
.aqrfinish:not(.unlocked) .btn.solid{opacity:.45}
.aqrfinish.unlocked .btn.solid{opacity:1}


/* install screen */
.aqrinstall{justify-content:center; align-items:center; padding:24px 18px; background:linear-gradient(180deg,#FBF8F0,#F1F5EC)}
.aqrinstallin{max-width:360px; width:100%; text-align:center}
.aqrlogo{width:74px; height:74px; border-radius:20px; box-shadow:0 8px 20px rgba(0,0,0,.14); margin-bottom:14px}
.aqrinstall h3{margin:0 0 8px; font-size:20px; line-height:1.2}
.aqrinstall p{margin:0 0 16px; font-size:13.5px; line-height:1.5; color:var(--a-soft)}
.aqrsteps{text-align:left; margin:0 0 18px; padding:0 0 0 22px; font-size:13.5px; line-height:1.55}
.aqrsteps li{margin-bottom:6px}
.aqrshare{display:inline-block; border:1.5px solid currentColor; border-radius:5px; padding:0 5px; font-size:12px; line-height:1.4}
.aqrinstallbtns{display:flex; flex-direction:column; gap:9px}
.aqrinstallbtns .btn.solid{font-size:13.5px; padding:14px}
.aqrinstallnote{display:block; margin-top:12px; font-size:11.5px; color:var(--a-soft); line-height:1.45; min-height:1em}

/* stats page: a way back that does not depend on the khatam cards */
.aqrback{position:sticky; top:0; z-index:5; margin:10px 12px 0; align-self:flex-start; background:rgba(255,253,246,.95); border-color:rgba(255,253,246,.6); color:#1F3A2E; text-transform:none; letter-spacing:0; font-size:12.5px; padding:8px 12px}

/* translations */
.aqrsheet{max-height:82%; overflow:auto; padding:14px 14px 18px}
.aqrtrlist{display:flex; flex-direction:column; gap:6px}
.aqrtrgroup{font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; font-weight:800; color:var(--a-soft); margin:10px 2px 2px}
.aqrtrrow{display:grid; grid-template-columns:22px 1fr 20px; align-items:center; gap:10px; width:100%; font:inherit; text-align:left; background:var(--cream-card); border:1px solid var(--line); border-radius:12px; padding:9px 12px; cursor:pointer; color:var(--a-ink)}
.aqrtrrow .lflag{width:22px; display:flex} .aqrtrrow .lflag svg{width:22px; height:16px; border-radius:3px}
.aqrtrrow span b{display:block; font-size:13px} .aqrtrrow span small{display:block; font-size:10.5px; color:var(--a-soft)}
.aqrtrrow i{font-style:normal; font-weight:800; color:var(--qc-green); text-align:center}
.aqrtrrow.on{background:var(--green-tint); border-color:var(--green-line)}
.aqrtrinsheet{margin-bottom:12px}
.en .aqrhd, .fullen .aqrhd{display:block; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; font-weight:800; color:#8A6F35; margin-bottom:4px}

/* quiz: the question card must scroll on phones - the feedback line and Next button sit
   below the fold once an answer is locked (the suite caps the card with overflow:hidden) */
.statsover .qcard{overflow-y:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; overscroll-behavior:contain}
.statsover .qcard::-webkit-scrollbar{display:none}

/* ===== welcome / login: night sky, reader animation, rising Quran, live stats, sign-in ===== */
.mkwelcome{overflow-y:auto; scrollbar-width:none}
.mkwelcome::-webkit-scrollbar{display:none}
.mktop{flex:none; display:flex; justify-content:center; padding:12px 0 0; position:relative; z-index:3}
.mklogo{width:92px; filter:drop-shadow(0 0 14px rgba(245,231,184,.45)); animation:mklogopulse 5.4s ease-in-out infinite}
.mklogo svg{display:block; width:100%; height:auto}
@keyframes mklogopulse{0%,74%{transform:scale(1)}81%{transform:scale(1.07)}90%,100%{transform:scale(1)}}
.mkhero{position:relative; flex:none; margin:2px 0 0; aspect-ratio:1024/664; max-height:min(24vh,190px); width:100%; overflow:hidden;
  background:radial-gradient(1.2px 1.2px at 12% 22%,rgba(255,250,230,.9) 50%,transparent 51%),radial-gradient(1px 1px at 32% 9%,rgba(255,250,230,.7) 50%,transparent 51%),radial-gradient(1.4px 1.4px at 55% 18%,rgba(255,250,230,.8) 50%,transparent 51%),radial-gradient(1px 1px at 72% 6%,rgba(255,250,230,.6) 50%,transparent 51%),radial-gradient(1.2px 1.2px at 88% 26%,rgba(255,250,230,.75) 50%,transparent 51%)}
.mkvid{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}
.mkvignette{position:absolute; inset:0; pointer-events:none; z-index:1;
  background:linear-gradient(180deg, #0B1220 0%, rgba(11,18,32,0) 22%, rgba(11,18,32,0) 78%, #0B1220 100%),
             linear-gradient(90deg, rgba(11,18,32,.85) 0%, rgba(11,18,32,0) 18%, rgba(11,18,32,0) 82%, rgba(11,18,32,.85) 100%)}
/* the rising Quran: starts on the phone screen (about 56% across, 45% down) and climbs to the logo */
.mkbeam{left:56%; top:6%; height:38%; transform-origin:bottom; z-index:2}
.mkbird{left:56%; top:46%; width:38px; height:28px; margin-left:-19px; opacity:0; z-index:4; filter:drop-shadow(0 0 8px rgba(245,231,184,.75)); animation:mkrise 5.4s ease-in infinite}
.mkbird svg{width:100%; height:100%; overflow:visible}
@keyframes mkrise{0%,50%{transform:translateY(0) scale(.6);opacity:0}56%{opacity:1}80%{transform:translateY(-140px) scale(1);opacity:1}88%{transform:translateY(-170px) scale(.45);opacity:.6}93%,100%{transform:translateY(-185px) scale(.05);opacity:0}}
.mkportal{left:56%; top:4%; z-index:4}
.mkspark{left:56%; top:5%; z-index:5}
.mkgold{margin-top:2px; font-size:clamp(22px,6.5vw,28px); letter-spacing:.02em}
.mksub{margin:6px 30px 0; font-size:13.5px; line-height:1.45; text-wrap:balance; color:#C7D2E2}
.mkwelcome .lstats{padding:12px 16px 4px}
.mkwelcome .lstat{padding:10px 6px}
.mkwelcome .llive{margin-top:8px}
@media (max-height:640px){ .mkhero{max-height:150px} .mklogo{width:78px} .mktop{padding-top:8px} .mkwelcome .lstat b{font-size:17px} .mkwelcome .lstats{padding-top:8px} }
.mkfoot{position:sticky; bottom:0; margin-top:auto; gap:8px; padding:12px 16px calc(12px + var(--qc-safe-bottom, 0px)); border-top:1px solid rgba(245,231,184,.22); background:linear-gradient(180deg, rgba(7,12,22,.72), #070C16 40%); backdrop-filter:blur(6px)}
.mkmsg{margin:0; text-align:center; font-size:12px; color:#B9C6D8; line-height:1.4}
.mkmsg:empty{display:none}
.mktitle{margin:0 0 2px; text-align:center; font-size:15px; font-weight:800; color:#F2EDDD; letter-spacing:.01em}
.mkapple{background:#fff; color:#111; border:none}
.mkgoogle{background:#fff; color:#1F2937; border:none}
.mkgoogle svg{width:20px; height:20px}
.mkts{display:flex; justify-content:center; min-height:0; line-height:0}
.mkts iframe{border-radius:12px}

/* quiz: once an answer is locked, Next stays pinned at the foot of the card while the rest scrolls */
.statsover .qcard .qnextbig{position:sticky; bottom:-12px; margin:9px -13px -12px; width:calc(100% + 26px); border-radius:0 0 18px 18px; box-shadow:0 -10px 16px -6px rgba(60,50,20,.25); z-index:3}

/* the reflection video player must sit above the quiz overlay (suite: player 60, overlay 65) */
#app > .vplayer, .aqrquizhost .vplayer{z-index:80}
/* quiz result: retake with the score, week / stats at the foot */
.qres.qres2 .qr2meta .aqrretake{margin-top:10px; font-size:12.5px; font-weight:800; color:#fff; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.4); border-radius:999px; padding:7px 16px; cursor:pointer}
.qres.qres2 .aqrqrow{display:flex; gap:10px; margin:12px 12px 14px}
.qres.qres2 .aqrqrow .qdone2{flex:1; text-align:center; font-size:13px; padding:12px 10px}
.qres.qres2 .aqrqstats{background:linear-gradient(135deg,#2F9E5F,#1F7A47) !important; color:#fff !important; border-color:transparent !important}

/* welcome: numbered steps, two-button foot, email sheet */
.mksteps{list-style:none; margin:10px 24px 0; padding:0; display:flex; flex-direction:column; gap:6px; align-items:center}
.mksteps li{display:flex; align-items:center; gap:10px; font-size:14px; color:#DCE6F2; font-weight:600}
.mksteps li b{width:22px; height:22px; border-radius:50%; background:rgba(245,231,184,.14); border:1px solid rgba(245,231,184,.5); color:#F5E7B8; font-size:11px; display:flex; align-items:center; justify-content:center; flex:none}
.mkbtnrow{display:flex; gap:9px}
.mkbtnrow .lbtn{flex:1; padding:14px 8px; font-size:15px; gap:8px; white-space:nowrap}
.mkbtnrow .lbtn svg{width:18px; height:18px; flex:none}
.mkdim{position:absolute; inset:0; z-index:60; background:rgba(5,8,14,.62); backdrop-filter:blur(2px)}
.mksheet{position:absolute; left:0; right:0; bottom:0; z-index:61; background:linear-gradient(180deg,#121E33,#0B1220); color:#F2EDDD; border:1px solid rgba(245,231,184,.22); border-bottom:none; border-radius:22px 22px 0 0; padding:18px 18px calc(18px + var(--qc-safe-bottom, 0px)); display:flex; flex-direction:column; gap:10px; box-shadow:0 -18px 50px rgba(0,0,0,.5)}
.mksheet h4{margin:0; font-size:17px; text-align:center; color:#F5E7B8}
.mksheetsub{margin:0; text-align:center; font-size:12.5px; line-height:1.5; color:#B9C6D8; min-height:2.6em}
.mksheet input{font:inherit; font-size:16px; padding:14px 16px; border-radius:14px; border:1.5px solid rgba(255,253,246,.22); background:rgba(255,253,246,.07); color:#F2EDDD; text-align:center}
.mksheet input::placeholder{color:#8FA3BD}
.mksheet input:focus{outline:2px solid #2FB56E; outline-offset:1px; border-color:#2FB56E}
.mksheet input.bad{border-color:#E06A5F}
.mksheet .lbtn svg{width:19px; height:19px}
.mkcancel{font:inherit; font-size:13px; color:#8FA3BD; background:none; border:none; padding:6px; cursor:pointer}
.lstats.mklive .lstat{border-color:rgba(126,217,162,.35)}

/* narrow phones (320-360px): keep the reader header on three tidy lines */
@media (max-width:360px){
  .aqrreader .app-header{gap:6px; padding:10px 8px 8px}
  .aqrreader .app-header .ttl b{font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .aqrreader .app-header .ttl small{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:150px}
  .aqrreader .counter{padding:6px 10px 6px 9px; font-size:13px; gap:6px} .aqrreader .counter svg{width:24px; height:17px}
  .aqrreader .hdr-med{display:none}
}

.qres.qres2 .aqrqrow .aqrqwide{background:linear-gradient(135deg,#2F9E5F,#1F7A47) !important; color:#fff !important; border-color:transparent !important}

/* the reader: no read line drawn; words light up under the reciter; tapped words play */
.aqrreader .readline{display:none}
.aqw{transition:color .12s ease, background .12s ease; border-radius:4px}
.aqw.reciting{color:#1B4F9C; background:#CFE3FA; box-shadow:0 0 0 3px #CFE3FA}
.aqrreader .vrow.aplay{background:#EEF5FD !important; box-shadow:inset 0 0 0 2px rgba(74,141,224,.4) !important}
.aqrreader .vrow.aplay.counted, .aqrreader .vrow.aplay.confirmed{background:#EEF5FD !important}
.aqw.playing{color:#1B4F9C; background:#CFE3FA; box-shadow:0 0 0 3px #CFE3FA}

/* landscape phones: nothing pinned, everything scrolls */
@media (max-height:520px) and (orientation:landscape){
  .mkfoot{position:static}
  .mkhero{max-height:140px}
  .aqrweekscreen .aqrlist{flex:none; gap:6px; padding-bottom:8px}
  .aqrrow{flex:none; min-height:46px}
}

/* laptops and desktops (1000px and wider): not a phone column but its own layout —
   welcome: animation left, sign-in right · week: sidebar + grid of day cards · reader: wide column */
@media (min-width:760px){
  html, body{background:radial-gradient(120% 80% at 50% 0%, #16243F 0%, #0B1220 60%, #070C16 100%) !important}
  body{align-items:center; padding:18px 0}
  html body #app{max-width:1280px !important; width:calc(100% - 48px) !important; height:min(94vh, 1080px) !important; border-radius:26px; overflow:hidden; box-shadow:0 30px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(245,231,184,.14)}
  .screen, .lscreen, .loginwrap, .kscreen{border-radius:26px}

  /* welcome */
  .lscreen.mkwelcome{display:grid !important; grid-template-columns:minmax(0,1.1fr) minmax(420px,.9fr); grid-template-rows:auto auto auto auto auto 1fr auto; grid-template-areas:"hero logo" "hero title" "hero sub" "hero stats" "hero live" "hero gap" "hero foot"; column-gap:0; overflow:hidden}
  .mkwelcome .mktop{grid-area:logo; padding:36px 40px 0; justify-content:flex-start}
  .mkwelcome .mkhero{grid-area:hero; max-height:none !important; height:100%; min-height:0; aspect-ratio:auto; margin:0; border-right:1px solid rgba(245,231,184,.12)}
  .mkwelcome .mkvignette{background:linear-gradient(180deg, rgba(11,18,32,.55) 0%, rgba(11,18,32,0) 25%, rgba(11,18,32,0) 70%, #0B1220 100%), linear-gradient(90deg, rgba(11,18,32,0) 70%, rgba(11,18,32,.9) 100%)}
  .mkwelcome .mkbird{top:40%}
  .mkwelcome .mkgold{grid-area:title; text-align:left; margin:18px 40px 0; font-size:38px}
  .mkwelcome .mksub{grid-area:sub; text-align:left; margin:10px 40px 0; max-width:none; font-size:16px; text-wrap:pretty}
  .mkwelcome .lstats{grid-area:stats; max-width:none; padding:22px 40px 0}
  .mkwelcome .lstat b{font-size:24px}
  .mkwelcome .llive{grid-area:live; justify-content:flex-start; margin:12px 40px 0}
  .mkwelcome .mkfoot{grid-area:foot; position:static; border-top:none; background:none; backdrop-filter:none; padding:0 40px 40px; margin:0}
  .mkwelcome .mktitle{text-align:left; font-size:16px}
  .mkwelcome .mkmsg{text-align:left}
  .mkwelcome .mkbtnrow{max-width:none; margin:0}
  .mkwelcome .mkbtnrow .lbtn{padding:16px 10px; font-size:16px}
  .mkwelcome .mksheet{left:auto; right:0; width:min(520px, 48%); border-radius:22px 0 0 0}
  .mkwelcome .mkdim{border-radius:26px}

  /* week: sidebar + grid of day cards */
  .aqrweekscreen{display:grid; grid-template-columns:300px minmax(0,1fr); grid-template-rows:auto minmax(0,1fr); grid-template-areas:"head head" "side main"; overflow:hidden; background:#F6F3E9}
  .aqrwhead{grid-area:head; padding:14px 28px; gap:12px}
  .aqrwlogo{width:36px; height:36px} .aqrwttl b{font-size:16px} .aqrwttl small{font-size:11.5px}
  .aqrnav{grid-area:side; display:grid; grid-template-columns:44px 44px 1fr; grid-template-rows:auto auto; grid-template-areas:"ttl ttl ttl" "prev next ."; align-items:start; align-content:start; margin:0; padding:26px 22px; border-right:1px solid var(--line); background:var(--cream-card); gap:14px 10px}
  .aqrnav h4{grid-area:ttl; font-size:26px; align-items:flex-start; text-align:left; gap:6px} .aqrnav h4 small{font-size:13px}
  .aqrnavb{width:44px; height:44px; font-size:24px}
  .aqrnav .aqrnavb:first-child{grid-area:prev} .aqrnav .aqrnavb:last-child{grid-area:next}
  .aqrtoday{align-self:flex-start; font-size:12px; padding:6px 12px; margin-top:6px}
  .aqrlist{grid-area:main; display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); grid-auto-rows:minmax(118px, auto); gap:14px; padding:24px 28px; overflow-y:auto; align-content:start; max-width:none; margin:0}
  .aqrrow{min-height:0; grid-template-columns:64px 1fr 26px; grid-template-rows:1fr; align-items:center; padding:16px 16px; border-radius:18px; border-width:1.5px; box-shadow:0 6px 18px rgba(43,39,25,.06)}
  .aqrrow .aqrd b{font-size:28px} .aqrrow .aqrd small{font-size:10.5px}
  .aqrrow .aqrt b{font-size:16px; white-space:normal; line-height:1.25; margin-bottom:4px} .aqrrow .aqrt small{font-size:12.5px; white-space:normal; line-height:1.4}
  .aqrrow.today{box-shadow:0 0 0 2px #E9C46A, 0 10px 24px rgba(217,180,90,.28)}
  .aqrfoot{grid-area:side; align-self:end; margin:0; padding:0 22px 26px; font-size:14px; text-align:left; line-height:1.55; align-items:flex-start}
  .aqrstatsbtn{font-size:15.5px; padding:12px 20px; margin-top:10px}
  .aqrweekscreen .toast{bottom:28px; left:auto; right:28px; transform:none}

  /* reader: one wide reading column */
  .aqrreader .app-header{padding:16px 32px}
  .aqrreader .app-header .ttl b{font-size:15px} .aqrreader .app-header .ttl small{font-size:12px}
  .aqrreader .content{max-width:1080px; margin:0 auto}
  .aqrreader .vrow{padding:6px 12px}
  .aqrreader .vrow .ar{font-size:calc(var(--arfs, 23px) + 5px); line-height:2.15}
  .aqrreader .vrow .en{font-size:calc(var(--enfs, 13px) + 3px); line-height:1.65}
  .aqrreader .vrow .tr{font-size:12.5px}
  .aqrfinish{max-width:560px; margin-left:auto; margin-right:auto}
  .aqrreader .bottombar{padding-left:32px; padding-right:32px}

  /* quiz, install */
  .statsover .qcard{max-width:760px; margin-left:auto; margin-right:auto; width:calc(100% - 32px)}
  /* the result becomes one centred card: band, next step and the way back share a column */
  .aqrquizhost .qzhero{padding-left:max(16px, calc(50% - 400px)); padding-right:max(16px, calc(50% - 400px))}
  .aqrquizhost .qres.qres2{max-width:1000px; width:calc(100% - 48px); margin:-14px auto 28px; border-radius:22px; flex:none; overflow:hidden; display:grid; grid-template-columns:1.1fr 1fr; grid-template-areas:"hero next" "row row"; align-items:stretch}
  .aqrquizhost .qres.qres2 .qr2hero{grid-area:hero; display:flex; flex-direction:column; justify-content:center}
  .aqrquizhost .qres.qres2 .qr2next{grid-area:next; margin:20px 20px 0 0; display:flex; flex-direction:column; align-self:start}
  .aqrquizhost .qres.qres2 .qr2thumb{height:auto; width:min(100%, 240px); aspect-ratio:9/16; margin:0 auto}
  .aqrquizhost .qres.qres2 .aqrqrow{grid-area:row}
  .aqrquizhost .statsover{overflow-y:auto}
  .qres.qres2 .qr2hero{padding:38px 24px 26px}
  .qres.qres2 .qr2next, .qres.qres2 .aqrqrow{max-width:none; width:auto; margin-left:20px; margin-right:20px}
  .qres.qres2 .qr2next{margin-top:18px; padding:16px}
  .qres.qres2 .aqrqrow{margin-top:14px; margin-bottom:22px}
  .qres.qres2 .aqrqrow .qdone2{font-size:14px; padding:14px 12px}
  .aqrinstallin{max-width:460px}
}


.aqrweekscreen .toast{bottom:24px}

/* part-way save: confirmation sheet */
.aqrconfirm h4{margin:0 0 6px; font-size:16px; text-align:center}
.aqrconfirm p{margin:0 0 14px; text-align:center; font-size:13px; color:var(--a-soft); line-height:1.5}
.aqrconfirm .fbtns{display:flex; flex-direction:column; gap:9px}

/* retake the quiz straight from the week */
.aqrqz{font-size:10.5px; font-weight:800; color:var(--qc-green-deep); background:#fff; border:1.5px solid var(--green-line); border-radius:999px; padding:5px 9px; white-space:nowrap; cursor:pointer}
.aqrqz:hover{background:var(--green-tint)}
@media (min-width:760px){
  /* the tick lives under the date as a small circled mark; the arrow keeps its own column */
  .aqrrow{grid-template-columns:64px minmax(0,1fr); grid-template-rows:auto auto; row-gap:0}
  .aqrrow .aqrd{grid-column:1; grid-row:1 / 3}
  .aqrrow .aqrt{grid-column:2; grid-row:1}
  .aqrrow .aqrs{grid-column:1; grid-row:2; justify-self:center; align-self:center; width:22px; height:22px; line-height:22px; font-size:13px; border-radius:50%; background:var(--qc-green); color:#fff; margin-top:10px}
  .aqrrow:not(.done):not(.part) .aqrs{display:none}
  .aqrrow.done .aqrd, .aqrrow.part .aqrd{grid-row:1}
  .aqrrow .aqrs.pend{background:transparent; color:#8A6F35; border:2px dotted #B8892E; line-height:18px; width:24px; height:24px}
  .aqrqz{grid-column:2; grid-row:2; justify-self:start; margin-top:10px; font-size:12px; padding:7px 12px}
}

/* word-by-word layout follows the text-size sliders too (the suite fixes these in px) */
.content[data-cust] .wtoken .wa{font-size:calc(var(--arfs, 23px) - 4px)}
.content[data-cust] .wtoken .wt{font-size:calc(var(--enfs, 13px) - 4px)}
.content[data-cust] .wtoken .wm{font-size:calc(var(--enfs, 13px) - 3px)}
.content[data-cust] .fullen{font-size:calc(var(--enfs, 13px) - 1px)}

/* full-page (printed) layout inside the portion reader */
.aqrfull{margin:10px 12px; background:#fff; border:1px solid var(--line); border-radius:12px; padding:10px 12px 6px}
.aqrfull .mushaf{direction:rtl; text-align:justify; text-align-last:center; font-family:"qpc-hafs",serif; font-size:calc(var(--arfs, 23px) * .92); line-height:2.25; color:#2E2A20; display:flex; flex-direction:column}
.aqrfull .mw{transition:color .15s ease, background .15s ease; border-radius:4px}
.aqrfull .mw.out{color:#CFC8B3; opacity:.28; filter:grayscale(1)}   /* colour fonts ignore color, so fade them */
.aqrfull .mw.read{color:#1F6B45}
.aqrfull .mw.aplayw{background:#EEF5FD}
.aqrfull .mw.reciting{color:#1B4F9C; background:#CFE3FA; box-shadow:0 0 0 3px #CFE3FA}
.aqrfullpg{text-align:center; font-size:11px; color:var(--a-soft); margin-top:6px; font-variant-numeric:tabular-nums}
.aqrfullmode .content{padding-bottom:0}
/* wide screens: the page keeps its printed proportions (a phone-width column) and is zoomed to
   fill the reading area; the reader can zoom out or in */
@media (min-width:760px){
  .aqrfull{width:520px; margin:14px auto; padding:14px 16px 8px; zoom:var(--mzoom, 1.6)}
  .aqrfull .mushaf{font-size:21px; line-height:2.25}
  .aqrfullmode .content{padding-bottom:0}
}
.aqrzoom{position:absolute; right:14px; bottom:calc(64px + var(--qc-safe-bottom, 0px)); z-index:21; display:none; gap:6px}
.aqrzoom button{width:34px; height:34px; border-radius:50%; border:1px solid var(--line); background:rgba(255,253,246,.94); color:var(--a-ink); font:inherit; font-size:18px; font-weight:800; cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,.12)}
@media (min-width:760px){ .aqrfullmode .aqrzoom{display:flex} }

.aqrhiddenrow{display:none !important}
.aqrfull .mw.playing{color:#1B4F9C; background:#CFE3FA}
.wtoken.wplay.playing{background:#EEF5FD !important; box-shadow:0 0 0 2px #9CC3F0 !important}
.wtoken.wplay.playing .wa, .wtoken.wplay.playing .wt, .wtoken.wplay.playing .wm{color:#1B4F9C !important}

/* pending tick: a day that is started but not finished */
.aqrrow .aqrs.pend{color:#8A6F35; width:22px; height:22px; line-height:18px; font-size:12px; border:2px dotted #B8892E; border-radius:50%; justify-self:center}
/* the footer's stats button */
.aqrfoot{display:flex; flex-direction:column; align-items:center; gap:8px}
.aqrstatsbtn{font:inherit; font-weight:800; font-size:12.5px; color:var(--qc-green-deep); background:#fff; border:1.5px solid var(--green-line); border-radius:999px; padding:8px 16px; cursor:pointer}
.aqrstatsbtn:hover{background:var(--green-tint)}

/* ---------------------------------------------------------------- my stats */
.aqrstatsscreen{background:linear-gradient(180deg,#FBF8F0,#F3F5EC); overflow-y:auto; display:flex; flex-direction:column; color:var(--a-ink)}
.aqrshead{display:flex; align-items:center; gap:8px; padding:10px 12px 6px; flex:none; position:sticky; top:0; background:rgba(251,248,240,.94); backdrop-filter:blur(8px); z-index:2}
.aqrshead h3{flex:1; margin:0; text-align:center; font-size:16px} .aqrsspacer{width:84px}
.aqrsback{font:inherit; font-weight:800; font-size:13px; color:var(--qc-green-deep); background:#fff; border:1.5px solid var(--line); border-radius:999px; padding:7px 12px; cursor:pointer; width:84px; white-space:nowrap}
.aqrsbody{padding:6px 12px calc(20px + var(--qc-safe-bottom, 0px)); display:flex; flex-direction:column; gap:12px; max-width:760px; width:100%; margin:0 auto}
.aqrshero{display:flex; align-items:center; gap:16px; background:#fff; border:1.5px solid var(--line); border-radius:16px; padding:14px}
.aqrsring{--p:0; width:96px; height:96px; flex:none; border-radius:50%; background:conic-gradient(var(--qc-green) calc(var(--p) * 1%), #E9E4D3 0); display:grid; place-items:center; position:relative}
.aqrsring::before{content:''; position:absolute; inset:9px; border-radius:50%; background:#fff}
.aqrsring b, .aqrsring small{position:relative; z-index:1} .aqrsring b{font-size:19px; line-height:1; font-variant-numeric:tabular-nums} .aqrsring small{font-size:9px; color:var(--a-soft); font-weight:700; text-transform:uppercase; letter-spacing:.05em}
.aqrsring{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px}
.aqrsherotxt{min-width:0} .aqrsherotxt b{display:block; font-size:17px} .aqrsherotxt small{display:block; font-size:12px; color:var(--a-soft); margin-top:3px; line-height:1.4}
.aqrstiles{display:grid; grid-template-columns:repeat(4, 1fr); gap:8px}
.aqrstile{background:#fff; border:1.5px solid var(--line); border-radius:14px; padding:10px 6px; text-align:center}
.aqrstile b{display:block; font-size:20px; font-variant-numeric:tabular-nums; color:var(--qc-green-deep)} .aqrstile small{display:block; font-size:9.5px; color:var(--a-soft); font-weight:700; text-transform:uppercase; letter-spacing:.04em; margin-top:2px}
.aqrstile.warn b{color:#8A6F35} .aqrstile.bad b{color:#B5542D}
.aqrsyear{background:#fff; border:1.5px solid var(--line); border-radius:16px; padding:14px 12px}
.aqrsyear > b{display:block; font-size:15px} .aqrsyear > small{display:block; font-size:11.5px; color:var(--a-soft); margin-top:2px}
.aqrslegend{display:flex; flex-wrap:wrap; gap:10px; font-size:11px; color:var(--a-soft); margin:8px 0 10px} .aqrslegend span{display:inline-flex; align-items:center; gap:5px}
.aqrslegend i, .aqrsweek i{display:inline-block; width:14px; height:14px; border-radius:4px; background:#EFEBDD; border:1px solid #E3DDC8}
.aqrsweek i{width:22px; height:22px; font-style:normal; font-size:9.5px; font-weight:700; line-height:20px; text-align:center; color:#8B8471; font-variant-numeric:tabular-nums}
.aqrsweek i.r, .aqrsweek i.l{color:#fff} .aqrsweek i.p, .aqrsweek i.x{color:#6B6552} .aqrsweek i.p{line-height:18px}
.aqrsweek.aqrshd{cursor:default} .aqrsweek.aqrshd i{background:none; border:none; color:var(--a-soft); font-weight:800}
.aqrslegend i.r, .aqrsweek i.r{background:var(--qc-green); border-color:var(--qc-green)} .aqrslegend i.l, .aqrsweek i.l{background:#D9A84A; border-color:#C8962F}
.aqrslegend i.p, .aqrsweek i.p{background:#FCF3D9; border:2px dotted #B8892E} .aqrslegend i.x, .aqrsweek i.x{background:#F6D9D3; border-color:#E5B3A8}
.aqrsweek i.t{box-shadow:0 0 0 2px #E9C46A} .aqrsweek i.c{opacity:.35}
.aqrsgrid{display:flex; flex-direction:column; gap:4px}
.aqrsweek{display:grid; grid-template-columns:28px 46px repeat(7, 22px); gap:3px; align-items:center; background:none; border:none; padding:1px 0; font:inherit; cursor:pointer; text-align:left; color:var(--a-ink)}
.aqrsweek small{font-size:10px; font-weight:800; color:var(--a-soft)} .aqrsweek em{font-style:normal; font-size:10px; color:var(--a-soft); font-variant-numeric:tabular-nums; white-space:nowrap}
.aqrsweek.now em{color:#8A6F35; font-weight:800}
.aqrsweek:hover i{filter:brightness(.95)}
@media (min-width:760px){
  .aqrstiles{grid-template-columns:repeat(8, 1fr)} .aqrstile b{font-size:24px}
  .aqrsbody{max-width:1080px; padding:16px 28px}
  .aqrsweek{grid-template-columns:34px 52px repeat(7, 24px)} .aqrsweek i{width:24px; height:24px; line-height:22px; font-size:10px} .aqrsweek i.p{line-height:20px}
  .aqrsgrid{display:grid; grid-auto-flow:column; grid-template-rows:repeat(22, auto); grid-template-columns:repeat(2, max-content); column-gap:48px}
}

/* ------------------------------------------------ right-to-left languages (Arabic, Urdu, Farsi) */
[dir="rtl"] .aqrrow, [dir="rtl"] .aqrtrrow, [dir="rtl"] .aqrsweek, [dir="rtl"] .aqrsteps, [dir="rtl"] .aqrsherotxt{text-align:right}
[dir="rtl"] .aqrsteps{padding:0 22px 0 0}
[dir="rtl"] .aqrrow .aqrt b, [dir="rtl"] .aqrrow .aqrt small{unicode-bidi:plaintext}
[dir="rtl"] .aqrqz{unicode-bidi:plaintext}
[dir="rtl"] .aqrsweek{text-align:right}

[dir="rtl"] .en, [dir="rtl"] .vrow .en{direction:rtl; text-align:right}
[lang="ur"] body, [lang="ur"] .aqrweekscreen, [lang="ur"] .aqrstatsscreen, [lang="ur"] .aqrinstall, [lang="ur"] .lscreen, [lang="ur"] .sheet{font-family:"Noto Nastaliq Urdu","Jameel Noori Nastaleeq","Urdu Typesetting","Noto Naskh Arabic",system-ui,sans-serif}
[lang="ur"] .aqrrow .aqrt b{white-space:normal; line-height:1.9; font-size:13px}
[lang="ur"] .aqrrow .aqrt small{white-space:normal; line-height:1.8}
[lang="ur"] .aqrnav h4{line-height:1.8}
[lang="ar"] .aqrrow .aqrt b, [lang="fa"] .aqrrow .aqrt b{font-size:14px}
[dir="rtl"] .aqrrow .aqrd small{letter-spacing:0; text-transform:none; font-size:10px}
@media (min-width:760px){
  [dir="rtl"] .aqrnav{border-right:none; border-left:1px solid var(--line)}
  [dir="rtl"] .aqrnav h4{align-items:flex-start; text-align:right}
  [dir="rtl"] .aqrfoot{text-align:right; align-items:flex-start}
  [dir="rtl"] .aqrrow .aqrt b{white-space:normal}
}

/* Logical alignment keeps the reader and sheets consistent across scripts. */
.aqrwttl,.aqrreader .ttl,.aqrsheet,.mksheet{text-align:start}
.aqrreader .ttl{min-width:0}
.aqrreader .app-header .ttl small{white-space:normal;overflow:visible;max-width:none;overflow-wrap:anywhere}
.aqrreader .counter span{direction:ltr;unicode-bidi:isolate;display:inline-block}
.aqrtrrow b{unicode-bidi:plaintext}
.aqrreader .tr{direction:ltr; text-align:left}
[dir="rtl"] .aqrreader .ttl,[dir="rtl"] .aqrreader .cause{text-align:right}
[dir="rtl"] .aqrreader .qrefrow{padding-right:0;padding-left:40px}
[dir="rtl"] .qreftog{margin-left:0;margin-right:auto}
[dir="rtl"] .qopts button,[dir="rtl"] .qr2next{text-align:right}
.aqrrow .aqrt{min-width:0}
@media(max-width:600px){
  .aqrwhead{flex-wrap:wrap}
  .aqrrow .aqrt b,.aqrrow .aqrt small{white-space:normal;overflow:visible}
  .aqrrow{height:auto;min-height:64px}
}

.aqrfinish:not(.unlocked)::after{content:attr(data-keep-reading);font-size:12px;color:var(--a-soft)}
[dir="rtl"] .qzback svg{transform:scaleX(-1)}
.qring b{direction:ltr;unicode-bidi:isolate;display:inline-block}

/* khatam settings at the foot of My stats: the attempt line and the way to start again */
.aqrsset{background:#fff; border:1.5px solid var(--line); border-radius:16px; padding:14px 14px 16px; display:flex; flex-direction:column; gap:6px; align-items:flex-start}
.aqrsset > b{font-size:15px} .aqrsset > em{font-style:normal; font-size:11.5px; color:var(--a-soft)} .aqrsset > small{font-size:12.5px; color:var(--a-soft); line-height:1.45}
.aqrsset .btn{margin-top:8px; align-self:stretch; font-size:13.5px; padding:13px 14px}
.aqrsset .aqrsrestart{color:#B5542D; border:1.5px solid #E5B3A8; border-radius:12px; background:#fff; font-weight:800}
.aqrconfirm.aqrrestart .btn.ghost{border:1.5px solid var(--line); border-radius:12px}
.aqrsset .aqrsrestart:hover{background:#FBEFEC}
.aqrsset.done{align-items:center; text-align:center; background:linear-gradient(160deg,#1F7A47 0%,#2F9E5F 100%); border-color:transparent; color:#fff; padding:22px 16px 18px}
.aqrsset.done > b{font-size:18px} .aqrsset.done > small, .aqrsset.done > em{color:#E6F5EB}
.aqrsset.done .aqrsnext{background:#fff; color:var(--qc-green-deep)}
.aqrscel{width:64px; height:44px; display:block; filter:drop-shadow(0 4px 10px rgba(0,0,0,.2))} .aqrscel svg{width:100%; height:100%; overflow:visible}
.aqrconfirm.aqrrestart p{font-size:13.5px; line-height:1.5; color:var(--a-soft); margin:6px 0 4px}
.aqrconfirm .btn.aqrdanger{background:linear-gradient(135deg,#C9593A,#A9411F); border-color:transparent; color:#fff}
@media (min-width:760px){ .aqrsset .btn{align-self:flex-start; min-width:280px} .aqrsset.done .btn{align-self:center} }
.aqrconfirm .aqrerr{color:#B5542D; font-size:12.5px; margin:8px 0 0}

/* tablets (760px to 999px): the wide layout, a little tighter */
@media (min-width:760px) and (max-width:999px){
  html body #app{width:calc(100% - 24px) !important; height:min(96vh, 1200px) !important; border-radius:20px}
  .aqrweekscreen{grid-template-columns:230px minmax(0,1fr)}
  .aqrnav{padding:18px 16px} .aqrnav h4{font-size:22px} .aqrfoot{padding:0 16px 18px}
  .aqrlist{padding:16px 16px; gap:10px; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr))}
  .aqrstiles{grid-template-columns:repeat(4, 1fr)}
  .aqrsgrid{column-gap:24px}
  .aqrquizhost .qres.qres2{grid-template-columns:1fr; grid-template-areas:"hero" "next" "row"; max-width:640px}
  .aqrquizhost .qres.qres2 .qr2next{margin:18px 20px 0}
  .aqrquizhost .qres.qres2 .qr2thumb{width:100%; aspect-ratio:16/9}
  .lscreen.mkwelcome{grid-template-columns:1fr 1fr}
}