/* Pastel theme inspired by the shrine of Imam Ali (a): white marble, turquoise tiles, gold and soft flowers. Loaded last on every page. */
:root{--lapis:#FBF7EF;--lapis-2:#FFFFFF;--lapis-3:#E3F2EE;--ivory:#263445;--muted:#5F6E80;--brass:#B88A3B;--brass-hi:#9A6F28;--tile:#3E9C94;--rose:#D98A8A;--line:rgba(38,52,69,.10);--line-2:rgba(184,138,59,.30);--ink:#263445;--ink2:#56657A;--gold:#B88A3B;--goldd:#8E6522;--teal:#2F8C84;--mint:#E3F2EE;--sky:#E4EEF8;--blush:#F8E4E6;--card:rgba(255,255,255,.84)}
html{background:#FBF7EF!important;scrollbar-color:#CDB98F #F4EEE2}
body{color:var(--ink)!important;background-color:#FBF7EF!important;background-image:radial-gradient(900px 520px at 85% -120px,rgba(244,199,207,.45),transparent 60%),radial-gradient(800px 600px at -10% 30%,rgba(181,220,203,.45),transparent 60%),radial-gradient(900px 700px at 110% 80%,rgba(207,227,245,.55),transparent 60%),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cg fill='none' stroke='%233E9C94' stroke-opacity='.10' stroke-width='1'%3E%3Cpath d='M48 8l11 29 29 11-29 11-11 29-11-29L8 48l29-11z'/%3E%3Ccircle cx='48' cy='48' r='9'/%3E%3Cpath d='M0 0l20 20M96 0L76 20M0 96l20-20M96 96L76 76'/%3E%3C/g%3E%3Cg fill='%23B88A3B' fill-opacity='.10'%3E%3Ccircle cx='0' cy='0' r='4'/%3E%3Ccircle cx='96' cy='0' r='4'/%3E%3Ccircle cx='0' cy='96' r='4'/%3E%3Ccircle cx='96' cy='96' r='4'/%3E%3C/g%3E%3C/svg%3E"),linear-gradient(180deg,#FDFAF3,#F6F8F4 50%,#FAF4F6)!important;background-size:auto,auto,auto,96px,auto!important;background-attachment:fixed!important}
body::before,body::after{content:"";position:fixed;width:min(36vw,280px);height:min(36vw,280px);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300'%3E%3Cpath d='M20 280C80 230 120 160 140 60' stroke='%2391C7B1' stroke-width='3' fill='none'/%3E%3Cpath d='M70 220c-30-5-45-25-45-25s25-10 45 5zM105 150c-28-12-36-35-36-35s27-4 43 15zM118 110c25-15 50-8 50-8s-12 25-42 22z' fill='%23B5DCCB'/%3E%3Cg transform='translate(140 60) scale(1)'%3E%3Cg fill='%23F4C7CF'%3E%3Cellipse rx='14' ry='26' transform='rotate(0) translate(0 -22)'/%3E%3Cellipse rx='14' ry='26' transform='rotate(72) translate(0 -22)'/%3E%3Cellipse rx='14' ry='26' transform='rotate(144) translate(0 -22)'/%3E%3Cellipse rx='14' ry='26' transform='rotate(216) translate(0 -22)'/%3E%3Cellipse rx='14' ry='26' transform='rotate(288) translate(0 -22)'/%3E%3C/g%3E%3Ccircle r='10' fill='%23F2D7A0'/%3E%3C/g%3E%3Cg transform='translate(70 175) scale(0.6)'%3E%3Cg fill='%23CFE3F5'%3E%3Cellipse rx='14' ry='26' transform='rotate(0) translate(0 -22)'/%3E%3Cellipse rx='14' ry='26' transform='rotate(72) translate(0 -22)'/%3E%3Cellipse rx='14' ry='26' transform='rotate(144) translate(0 -22)'/%3E%3Cellipse rx='14' ry='26' transform='rotate(216) translate(0 -22)'/%3E%3Cellipse rx='14' ry='26' transform='rotate(288) translate(0 -22)'/%3E%3C/g%3E%3Ccircle r='10' fill='%23F2D7A0'/%3E%3C/g%3E%3Cg transform='translate(200 120) scale(0.45)'%3E%3Cg fill='%23E3D9F2'%3E%3Cellipse rx='14' ry='26' transform='rotate(0) translate(0 -22)'/%3E%3Cellipse rx='14' ry='26' transform='rotate(72) translate(0 -22)'/%3E%3Cellipse rx='14' ry='26' transform='rotate(144) translate(0 -22)'/%3E%3Cellipse rx='14' ry='26' transform='rotate(216) translate(0 -22)'/%3E%3Cellipse rx='14' ry='26' transform='rotate(288) translate(0 -22)'/%3E%3C/g%3E%3Ccircle r='10' fill='%23F2D7A0'/%3E%3C/g%3E%3C/svg%3E") no-repeat center/contain;pointer-events:none;z-index:0;opacity:.42}
body::before{left:-30px;bottom:-30px}body::after{right:-30px;top:80px;transform:scaleX(-1) rotate(180deg)}
@media(max-width:640px){body::before,body::after{opacity:.22}body::before{bottom:60px}}
main,footer,header{position:relative;z-index:1}
::selection{background:rgba(62,156,148,.25);color:var(--ink)}
.top{background:rgba(255,255,255,.8)!important;box-shadow:0 8px 30px -22px rgba(38,52,69,.5)!important;border-bottom:0!important}
.top::after{background:linear-gradient(90deg,transparent,rgba(184,138,59,.55),rgba(62,156,148,.5),rgba(184,138,59,.55),transparent)!important}
.brand,.brand b{color:var(--ink)!important}.brand small{color:var(--teal)!important}
.nav a{color:var(--ink2)!important}.nav a:hover{color:var(--teal)!important}
.nav a[aria-current]:not(.cta){color:var(--teal)!important;background:var(--mint)!important;border-radius:10px}
.nav a:not(.cta)::after{background:var(--teal)!important}
@media(max-width:640px){.nav{background:rgba(255,255,255,.94)!important;border-top:1px solid rgba(184,138,59,.3)!important;box-shadow:0 -8px 24px -18px rgba(38,52,69,.5)}}
.nav button,.nav .pill{color:var(--ink2)!important;border-color:rgba(184,138,59,.35)!important;background:#fff!important}
.langsw{background:#fff!important;border-color:rgba(184,138,59,.35)!important}.langsw button{color:var(--ink2)!important}.langsw button[aria-pressed=true]{background:var(--gold)!important;color:#fff!important}
h1,h2,h3,h4,.hdate{color:var(--ink)!important;text-shadow:none!important}
h1 em,h2 em{background:linear-gradient(100deg,#2F8C84,#B88A3B 60%,#D98A8A)!important;-webkit-background-clip:text!important;background-clip:text!important}
.eyebrow,.lbl,.eyebrow a{color:var(--teal)!important}.eyebrow::before{border-color:var(--gold)!important;box-shadow:none!important}
main p,main li,main .standfirst,main td{color:#4A586B!important}
main small,main cite,main th,main label,main figcaption{color:var(--ink2)!important}
main strong,main b{color:var(--ink)!important}
.ar,.dar,blockquote .ar{color:#7A5A1E!important}
.card,.box,.course-card,.lesson,.check,.key,.eg,.game,button.level,.dcard,.mk-card,.mk-form,.cb,.tcard,.gi,.ev li,.deeds label,.mk-steps label,ol.steps li,.finish,.progress,.mk-map,.dnote,.gnote,.mk-empty,.amal,.table-wrap,.module-head{background:var(--card)!important;border:1px solid rgba(184,138,59,.22)!important;box-shadow:0 14px 34px -24px rgba(38,52,69,.45)!important;color:var(--ink)!important}
.lesson[open]{background:#fff!important}
.key{background:linear-gradient(135deg,#FFF8E8,#fff)!important}.eg{background:linear-gradient(135deg,var(--sky),#fff)!important}.check{background:linear-gradient(135deg,var(--mint),#fff)!important}
.amal,.dnote,.gnote{background:linear-gradient(135deg,var(--mint),#fff 70%)!important;border-left:3px solid var(--teal)!important}
button.level:hover,.card:hover,.course-card:hover{border-color:rgba(62,156,148,.55)!important;box-shadow:0 22px 44px -24px rgba(38,52,69,.5)!important}
button.level::before{background:radial-gradient(420px 120px at 0% 50%,rgba(62,156,148,.10),transparent 70%)!important}
button.level .num{background:radial-gradient(circle at 35% 30%,#fff,var(--mint))!important;border-color:rgba(62,156,148,.45)!important;color:var(--teal)!important;box-shadow:0 0 0 5px rgba(62,156,148,.08)!important}
blockquote{background:linear-gradient(120deg,#FFF8E8,rgba(255,255,255,.9))!important;border:1px solid rgba(184,138,59,.25)!important;border-left:3px solid var(--gold)!important;color:var(--ink)!important}
.pill{background:#fff!important;color:var(--goldd)!important;border:1px solid rgba(184,138,59,.35)!important}
.pill.free,.free-tag{background:var(--teal)!important;color:#fff!important;border-color:var(--teal)!important}
.cta,.btn,.dplay,.mk-ig,.tb .p,.hg-go,.done-btn,.cert-make,#resume,.pdf-btn{background:linear-gradient(135deg,#F3DDA6,#D8B169 50%,#B88A3B)!important;color:#3A2A0C!important;border:0!important;box-shadow:0 8px 20px -10px rgba(184,138,59,.7),inset 0 1px 0 rgba(255,255,255,.6)!important}
.listen,.dlisten,.mk-mail,.tb .s,.mk-tabs button,.gfil button,.lnk,.dplay.on{background:#fff!important;color:var(--teal)!important;border:1px solid rgba(62,156,148,.45)!important}
.mk-tabs button[aria-pressed=true],.gfil button[aria-pressed=true],.listen.on{background:var(--teal)!important;color:#fff!important}
.opts button{background:#fff!important;color:var(--ink)!important;border:1px solid rgba(38,52,69,.15)!important}
.opts button.right{background:#DDF3E6!important;border-color:#4CA86F!important;color:#1F5E36!important}
.opts button.wrong{background:#FBE1E1!important;border-color:#D56B6B!important;color:#7A2323!important}
main input,main select,main textarea,.certbox input{background:#fff!important;color:var(--ink)!important;border:1px solid rgba(184,138,59,.4)!important}
input::placeholder,textarea::placeholder{color:#9AA6B5!important}
.flip .f,.flip .b{background:#fff!important;color:var(--ink)!important;border:1px solid rgba(184,138,59,.25)!important}.flip .b{background:var(--mint)!important}
.flip .f b{color:var(--ink)!important}.flip .f small{color:var(--teal)!important}
.slabel,.pmsg,.tmsg,.mk-msg,.game-msg,.cl-msg,.fire,.ainfo b,.letter .sig{color:var(--goldd)!important}
.dtr{color:var(--teal)!important}
.ev .n{background:var(--sky)!important;color:var(--teal)!important}.ev .n small{color:var(--teal)!important}
.ev li.grief .n{background:var(--blush)!important;color:#9A3B48!important}.ev li.grief .n small{color:#9A3B48!important}
.deeds label:has(input:checked),.mk-steps label:has(input:checked){background:var(--mint)!important;border-color:rgba(62,156,148,.5)!important}
.days i{background:#EFEAE0!important}.days i.on{background:var(--teal)!important}.days i.half{background:#9FD3CB!important}
.bar,.cbar{background:#EDE6D8!important}.bar i,.cbar i{background:linear-gradient(90deg,var(--teal),#8FD0C6)!important}
.gi figcaption b{color:var(--teal)!important}
.aplayer{background:rgba(255,255,255,.96)!important;border-color:rgba(184,138,59,.45)!important}.aplayer button{background:var(--teal)!important;color:#fff!important}.aplayer .x{background:transparent!important;color:var(--ink2)!important}
.stars path{fill:#F1EADC}.stars button.on path{fill:#E8B94A;stroke:#C99A2E}
footer{background:linear-gradient(180deg,transparent,rgba(227,242,238,.7))!important}footer::before{background:linear-gradient(90deg,transparent,rgba(62,156,148,.45),transparent)!important}
footer,footer span{color:var(--ink2)!important}footer b{color:var(--ink)!important}.flinks a{color:var(--ink2)!important}.flinks a:hover{color:var(--teal)!important}
#aqaSplash{background:radial-gradient(600px 420px at 50% 35%,rgba(244,199,207,.5),transparent 65%),radial-gradient(600px 500px at 20% 90%,rgba(181,220,203,.6),transparent 60%),#FBF7EF!important;color:var(--ink)!important}
#aqaSplash .sp-ar{background:linear-gradient(100deg,#2F8C84,#B88A3B 45%,#D98A8A 70%,#2F8C84)!important;-webkit-background-clip:text!important;background-clip:text!important;background-size:200% 100%!important}
#aqaSplash .sp-name{color:var(--ink)!important}#aqaSplash .sp-tr{color:var(--ink2)!important}#aqaSplash .sp-by{color:var(--teal)!important}#aqaSplash .sp-skip{color:#8A96A6!important}
.pdf-btn{display:inline-flex;align-items:center;gap:8px;margin-top:16px;padding:12px 20px;border-radius:999px;font:700 15px Manrope,system-ui,sans-serif;cursor:pointer}
.pdf-tip{margin:10px 0 0;color:var(--teal)!important;font-weight:600}
@media print{
 @page{margin:16mm}
 html,body{background:#fff!important;color:#000!important}
 body::before,body::after,.top,.nav,footer,.progress,.listen,.done-btn,#resume,.pdf-btn,.pdf-tip,.langsw,ins,.adsbygoogle,iframe,#aqaSplash,.certbox,.finish,.hookgen,.hint-line,.chev,.tick,.mq-result{display:none!important}
 *{box-shadow:none!important;text-shadow:none!important;animation:none!important;transition:none!important}
 .lesson,.check,.key,.eg,.game,.module-head,blockquote,ol.steps li,.flip .f,.flip .b{background:#fff!important;border:1px solid #ccc!important;break-inside:avoid}
 details.lesson>summary{font-size:18px;font-weight:700;color:#000!important;list-style:none}
 .check .why[hidden],.why{display:block!important}
 .flip{display:block!important;height:auto!important;perspective:none!important}.flip .f,.flip .b{position:static!important;transform:none!important;backface-visibility:visible!important;display:block!important;margin:4px 0!important;inset:auto!important}
 .flip-grid{display:block!important}
 .opts button[data-ok]{font-weight:700;border:2px solid #2E7D32!important}
 a{color:#000!important;text-decoration:none!important}
 main p,main li,main td,main small,main cite,h1,h2,h3,b,strong{color:#000!important}
 .ar{color:#000!important}
 .banner svg{max-height:200px}
}

/* Pastel illustrations: recolour the dark night scenes, keep the Ka'bah black */
main svg [stop-color="#0F1D3A"],main svg [stop-color="#0B1630"]{stop-color:#E4F1F2}
main svg [stop-color="#1C3260"],main svg [stop-color="#15274B"]{stop-color:#F7E8EE}
main svg [stop-color="#3A1420"]{stop-color:#F3D9DE}
main svg [fill="#08132A"]{fill:#8FC7BF}main svg [stroke="#08132A"]{stroke:#8FC7BF}
main svg [fill="#0B1630"],main svg [fill="#15274B"]{fill:#BBDCDD}main svg [stroke="#0B1630"]{stroke:#BBDCDD}
main svg [fill="#0F1D3A"]{fill:#F4EBDD}
main svg [fill="#E2C68C"]{fill:#C9A050}main svg [stroke="#E2C68C"]{stroke:#C9A050}
main .banner text,main .arch text{fill:#7A5A1E}
.arch{filter:drop-shadow(0 18px 30px rgba(62,90,110,.25))}
.banner figcaption{color:var(--ink2)!important}
.banner svg{border-radius:18px}

/* Keep the menu above the page so taps reach it */
header,.top{z-index:60!important}
@media(max-width:640px){.nav{z-index:70!important}}
/* Quran page */
.controls{background:rgba(255,255,255,.94)!important;border-bottom:1px solid rgba(184,138,59,.25)!important;padding-left:10px!important;padding-right:10px!important;border-radius:0 0 14px 14px}
.qbtn.ghost{background:#fff!important;color:var(--teal)!important;border-color:rgba(62,156,148,.45)!important}
.ayah .en{color:#4A586B!important}.ayah .ar,.sbism{color:var(--ink)!important}.shead .ar{color:#8E6522!important}
.ayah .num{color:var(--teal)!important}.ayah .play{color:var(--teal)!important;border-color:rgba(62,156,148,.45)!important;background:#fff!important}
.ayah.playing{background:var(--mint)!important}
.ayah .tools button{color:var(--ink2)!important;background:#fff!important}
.tabs button{color:var(--ink2)!important;background:#fff!important}.tabs button[aria-selected=true]{background:var(--teal)!important;color:#fff!important;border-color:var(--teal)!important}
.player{background:rgba(255,255,255,.96)!important;box-shadow:0 16px 36px -18px rgba(38,52,69,.5)!important}.player span{color:var(--ink)!important}.player button{background:var(--teal)!important;color:#fff!important}
.gen .ref{color:var(--goldd)!important}.gen canvas{box-shadow:0 24px 50px -24px rgba(38,52,69,.5)!important}