/* 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:32px; height:32px; display:flex; align-items:center; justify-content:center; color:var(--qc-green-deep); background:var(--green-tint); border:1px solid var(--green-line); border-radius:50%; cursor:pointer; padding:0}
.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 12px 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}
.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}
.aqrlist{display:flex; flex-direction:column; gap:5px; padding:0 12px; flex:1; min-height:0}
.aqrrow{flex:1; min-height:44px; display:grid; grid-template-columns:44px 1fr 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.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 */
.aqrtrbtn{font:inherit; font-size:11px; font-weight:700; color:var(--qc-green-deep); background:var(--green-tint); border:1px solid var(--green-line); border-radius:999px; padding:5px 10px; cursor:pointer; max-width:118px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.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:22px 0 0; position:relative; z-index:3}
.mklogo{width:132px; 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(34vh,240px); 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}
.mkriser{left:56%; top:44%; width:46px; height:32px; margin-left:-23px; z-index:4; animation:mkrise 5.4s ease-in infinite}
@keyframes mkrise{0%,50%{transform:translateY(0) scale(.7);opacity:0}56%{opacity:1}80%{transform:translateY(-150px) scale(1);opacity:1}88%{transform:translateY(-175px) scale(.4);opacity:.5}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:4px; font-size:clamp(24px,7vw,32px); letter-spacing:.02em}
.mksub{margin:8px 30px 0; font-size:14px; line-height:1.5; text-wrap:balance; color:#C7D2E2}
.mkwelcome .lstats{padding-top:16px}
.mkfoot{position:sticky; bottom:0; margin-top:auto; gap:8px; padding:12px 16px calc(14px + 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; min-height:1.2em; line-height:1.4}
.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)}