/* ReciteQuran.love — "Playful Premium" kids-first theme. Vanilla CSS. No frameworks.
   Logo-matched palette: bright blue + vivid purple (from the ReciteQuran wordmark),
   sunny yellow star accents + coral on clean cream. */
:root{
  --bg:#FFFDF8; --bg-deep:#FFEECB; --card:#FFFFFF; --card-soft:#FFF9EF;
  --teal:#0E7CE6; --teal-deep:#0A5FC4; --teal-ink:#084B9C; --teal-soft:#D7E9FD;
  --sunny:#FFBC1F; --sunny-deep:#EAA200; --sunny-ink:#7A5200; --sunny-soft:#FFEAB5;
  --coral:#FF5656; --coral-deep:#D63D3D; --coral-soft:#FFDCDC;
  --purple:#A63DF5; --purple-deep:#8630D8; --purple-soft:#EFD9FF;
  --sky:#42A0F5; --sky-deep:#0E7CE6; --sky-soft:#D7E9FD;
  --ink:#2D3142; --muted:#596074; --faint:#949AAD;
  --line:rgba(45,49,66,.18);
  --radius:26px; --radius-sm:18px;
  --shadow:0 18px 44px -18px rgba(14,124,230,.35);
  --shadow-sm:0 8px 22px -10px rgba(45,49,66,.16);
  --shadow-sunny:0 14px 32px -14px rgba(255,201,60,.65);
  --font-display:"Baloo 2","Fredoka",ui-rounded,system-ui,sans-serif;
  --font-ui:"Nunito",ui-rounded,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --font-quran:"Amiri Quran","Amiri","Scheherazade New",serif;
}
html[data-theme="dark"]{
  --bg:#1B1C31; --bg-deep:#131427; --card:#24253F; --card-soft:#2B2C4B;
  --ink:#F8F5EA; --muted:#B9BDCB; --faint:#8B90A5;
  --line:rgba(255,201,60,.16);
  --shadow:0 18px 44px -18px rgba(0,0,0,.6);
  --shadow-sm:0 8px 22px -10px rgba(0,0,0,.5);
  --teal-soft:#14293F; --sunny-soft:#3A2F10; --coral-soft:#3D2126;
  --purple-soft:#2E2145; --sky-soft:#1C2A4A;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;font-family:var(--font-ui);background:var(--bg);color:var(--ink);
  line-height:1.65;font-size:16.5px;font-weight:500;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  background-image:radial-gradient(rgba(14,124,230,.07) 1.6px,transparent 1.6px),
    radial-gradient(rgba(255,201,60,.10) 1.6px,transparent 1.6px);
  background-size:44px 44px,44px 44px;background-position:0 0,22px 22px;
}
html[data-theme="dark"] body{background-image:radial-gradient(rgba(14,124,230,.06) 1.6px,transparent 1.6px)}
::selection{background:var(--sunny);color:var(--teal-ink)}
.arabic{font-family:var(--font-quran);line-height:2.1;unicode-bidi:isolate}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--teal-deep);color:#fff;padding:.7rem 1.1rem;border-radius:0 0 12px 0;z-index:99;font-weight:700}
.skip-link:focus{left:0;color:#fff}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
:focus-visible{outline:3px solid var(--teal-deep);outline-offset:2px;border-radius:8px}

/* ---------- Header ---------- */
.topbar{position:sticky;top:0;z-index:50;
  background:var(--bg);
  border-bottom:2px solid var(--line);
  box-shadow:0 6px 24px -18px rgba(10,95,196,.35)}
.app-header{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.45rem 1.25rem}
.wordmark{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none}
.logo-mark{width:40px;height:40px;flex:none;filter:drop-shadow(0 4px 8px rgba(14,124,230,.3))}
.wordmark-text{font-family:var(--font-display);font-weight:800;font-size:1.45rem;letter-spacing:-.01em;color:var(--ink)}
.wordmark-text em{font-style:normal;color:var(--coral)}
.header-actions{display:flex;gap:.5rem;align-items:center}
.xp-pill{display:inline-flex;align-items:center;gap:.4rem;background:var(--sunny);color:var(--teal-ink);
  font-family:var(--font-display);font-weight:800;font-size:.92rem;padding:.45rem .95rem;border-radius:999px;
  box-shadow:var(--shadow-sunny);border-bottom:3px solid var(--sunny-deep)}
.xp-star{width:16px;height:16px;fill:var(--coral)}
.icon-btn{border:2px solid var(--line);background:var(--card);border-radius:16px;width:2.7rem;height:2.7rem;
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center;box-shadow:var(--shadow-sm);
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease}
.icon-btn svg{width:20px;height:20px;fill:none;stroke:var(--teal-deep);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.icon-btn:hover{transform:translateY(-2px) rotate(-4deg);box-shadow:var(--shadow)}
.icon-btn:active{transform:scale(.92)}
.icon-btn[aria-pressed="true"]{background:var(--sunny-soft);border-color:var(--sunny-deep);box-shadow:var(--shadow-sunny)}

/* ---------- Nav (single-line header) ---------- */
.app-nav{display:flex;gap:.15rem;align-items:center;padding:0;margin:0 auto}
.app-nav a{display:inline-flex;flex-direction:row;align-items:center;gap:.45rem;text-decoration:none;color:var(--muted);
  font-family:var(--font-display);font-size:.86rem;font-weight:700;letter-spacing:.02em;white-space:nowrap;
  padding:.52rem .78rem;border-radius:14px;transition:all .2s ease;border:2px solid transparent}
.app-nav a svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.app-nav a:hover{color:var(--teal-deep);background:var(--teal-soft);transform:translateY(-2px)}
.app-nav a.active{color:#fff;background:var(--teal);border-bottom:4px solid var(--teal-deep);box-shadow:var(--shadow-sm)}
.app-nav a.active svg{stroke:#fff}

/* ---------- Layout & type ---------- */
.view{max-width:980px;margin:0 auto;padding:1.25rem 1.25rem 5rem}
.view>*{animation:rise .55s cubic-bezier(.2,.9,.3,1.15) backwards}
.view>*:nth-child(2){animation-delay:.05s}.view>*:nth-child(3){animation-delay:.1s}
.view>*:nth-child(4){animation-delay:.15s}.view>*:nth-child(5){animation-delay:.2s}
@keyframes rise{from{opacity:0;transform:translateY(18px) scale(.99)}to{opacity:1;transform:none}}
.card{background:var(--card);border:2px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:1.7rem;margin-bottom:1.3rem;position:relative}
.card.soft{background:var(--card-soft);box-shadow:var(--shadow-sm)}
.grid{display:grid;gap:1rem}
@media(min-width:640px){.grid.cols-2{grid-template-columns:1fr 1fr}.grid.cols-3{grid-template-columns:1fr 1fr 1fr}}
h1.hero-title{font-family:var(--font-display);font-size:2.2rem;line-height:1.15;margin:.2rem 0 .7rem;
  letter-spacing:-.01em;font-weight:800;color:var(--ink)}
h2{font-family:var(--font-display);font-size:1.5rem;margin:.2rem 0 .8rem;font-weight:800;letter-spacing:-.01em}
h3{font-size:1.05rem;margin:.4rem 0 .5rem;font-weight:800;font-family:var(--font-display)}
/* Premium raised title effect - subtle emboss for depth and sharpness */
h1,h2,h3,.section-title,.eyebrow,.hero-title,.hb-text h1{
  text-shadow:0 1px 0 rgba(255,255,255,.65),0 2px 3px rgba(20,40,60,.12),0 4px 12px rgba(20,40,60,.08);
}
html[data-theme="dark"] h1,html[data-theme="dark"] h2,html[data-theme="dark"] h3,
html[data-theme="dark"] .section-title,html[data-theme="dark"] .eyebrow,
html[data-theme="dark"] .hero-title{
  text-shadow:0 1px 0 rgba(255,255,255,.08),0 2px 4px rgba(0,0,0,.45),0 6px 18px rgba(0,0,0,.3);
}
.lead{color:var(--muted);font-size:1.04rem}
.eyebrow{display:inline-block;font-size:.74rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  color:var(--coral-deep);margin-bottom:.6rem;font-family:var(--font-display)}
.section-title{display:flex;align-items:center;gap:.8rem;margin:1.8rem 0 1rem;flex-wrap:wrap}
.section-title h2{margin:0}
.section-title::after{content:"";flex:1;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--teal),var(--sunny),transparent)}
.kicker{display:inline-flex;align-items:center;font-family:var(--font-display);font-weight:800;
  font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;padding:.32rem .85rem;border-radius:999px}
.kicker-teal{background:var(--teal-soft);color:var(--teal-deep);border:2px solid var(--teal)}
.kicker-sunny{background:var(--sunny-soft);color:var(--sunny-ink);border:2px solid var(--sunny)}
.divider-orn{display:flex;align-items:center;gap:.7rem;margin:1.2rem auto;max-width:280px;color:var(--sunny-deep)}
.divider-orn::before,.divider-orn::after{content:"";flex:1;height:3px;border-radius:3px;background:linear-gradient(90deg,transparent,var(--sunny),transparent)}

/* ---------- Buttons (chunky & cheerful) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border-radius:999px;
  padding:.9rem 1.9rem;font-family:var(--font-display);font-weight:800;font-size:1.05rem;cursor:pointer;
  text-decoration:none;border:none;transition:transform .15s ease,box-shadow .15s ease;
  border-bottom:4px solid rgba(0,0,0,.14)}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(2px);border-bottom-width:1px}
.btn-primary{background:linear-gradient(180deg,var(--sunny),#FFB82E);color:var(--teal-ink);
  border-bottom-color:var(--sunny-deep);box-shadow:var(--shadow-sunny)}
.btn-emerald{background:linear-gradient(135deg,#0E7CE6,#A63DF5);color:#fff;
  border-bottom-color:var(--teal-ink);box-shadow:var(--shadow)}
.btn-ghost{background:var(--card);border:2px solid var(--teal);color:var(--teal-deep);box-shadow:none;border-bottom-width:4px;border-bottom-color:var(--teal-deep)}
.btn-sm{padding:.6rem 1.2rem;font-size:.9rem}
.btn-blue{background:linear-gradient(180deg,var(--sky),var(--sky-deep));color:#fff;border-bottom-color:var(--sky-deep)}
.btn-green{background:linear-gradient(180deg,#3ED598,var(--teal-deep));color:#fff;border-bottom-color:var(--teal-ink)}
.btn-purple{background:linear-gradient(180deg,var(--purple),var(--purple-deep));color:#fff;border-bottom-color:var(--purple-deep)}
.btn-ink{background:var(--ink);color:#fff;border-bottom-color:#000}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;border-radius:calc(var(--radius) + 8px);
  background:linear-gradient(135deg,#00B3A1 0%,var(--teal) 55%,var(--teal-deep) 100%);
  color:#fff;padding:3.2rem 2rem;text-align:center;margin-bottom:1.5rem;
  box-shadow:var(--shadow);border-bottom:6px solid rgba(0,0,0,.08)}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.28;
  background-image:radial-gradient(rgba(255,255,255,.22) 2.2px,transparent 2.2px);
  background-size:34px 34px}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(120px 120px at 12% 18%,rgba(255,201,60,.5),transparent 70%),
    radial-gradient(150px 150px at 88% 82%,rgba(255,107,107,.4),transparent 70%),
    radial-gradient(90px 90px at 82% 14%,rgba(255,255,255,.25),transparent 70%)}
.hero>*{position:relative;z-index:1}
.hero .hero-ar{font-family:var(--font-quran);font-size:2.1rem;line-height:2;color:#FFF9E3;margin:0 0 .4rem;
  text-shadow:0 2px 12px rgba(0,0,0,.2)}
.hero .eyebrow{color:var(--sunny)}
.hero h1{font-family:var(--font-display);font-weight:800;font-size:2.6rem;line-height:1.1;
  letter-spacing:-.015em;margin:.2rem 0 .8rem;color:#fff;text-shadow:0 3px 0 rgba(0,0,0,.12)}
.hero h1 em{font-style:normal;color:var(--sunny)}
.hero p.lead{color:#EAFBF8;max-width:34rem;margin:0 auto 1.5rem;font-size:1.06rem;font-weight:600}
.hero-cta{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap}
.hero-stats{display:flex;gap:1.8rem;justify-content:center;flex-wrap:wrap;margin-top:1.8rem;
  padding-top:1.4rem;border-top:2px dashed rgba(255,255,255,.4)}
.hero-stats div{display:flex;flex-direction:column;align-items:center;text-align:center}
.hero-stats b{display:block;font-family:var(--font-display);font-size:1.6rem;color:var(--sunny);
  text-shadow:0 2px 0 rgba(0,0,0,.12)}
.hero-stats span{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:#DFF7F3;
  font-weight:800;font-family:var(--font-display);margin-right:-.14em}

/* ---------- Full-page illustrated banner hero ---------- */
html,body{overflow-x:clip}
.hero-banner{position:relative;overflow:hidden;
  width:100vw;max-width:none;margin:-1.25rem calc(50% - 50vw) 2.5rem;border-radius:0;
  background:#EDF4FB;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 26px 60px -22px rgba(10,95,196,.5)}
/* Image-sized wrapper: overlay tracks the image on every screen */
.hb-media{position:relative;display:block;width:100vw;max-width:100vw;line-height:0}
.hb-bg{display:block;width:100%;height:auto;max-height:none}
.hb-bg img{display:block;width:100%;height:auto}
/* Overlay locked to the image's left content zone, anchored near the top
   so it stays in the visible fold at every aspect ratio */
.hb-text{position:absolute;inset:0;z-index:2;display:flex;align-items:flex-end;justify-content:flex-start;
  padding:0 0 4.5% 7%;line-height:1.4;pointer-events:none}
.hb-text .hb-inner,.hb-text .hb-cta{pointer-events:auto}
.hb-inner{position:absolute;left:26%;top:72%;transform:translateX(-50%);max-width:none;margin:0;display:flex;flex-direction:column;align-items:center;text-align:center}
/* Banner artwork carries the branding; headline kept for SEO + screen readers */
.hb-text h1{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.hb-l1{display:block;color:#24306E}
.hb-l2{display:block;background:linear-gradient(94deg,var(--teal-deep) 8%,var(--sky-deep) 92%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hb-sub{font-family:var(--font-display);font-weight:700;font-size:1.3rem;color:#24306E;margin:0 0 1.4rem}
.hb-sub b{color:var(--teal-deep);margin:0 .35rem;font-weight:800}
.hb-cta{display:inline-flex;align-items:center;gap:.6rem;background:linear-gradient(135deg,#0E7CE6 10%,#A63DF5 90%);
  color:#fff;font-family:var(--font-display);font-weight:800;font-size:clamp(1.15rem,1.6vw,2rem);
  padding:clamp(1rem,1.4vw,1.6rem) clamp(2.4rem,3vw,3.8rem);border-radius:999px;border:none;border-bottom:5px solid var(--teal-deep);
  box-shadow:0 14px 30px -10px rgba(10,95,196,.55);text-decoration:none}
.hb-cta:hover{transform:translateY(-2px)}
.hb-cta span{font-size:1.3rem;line-height:1}
.hb-chips{display:flex;gap:1.6rem;margin-top:1.8rem}
.hb-chip{display:flex;flex-direction:column;align-items:center;gap:.5rem;
  font-family:var(--font-display);font-weight:700;font-size:.95rem;color:#24306E}
.hb-ico{width:62px;height:62px;border-radius:50%;display:grid;place-items:center;
  box-shadow:0 10px 22px -8px rgba(45,49,66,.25);border:3px solid #fff}
.hb-ico-blue{background:#DCEBFF;color:#2F6FED}
.hb-ico-yellow{background:#FFEFC0;color:#B97F00}
.hb-ico-pink{background:#FFDCDC;color:#D63D3D}
/* Headline hidden by default; shown only on phones where hero stacks below the image */
.hb-title{display:none}
@media(max-width:680px){
  /* Full-screen banner hero on phones: image fills the viewport,
     logo + CTA embedded inside it, no headline text */
  .hero-banner{min-height:calc(100vh - 112px);min-height:calc(100svh - 112px);align-items:stretch}
  .hb-media{width:100%;height:calc(100vh - 112px);height:calc(100svh - 112px)}
  .hb-bg{width:100%;height:100%}
  .hb-bg img{width:100%;height:100%;object-fit:cover;object-position:center}
  .hb-text{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;
    padding:2rem 1.5rem;line-height:1.4;pointer-events:none;
    background:linear-gradient(180deg,rgba(13,42,90,.20) 0%,rgba(13,42,90,0) 32%,rgba(13,42,90,0) 58%,rgba(13,42,90,.32) 100%)}
  .hb-inner{position:static;transform:none;left:auto;top:auto;max-width:92%;margin:0 auto;align-items:center;text-align:center}
  /* Portrait banner carries the branding; no duplicate logo overlay */
  .hb-logo{display:none}
  /* Headline removed on phones — hero is banner + logo + CTA only */
  .hb-title{display:none}
  .hb-text h1{display:none}
  .hb-sub{display:none}
  .hb-cta{font-size:1.05rem;padding:.95rem 2.2rem}
  .hb-chips{display:none}
  .hb-ico{width:54px;height:54px}
}
@media(max-width:380px){
  .hb-chips{gap:.8rem}
  .hb-chip{font-size:.85rem}
}

/* ---------- Pills ---------- */
.btn-sm{padding:.6rem 1.2rem;font-size:.9rem}
.pill{display:inline-flex;align-items:center;gap:.3rem;font-size:.72rem;font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;padding:.34rem .8rem;border-radius:999px;font-family:var(--font-display);
  background:var(--sunny-soft);color:var(--sunny-ink);border:2px solid rgba(255,201,60,.5)}
.pill.green{background:var(--teal-soft);color:var(--teal-ink);border-color:rgba(14,124,230,.4)}
.pill.blue{background:var(--sky-soft);color:var(--sky-deep);border-color:rgba(77,150,255,.4)}
.pill.red{background:var(--coral-soft);color:var(--coral-deep);border-color:rgba(255,107,107,.4)}
.pill.dark{background:#3a3a3a;color:#fff;border-color:#222}
.pill.purple{background:var(--purple-soft);color:var(--purple-deep);border-color:rgba(155,93,229,.4)}

/* ---------- Phase cards ---------- */
.phase-card{display:flex;gap:1.1rem;align-items:center;background:var(--card);border:2px solid var(--line);
  border-radius:var(--radius-sm);padding:1.15rem 1.25rem;text-decoration:none;color:var(--ink);
  box-shadow:var(--shadow-sm);position:relative;overflow:hidden;transition:transform .18s ease,box-shadow .18s ease}
.phase-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:7px;border-radius:7px;
  background:linear-gradient(180deg,var(--sunny),var(--coral));opacity:0;transition:opacity .18s ease}
.phase-card:hover{transform:translateY(-3px) rotate(-.4deg);box-shadow:var(--shadow)}
.phase-card:hover::before{opacity:1}
.phase-card:active{transform:scale(.98)}
.phase-card h3{margin:.1rem 0 .25rem}
.phase-card p{margin:0;color:var(--muted);font-size:.92rem}
.phase-icon{flex:0 0 3.6rem;width:3.6rem;height:3.6rem;border-radius:20px;display:flex;align-items:center;
  justify-content:center;box-shadow:var(--shadow-sm);transform:rotate(-4deg);
  background:linear-gradient(135deg,var(--teal),var(--teal-deep))}
.phase-icon .ph-num{font-family:var(--font-display);font-weight:800;font-size:1.25rem;color:#fff}
.phase-icon.c-blue,.phase-icon.c-green,.phase-icon.c-pink,.phase-icon.c-orange,.phase-icon.c-purple{transform:rotate(-4deg)}
.phase-icon.c-blue{background:linear-gradient(135deg,#3D8BFF,#2F6FED)}
.phase-icon.c-green{background:linear-gradient(135deg,#00A390,#007A6A)}
.phase-icon.c-pink{background:linear-gradient(135deg,#FF5656,#D63D3D)}
.phase-icon.c-orange{background:linear-gradient(135deg,#FFBC1F,#EAA200)}
.phase-icon.c-purple{background:linear-gradient(135deg,#8E4BE6,#7C3FCE)}
.phase-step{font-size:.7rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--teal-deep);
  font-family:var(--font-display)}

/* ---------- Journey card ---------- */
.journey-card{display:flex;gap:1.4rem;align-items:center;flex-wrap:wrap;
  background:linear-gradient(180deg,var(--card),var(--card-soft))}
.progress-ring{width:120px;height:120px;flex:none}
.journey-card .progress-ring{width:88px;height:88px}
.progress-track{fill:none;stroke:var(--line);stroke-width:10}
.progress-fill{fill:none;stroke:url(#goldGrad);stroke-width:10;stroke-linecap:round;
  transform:rotate(-90deg);transform-origin:center;transition:stroke-dashoffset .8s cubic-bezier(.2,.9,.3,1.2)}
.journey-card .stat-trio>div{background:linear-gradient(180deg,var(--card-soft),var(--bg-deep));
  border-top:3px solid var(--sunny)}
.journey-card .stat-trio b{font-size:1.85rem}
.stat-trio{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;margin:.4rem 0 0}
.stat-trio>div{background:var(--card-soft);border:2px solid var(--line);border-radius:var(--radius-sm);
  padding:1rem .6rem;text-align:center}
.stat-trio b{display:block;font-family:var(--font-display);font-size:1.7rem;color:var(--teal-deep);font-weight:800}
.stat-trio span{font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  font-weight:800;font-family:var(--font-display)}
.stat-trio>div:nth-child(1) b{color:var(--teal-deep)}
.stat-trio>div:nth-child(2) b{color:var(--sunny-deep)}
.stat-trio>div:nth-child(3) b{color:var(--coral-deep)}

/* ---------- Letter cards (alphabet) ---------- */
.letter-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:.8rem}
.letter-card{background:var(--card);border:2px solid var(--line);border-radius:22px;padding:1rem .5rem;
  text-align:center;box-shadow:var(--shadow-sm);transition:transform .18s ease,box-shadow .18s ease;cursor:pointer}
.letter-card:hover{transform:translateY(-4px) rotate(1deg);box-shadow:var(--shadow);border-color:var(--teal)}
.letter-card .big{font-family:var(--font-quran);font-size:2.6rem;line-height:1.6;color:var(--teal-deep)}
html[data-theme="dark"] .letter-card .big{color:var(--sunny)}
.letter-card .nm{font-weight:800;font-family:var(--font-display);font-size:.95rem}
.letter-card .tr{color:var(--muted);font-size:.8rem}
.letter-card .row{display:flex;gap:.35rem;justify-content:center;align-items:center;margin-top:.6rem;
  flex-wrap:wrap;max-width:100%}
.letter-card .row>*{min-width:0;max-width:100%;flex:none}
.letter-card .row .mini-btn{white-space:normal;line-height:1.35;padding:.5rem .6rem;font-size:.74rem}

/* ---------- Quizzes ---------- */
.quiz{display:grid;gap:1rem}
.quiz-q{font-weight:700;font-size:1.06rem;margin:.4rem 0 .9rem;font-family:var(--font-display)}
.quiz-opts{display:grid;gap:.6rem}
.quiz-opt{border:2px solid var(--line);background:var(--card);border-radius:16px;padding:.85rem 1.1rem;
  font-size:.98rem;font-weight:700;cursor:pointer;text-align:left;color:var(--ink);font-family:var(--font-ui);
  transition:all .18s ease}
.quiz-opt:hover:not(:disabled){border-color:var(--teal);transform:translateX(4px);box-shadow:var(--shadow-sm)}
.quiz-opt.correct{background:var(--teal-soft);border-color:var(--teal);color:var(--teal-ink)}
.quiz-opt.wrong{background:var(--coral-soft);border-color:var(--coral-deep);color:var(--coral-deep)}
.quiz-mark{font-weight:900;font-size:1.1em;margin-right:.3rem}
.quiz-opt{min-height:44px}
.mini-btn{min-height:32px;min-width:32px}
.audio-btn{min-width:44px;min-height:44px}
/* Follow-along word tracker */
.word-hl{background:linear-gradient(135deg,#FFD54F,#FFB300);color:#1a1a2e;border-radius:8px;padding:0 .3rem;box-shadow:0 2px 8px rgba(255,179,0,.5);transition:background .2s}
.follow-toggle{display:flex;align-items:center;gap:.5rem;font-size:.9rem;font-weight:700}
/* Hifz buckets */
.hifz-bucket{border-left:4px solid var(--teal);padding-left:.8rem;margin-bottom:1rem}
.hifz-bucket.sabaq{border-color:#FFB300}
.hifz-bucket.sabaqi{border-color:var(--teal)}
.hifz-bucket.manzil{border-color:var(--purple,#7B61FF)}
.hifz-check{display:flex;align-items:center;gap:.7rem;padding:.6rem;border:2px solid var(--line);border-radius:12px;margin-bottom:.5rem;cursor:pointer}
.hifz-check input{width:22px;height:22px;accent-color:var(--teal-deep)}
.hifz-check.done{border-color:var(--teal);background:var(--teal-soft)}
/* Parent heatmap */
.heatmap{display:grid;grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:.4rem;margin:.8rem 0}
.heat-cell{aspect-ratio:1;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:800;color:#fff;min-height:44px;text-decoration:none}
.heat-0{background:#3a3a5e}
.heat-1{background:#0A5FC4}
.heat-2{background:#0E7CE6}
.heat-3{background:#00A86B}
.heat-4{background:#FFB300;color:#1a1a2e}
/* Print styles for parent summary */
@media print{
  body>*{display:none!important}
  #printSummary{display:block!important;position:static!important}
  #printSummary .no-print{display:none!important}
}

/* ---------- Recorder ---------- */
.recorder{display:flex;gap:.7rem;flex-wrap:wrap;align-items:center;background:var(--card-soft);
  border:2px solid var(--line);border-radius:var(--radius-sm);padding:1rem;margin-top:.9rem}
.rec-dot{width:.8rem;height:.8rem;border-radius:50%;background:#c9c2b4;display:inline-block;margin-right:.45rem}
.rec-dot.on{background:var(--coral-deep);animation:blink 1s infinite}
@keyframes blink{50%{opacity:.25}}
.practice-note{font-size:.82rem;color:var(--muted);font-style:italic}

/* ---------- Tajweed colors (official AlQuran Cloud scheme — do not alter) ---------- */
.tw-ham_wasl{color:#AAAAAA}.tw-slnt{color:#AAAAAA}
.tw-madda_normal{color:#537FFF;font-weight:700}.tw-madda_permissible{color:#4050FF;font-weight:700}
.tw-madda_necessary{color:#000EBC;font-weight:700}.tw-qlq{color:#DD0008;font-weight:700}
.tw-madda_obligatory{color:#2144C1;font-weight:700}.tw-ikhf_shfw{color:#D500B7;font-weight:700}
.tw-ikhf{color:#9400A8;font-weight:700}.tw-idghm_shfw{color:#58B800;font-weight:700}
.tw-iqlb{color:#26BFFD;font-weight:700}.tw-idgh_ghn{color:#169777;font-weight:700}
.tw-idgh_w_ghn{color:#169200;font-weight:700}.tw-idgh_mus{color:#A1A1A1;font-weight:700}
.tw-idgh_mut{color:#A1A1A1;font-weight:700}.tw-ghn{color:#FF7E1E;font-weight:700}
html[data-theme="dark"] .tw-madda_necessary{color:#8f9bff}
html[data-theme="dark"] .tw-madda_normal{color:#8fa5ff}
html[data-theme="dark"] .tw-madda_permissible{color:#8f96ff}
html[data-theme="dark"] .tw-madda_obligatory{color:#7f93e8}
html[data-theme="dark"] .tw-qlq{color:#ff7b85}
html[data-theme="dark"] .tw-ikhf{color:#d47fe0}
html[data-theme="dark"] .tw-ikhf_shfw{color:#f06fd0}
html[data-theme="dark"] .tw-iqlb{color:#7fd4f7}
html[data-theme="dark"] .tw-slnt,html[data-theme="dark"] .tw-ham_wasl{color:#8f8f8f}
.legend{display:flex;flex-wrap:wrap;gap:.45rem;margin:.9rem 0}
.legend .pill{cursor:default;text-transform:none;letter-spacing:.02em;font-size:.76rem;
  background:var(--card);border:2px solid var(--line);box-shadow:var(--shadow-sm);
  padding:.42rem .85rem;color:var(--ink);font-weight:700;font-family:var(--font-ui)}
.legend .pill [class*="tw-"]{font-size:.95rem;line-height:1}
.example-ar{font-size:1.8rem;line-height:2.2;background:var(--card-soft);border:2px solid var(--line);
  border-radius:var(--radius-sm);padding:1rem;text-align:center}

/* ---------- Quran reader ---------- */
.searchbar{width:100%;border:2px solid var(--line);border-radius:999px;padding:.85rem 1.3rem;font-size:1rem;
  font-weight:600;background:var(--card);color:var(--ink);font-family:var(--font-ui);
  transition:border-color .18s ease,box-shadow .18s ease}
.searchbar:focus{border-color:var(--teal);box-shadow:0 0 0 4px rgba(14,124,230,.18);outline:none}
.surah-row{display:flex;align-items:center;gap:1rem;background:var(--card);border:2px solid var(--line);
  border-radius:var(--radius-sm);box-shadow:var(--shadow-sm);padding:.85rem 1.1rem;margin-bottom:.65rem;
  text-decoration:none;color:var(--ink);transition:transform .18s ease,box-shadow .18s ease}
.surah-row:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--teal)}
.surah-row:active{transform:scale(.99)}
.surah-num{flex:0 0 2.7rem;width:2.7rem;height:2.7rem;border-radius:16px;
  background:linear-gradient(135deg,var(--teal),var(--teal-deep));
  color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.95rem;
  font-family:var(--font-display);box-shadow:var(--shadow-sm)}
.surah-row .meta{flex:1;min-width:0}.surah-row .meta b{font-size:1rem;font-family:var(--font-display);font-weight:700}
.surah-row .meta small{color:var(--muted);display:block;font-size:.8rem}
.surah-row .ar{font-size:1.6rem;color:var(--teal-deep)}
html[data-theme="dark"] .surah-row .ar{color:var(--sunny)}
.reader-head{text-align:center;padding:2.2rem 1.5rem 1.6rem}
.reader-head h1{font-family:var(--font-quran);font-size:2.6rem;line-height:1.8;margin:.3rem 0;color:var(--teal-deep)}
html[data-theme="dark"] .reader-head h1{color:var(--sunny)}
.reader-toggles{display:flex;gap:.9rem;flex-wrap:wrap;margin:.8rem 0;justify-content:center}
.reciter-bar{display:flex;align-items:center;gap:.7rem;justify-content:center;flex-wrap:wrap;
  background:#fff;border:2.5px solid var(--teal);border-radius:999px;padding:.45rem .5rem .45rem 1.1rem;
  margin:.9rem auto;max-width:560px;box-shadow:var(--shadow-sm)}
html[data-theme="dark"] .reciter-bar{background:var(--card)}
.reciter-bar .rb-label{color:var(--teal-deep);font-size:.76rem;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;font-family:var(--font-display)}
html[data-theme="dark"] .reciter-bar .rb-label{color:var(--sunny)}
.reciter-bar select{appearance:none;-webkit-appearance:none;border:none;border-radius:999px;
  padding:.55rem 2.5rem .55rem 1.25rem;font-family:var(--font-display);font-weight:800;
  font-size:.9rem;background-color:var(--sunny);color:var(--teal-ink);cursor:pointer;max-width:100%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5l3.5 3.5 3.5-3.5' fill='none' stroke='%2300695C' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1rem center;
  border-bottom:3px solid var(--sunny-deep)}
.reciter-bar select:focus{outline:3px solid var(--teal-deep);outline-offset:2px}
.ayah{background:var(--card);border:2px solid var(--line);border-radius:var(--radius-sm);
  padding:1.3rem 1.4rem;margin-bottom:1rem;box-shadow:var(--shadow-sm);transition:transform .18s ease}
.ayah:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.ayah-text{font-size:1.7rem;line-height:2.2;margin:0;color:var(--ink)}
.ayah-num{display:inline-block;background:var(--teal);color:#fff;border-radius:999px;font-size:.74rem;
  padding:.14rem .68rem;margin:0 .65rem;font-weight:800;font-family:var(--font-display);vertical-align:middle;
  border:2px solid var(--sunny);box-shadow:0 2px 8px -2px rgba(10,95,196,.45)}
.ayah-tools{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.8rem;align-items:center}
.ayah-translit{color:var(--muted);font-style:italic;margin:.45rem 0 0;font-size:.95rem}
.ayah-en{margin:.45rem 0 0;font-size:.98rem}
.audio-btn{width:2.7rem;height:2.7rem;border-radius:50%;border:none;cursor:pointer;flex:none;
  background:linear-gradient(180deg,var(--teal),var(--teal-deep));color:#fff;
  display:inline-flex;align-items:center;justify-content:center;
  box-shadow:0 6px 16px -6px rgba(14,124,230,.6);border-bottom:3px solid var(--teal-ink);
  transition:transform .15s ease}
.audio-btn svg{width:16px;height:16px;fill:currentColor}
.audio-btn:hover{transform:scale(1.12) rotate(-6deg)}
.audio-btn:active{transform:scale(.92)}
.audio-btn.playing{animation:bob 1s ease-in-out infinite}
@keyframes bob{50%{transform:scale(1.1)}}
.mini-btn{border:2px solid var(--line);background:var(--card);border-radius:999px;padding:.46rem .9rem;
  font-weight:800;font-size:.78rem;font-family:var(--font-display);cursor:pointer;color:var(--ink);
  transition:all .15s ease}
.mini-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm);border-color:var(--teal);color:var(--teal-deep)}
.mini-btn.go{background:transparent;color:var(--teal-deep);border:2px solid var(--teal)}
html[data-theme="dark"] .mini-btn.go{color:var(--sunny);border-color:var(--sunny-deep)}
.mini-btn.done{background:var(--teal-soft);color:var(--teal-ink);border-color:var(--teal)}

/* ---------- Custom toggle switches ---------- */
.switch{display:inline-flex;align-items:center;gap:.55rem;font-weight:700;font-size:.88rem;cursor:pointer;
  padding:.5rem 1rem .5rem .55rem;border-radius:999px;border:2px solid var(--line);background:var(--card);
  transition:border-color .18s ease,background .18s ease,box-shadow .18s ease;user-select:none;font-family:var(--font-ui)}
.switch:hover{box-shadow:var(--shadow-sm);transform:translateY(-1px)}
.switch input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.switch-track{width:2.4rem;height:1.35rem;border-radius:999px;background:var(--bg-deep);
  border:2px solid var(--line);position:relative;transition:background .18s ease,border-color .18s ease;flex:none}
.switch-knob{position:absolute;top:50%;left:.16rem;transform:translateY(-50%);width:.95rem;height:.95rem;
  border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.28);transition:left .18s ease}
.switch input:checked+.switch-track{background:var(--teal);border-color:var(--teal-deep)}
.switch input:checked+.switch-track .switch-knob{left:1.1rem;background:var(--sunny)}
.switch input:focus-visible+.switch-track{outline:3px solid var(--teal-deep);outline-offset:2px}
.switch:has(input:checked){border-color:var(--teal)}

/* ---------- Hifz ---------- */
.checkin-row{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.6rem}
.seg{display:flex;border-radius:999px;overflow:hidden;border:2px solid var(--line);background:var(--card)}
.seg button{border:none;background:var(--card);padding:.6rem 1.05rem;font-weight:800;font-size:.84rem;cursor:pointer;
  color:var(--ink);font-family:var(--font-display);transition:all .15s ease}
.seg button.sel{background:var(--teal);color:#fff}
.reminder{display:flex;justify-content:space-between;align-items:center;gap:.8rem;background:var(--card-soft);
  border:2px solid var(--line);border-radius:var(--radius-sm);padding:.75rem 1.05rem;margin-bottom:.55rem}
.reminder.done span{text-decoration:line-through;color:var(--muted)}

/* ---------- Gamification ---------- */
.badge-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:.8rem}
.badge{background:var(--card-soft);border:2px solid var(--line);border-radius:var(--radius-sm);
  padding:1rem .6rem;text-align:center;opacity:.45;transition:all .2s ease;filter:grayscale(.6)}
.badge.earned{opacity:1;filter:none;background:linear-gradient(180deg,#FFFBEF,var(--sunny-soft));
  border:2.5px solid var(--sunny-deep);box-shadow:var(--shadow-sunny);transform:rotate(-1deg)}
.badge.earned .em{display:inline-block;animation:pop .5s cubic-bezier(.2,.9,.3,1.4)}
@keyframes pop{0%{transform:scale(.4) rotate(-14deg)}60%{transform:scale(1.25) rotate(6deg)}100%{transform:scale(1)}}
.badge .em{font-size:2.2rem}.badge b{display:block;font-size:.8rem;margin-top:.35rem;font-family:var(--font-display)}
.badge small{color:var(--muted);font-size:.72rem}

/* ---------- Coach ---------- */
.coach-grid{display:grid;gap:1rem}
@media(min-width:640px){.coach-grid{grid-template-columns:1fr 1fr}}
.coach-feat{background:var(--card);border:2px solid var(--line);border-radius:var(--radius-sm);
  padding:1.2rem;box-shadow:var(--shadow-sm);transition:transform .18s ease}
.coach-feat:hover{transform:translateY(-3px)}
.coach-feat .cf-ic{width:3rem;height:3rem;border-radius:16px;display:flex;align-items:center;justify-content:center;
  font-size:1.4rem;margin-bottom:.6rem;transform:rotate(-4deg)}
.coach-feat b{font-family:var(--font-display);font-size:1.05rem}
.phase2-banner{display:inline-block;background:linear-gradient(135deg,var(--purple),var(--purple-deep));color:#fff;
  font-family:var(--font-display);font-weight:800;font-size:.95rem;letter-spacing:.02em;
  padding:.6rem 1.5rem;border-radius:999px;border-bottom:3px solid rgba(0,0,0,.18);
  box-shadow:var(--shadow-sm)}

/* ---------- Guides / FAQ ---------- */
.guide h3{font-size:1.2rem;margin-top:1.4rem}
.guide h3:first-child{margin-top:.2rem}
.faq details{background:var(--card);border:2px solid var(--line);border-radius:var(--radius-sm);
  padding:1rem 1.2rem;margin-bottom:.6rem;box-shadow:var(--shadow-sm)}
.faq summary{cursor:pointer;font-weight:800;font-family:var(--font-display);font-size:1.02rem;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"+";display:inline-flex;width:1.6rem;height:1.6rem;border-radius:50%;
  background:var(--sunny);color:var(--teal-ink);font-weight:800;align-items:center;justify-content:center;
  margin-right:.6rem;transition:transform .2s ease}
.faq details[open] summary::before{transform:rotate(45deg);background:var(--teal);color:#fff}
.forms-table{width:100%;border-collapse:separate;border-spacing:0;font-size:.92rem}
.forms-table th{background:var(--teal-soft);color:var(--teal-ink);font-family:var(--font-display)}
.forms-table th,.forms-table td{border:1.5px solid var(--line);padding:.7rem .9rem;text-align:left}
.forms-table tr:first-child th:first-child{border-radius:14px 0 0 0}
.forms-table tr:first-child th:last-child{border-radius:0 14px 0 0}
.forms-table tr:last-child td:first-child{border-radius:0 0 0 14px}
.forms-table tr:last-child td:last-child{border-radius:0 0 14px 0}

/* ---------- Roadmap ---------- */
.roadmap-row{display:flex;align-items:center;gap:.8rem;padding:.7rem 0;border-bottom:2px dashed var(--line)}
.tick{width:1.9rem;height:1.9rem;border-radius:50%;border:2.5px solid var(--faint);display:flex;align-items:center;
  justify-content:center;flex:none;font-weight:800;color:transparent;transition:all .2s ease;background:var(--card)}
.tick.done{background:var(--teal);border-color:var(--teal-deep);color:#fff;box-shadow:var(--shadow-sm)}

/* ---------- Makhraj diagrams ---------- */
.makhraj-svg{width:100%;max-width:440px;height:auto;display:block;margin:.6rem auto}

/* ---------- Footer ---------- */
.app-footer{text-align:center;padding:2.5rem 1.25rem 3rem;color:var(--muted)}
.footer-brand{display:flex;align-items:center;justify-content:center;gap:.6rem;margin-bottom:.5rem}
.footer-brand em{font-style:normal;font-family:var(--font-display);font-weight:800;font-size:1.15rem;color:var(--ink)}
.footer-mark{width:34px;height:34px}
.footer-tag{font-family:var(--font-display);font-weight:700;color:var(--teal-deep);margin:.2rem 0 .8rem}
html[data-theme="dark"] .footer-tag{color:var(--sunny)}
.footer-note{opacity:.8;font-size:.78rem;max-width:660px;margin:0 auto;line-height:1.7}
.footer-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem 1.1rem;max-width:720px;margin:1rem auto 0}
.footer-nav a{font-size:.82rem;font-weight:700;color:var(--muted);text-decoration:none}
.footer-nav a:hover{color:var(--teal-deep);text-decoration:underline}
html[data-theme="dark"] .footer-nav a:hover{color:var(--sunny)}

/* ---------- Toast / loading / errors ---------- */
.toast{position:fixed;left:50%;bottom:1.4rem;transform:translateX(-50%) translateY(8px);
  background:var(--teal-deep);color:#fff;padding:.8rem 1.5rem;border-radius:999px;
  font-weight:800;font-size:.92rem;font-family:var(--font-display);box-shadow:var(--shadow);
  border-bottom:4px solid rgba(0,0,0,.18);
  z-index:99;opacity:0;transition:opacity .25s,transform .25s;max-width:92vw;text-align:center}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.loading{text-align:center;padding:2.5rem;color:var(--muted);font-weight:700;font-family:var(--font-display)}
.loading::after{content:"";display:block;width:46px;height:46px;margin:1rem auto 0;border-radius:50%;
  border:4px solid var(--line);border-top-color:var(--teal);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.error-card{background:var(--coral-soft);border:2px solid var(--coral);border-radius:var(--radius-sm);
  padding:1.1rem;font-weight:700;color:var(--coral-deep)}
html[data-theme="dark"] .error-card{background:#3a1418;color:#f3b8c2}

/* ---------- Kids & senior modes ---------- */
body.kids-mode{font-size:1.18rem}
body.kids-mode .btn{padding:1.15rem 2.3rem;font-size:1.18rem;border-radius:20px}
body.kids-mode .letter-card .big{font-size:3.4rem}
body.kids-mode .ayah-text{font-size:2rem;line-height:2.3}
body.kids-mode .mini-btn,body.kids-mode .audio-btn{transform:scale(1.2)}
body.kids-mode .card{border-width:2.5px;border-color:var(--sunny-deep)}
body.kids-mode .hero h1{font-size:2.3rem}
body.kids-mode .quiz-opt{font-size:1.1rem;padding:1.05rem 1.2rem}
body.senior-mode{font-size:1.22rem}
body.senior-mode .ayah-text{font-size:2rem}
body.senior-mode .btn{font-size:1.12rem}
body.senior-mode .card{padding:2rem}

/* ---------- Responsive ---------- */
@media(max-width:900px){
  .app-header{flex-wrap:wrap;row-gap:.1rem}
  .app-nav{order:3;flex-basis:100%;margin:0;overflow-x:auto;justify-content:flex-start;
    scrollbar-width:none;padding:.3rem .1rem}
  .app-nav::-webkit-scrollbar{display:none}
  .app-nav a{flex:none;font-size:.82rem;padding:.45rem .7rem}
}
@media(max-width:560px){
  h1.hero-title{font-size:1.75rem}
  .hero{padding:2.4rem 1.3rem}
  .hero h1{font-size:2rem}
  .hero .hero-ar{font-size:1.65rem}
  .view{padding:1rem .9rem 5rem}
  .card{padding:1.3rem}
  .wordmark-text{font-size:1.18rem}
  .xp-pill{font-size:.82rem;padding:.4rem .8rem}
  .seg{max-width:100%;overflow-x:auto}
  .reminder{flex-wrap:wrap}
  .roadmap-row{flex-wrap:wrap}
  .stat-trio{grid-template-columns:repeat(3,1fr);gap:.5rem}
  .reader-head{padding:1.6rem .8rem 1.2rem}
  .reader-head h1{font-size:2rem}
  .reciter-bar{border-radius:24px;padding:.6rem}
  .ayah-text{font-size:1.5rem}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  .view>*{animation:none}
  .badge.earned .em{animation:none}
  .audio-btn.playing{animation:none}
}

/* ---------- Logo ---------- */
.logo-img{height:54px;width:auto;display:block;border-radius:14px}
.footer-logo{height:72px;width:auto;margin-bottom:.4rem;border-radius:18px}
.hb-logo{display:none;height:clamp(200px,21vw,470px);width:auto;margin-bottom:1.2rem;filter:drop-shadow(0 8px 16px rgba(0,0,0,.28))}
@media(max-width:640px){.logo-img{height:44px}.hb-logo{height:150px}}
.pill-live{background:var(--teal);color:#fff;border-color:var(--teal-deep)}

/* ---------- AI Coach ---------- */
.coach-unsupported{background:var(--sunny-soft);border:2px dashed var(--sunny-deep);
  border-radius:var(--radius-sm);padding:1.2rem;margin-top:1rem}
.coach-tabs{display:flex;gap:.5rem;flex-wrap:wrap;margin:1rem 0 .8rem}
.coach-tab{font-family:var(--font-display);font-weight:700;font-size:.95rem;cursor:pointer;
  background:var(--card-soft);border:2px solid var(--line);color:var(--ink);
  border-radius:999px;padding:.5rem 1.2rem;transition:all .15s ease}
.coach-tab:hover{border-color:var(--teal)}
.coach-tab.sel{background:var(--teal);border-color:var(--teal-deep);color:#fff;
  border-bottom-width:4px}
.coach-opts{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.6rem;
  max-height:260px;overflow-y:auto;padding:.2rem;margin-bottom:1rem}
.coach-chip{display:flex;flex-direction:column;align-items:center;gap:.15rem;cursor:pointer;
  background:var(--card);border:2px solid var(--line);border-radius:14px;padding:.6rem .5rem;
  transition:all .15s ease;min-width:0}
.coach-chip:hover{transform:translateY(-2px);border-color:var(--teal)}
.coach-chip.sel{border-color:var(--teal-deep);background:var(--teal-soft);
  box-shadow:var(--shadow-sm)}
.coach-chip .cc-ar{font-family:var(--font-quran);font-size:1.5rem;line-height:1.6;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.coach-chip small{color:var(--muted);font-size:.7rem;text-align:center;line-height:1.3}
.coach-target-wrap{background:var(--card-soft);border:2px solid var(--line);
  border-radius:var(--radius-sm);padding:1.4rem 1rem;text-align:center}
.coach-target-label{color:var(--muted);font-weight:700;font-size:.9rem;margin:0 0 .4rem}
.coach-target{font-family:var(--font-quran);font-size:clamp(2.4rem,8vw,3.6rem);
  line-height:2;margin:.2rem 0 1rem;color:var(--ink)}
.coach-controls{display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap}
#coachRec.listening{background:linear-gradient(180deg,var(--coral),var(--coral-deep));
  animation:coachPulse 1.4s infinite}
@keyframes coachPulse{0%,100%{box-shadow:0 0 0 0 rgba(255,86,86,.5)}50%{box-shadow:0 0 0 12px rgba(255,86,86,0)}}
.coach-status{color:var(--muted);font-size:.9rem;min-height:1.4em;margin:.7rem 0 0}
.coach-transcript{background:var(--card);border:2px dashed var(--teal);border-radius:14px;
  padding:.9rem 1.1rem;margin-top:.8rem;font-family:var(--font-quran);font-size:1.4rem;
  line-height:2;color:var(--ink)}
.coach-listening-dot{display:inline-block;width:.7rem;height:.7rem;border-radius:50%;
  background:var(--coral);margin-left:.5rem;animation:blink 1s infinite}
.coach-result{margin-top:1.2rem;background:var(--card);border:2px solid var(--line);
  border-radius:var(--radius-sm);padding:1.4rem;text-align:center}
.coach-score{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;
  width:7.5rem;height:7.5rem;border-radius:50%;margin-bottom:.6rem;color:#fff;
  font-family:var(--font-display)}
.coach-score b{font-size:1.9rem;line-height:1}
.coach-score small{font-size:.75rem;opacity:.9}
.band-great .coach-score{background:linear-gradient(135deg,#2EC98A,var(--teal-deep))}
.band-good .coach-score{background:linear-gradient(135deg,var(--sunny),var(--sunny-deep))}
.band-try .coach-score{background:linear-gradient(135deg,var(--sky),var(--sky-deep))}
.coach-verdict{font-weight:700;font-size:1.05rem;margin:.4rem 0 .8rem}
.coach-words{font-family:var(--font-quran);font-size:1.9rem;line-height:2.2;margin:.6rem 0}
.coach-words .w-ok{color:#1E9E6A;background:rgba(46,201,138,.14);border-radius:8px;padding:0 .3rem}
.coach-words .w-miss{color:var(--coral-deep);background:var(--coral-soft);border-radius:8px;padding:0 .3rem}
html[data-theme="dark"] .coach-words .w-ok{color:#5FE3A8}
.coach-heard{color:var(--muted);font-size:.92rem;margin:.6rem 0}
.coach-heard span{font-family:var(--font-quran);font-size:1.15rem;color:var(--ink)}
.coach-tips{text-align:left;background:var(--sunny-soft);border-radius:14px;
  padding:.9rem 1.1rem;margin:.8rem 0;font-size:.92rem}
.coach-tips ul{margin:.4rem 0 0;padding-left:1.1rem}
.coach-tips li{margin:.3rem 0}
.coach-history{margin-top:1.4rem}
.coach-history h3{font-size:1.05rem;margin-bottom:.6rem}
.coach-hist-meta{display:flex;gap:1.2rem;flex-wrap:wrap;color:var(--muted);font-size:.9rem;margin-bottom:.6rem}
.coach-hist{display:flex;flex-direction:column;gap:.45rem}
.coach-hist-row{display:grid;grid-template-columns:auto 1fr auto auto;gap:.7rem;align-items:center;
  background:var(--card-soft);border-radius:12px;padding:.5rem .8rem;font-size:.85rem}
.ch-date{color:var(--faint);white-space:nowrap}
.ch-label{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ch-bar{width:90px;height:.6rem;background:var(--line);border-radius:99px;overflow:hidden}
.ch-bar i{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--teal),var(--sunny))}
.ch-pct{font-family:var(--font-display);color:var(--teal-deep);min-width:3ch;text-align:left}

/* ---- Research-backed features (2026-10): modals, explain boxes, SRS, certificates ---- */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.62);display:flex;align-items:center;justify-content:center;z-index:1000;padding:1rem;overflow-y:auto;-webkit-overflow-scrolling:touch}
.modal{max-width:540px;width:100%;margin:auto}
.modal-wide{max-width:680px}
.modal .ob-goal{width:100%;display:flex;gap:.8rem;align-items:center}
.ob-letter{text-align:center;margin:1rem 0}
.ob-aha{text-align:center;padding:1rem 0}
.ob-score{font-size:3.4rem;font-weight:800;color:var(--gold,#FFC93C);line-height:1}
.ob-skip{color:inherit;opacity:.7;text-decoration:underline}
.explain-box{margin-top:.6rem;border:1px solid var(--gold,#D9A441);border-radius:12px;padding:.55rem .8rem;background:rgba(217,164,65,.09)}
.explain-box summary{cursor:pointer;font-weight:700}
.explain-hint{font-weight:400;font-size:.85em;opacity:.7}
.explain-box p{margin:.5rem 0 0;line-height:1.55}
.streak-card{text-align:center}
.streak-repair{margin-top:.8rem;padding:.8rem;border-radius:12px;background:rgba(0,185,169,.12)}
.srs-stars{display:flex;gap:.4rem;justify-content:center;flex-wrap:wrap;margin-top:1rem}
.pg-consent{display:flex;gap:.6rem;align-items:flex-start;margin-top:.8rem;cursor:pointer;line-height:1.5}
.pg-consent input{margin-top:.25rem;min-width:18px;min-height:18px}
.cert-wrap{display:flex;justify-content:center}
.cert{max-width:480px;width:100%;text-align:center;padding:2rem 1.5rem;border:3px solid #D9A441;border-radius:18px;background:linear-gradient(160deg,#fffdf8,#fdf3d7);color:#3d2f12}
.cert h2{color:#8a6d1f}
.cert-emoji{font-size:3rem}
.cert-name{font-size:1.7rem;font-weight:800;color:#5c4712}
.cert-phase{font-size:1.2rem;font-weight:700}
.cert-date{margin-top:.5rem;font-style:italic}
.cert-brand{margin-top:1rem;font-weight:700;color:#00897B}
@media print{
  body *{visibility:hidden}
  #certPrint,#certPrint *{visibility:visible}
  #certPrint{position:absolute;left:0;top:0;width:100%;margin:0}
  .modal-overlay{background:none;position:static}
}
@media (max-width:480px){
  .modal{padding:1.2rem}
  .cert{padding:1.5rem 1rem}
}

/* ---------- Home hero: header embedded in the banner (no white bar) ---------- */
body.home-hero .topbar{position:fixed;top:0;left:0;right:0;z-index:50;
  background:transparent;border-bottom:none;box-shadow:none;
  -webkit-backdrop-filter:none;backdrop-filter:none;
  padding-top:env(safe-area-inset-top,0px);
  transition:background .3s ease,box-shadow .3s ease,border-color .3s ease}
body.home-hero .topbar.hero-solid{
  background:color-mix(in srgb,var(--bg) 96%,transparent);
  border-bottom:2px solid var(--line);
  box-shadow:0 6px 24px -18px rgba(10,95,196,.35)}
body.home-hero .app-nav a{color:#111;text-shadow:0 1px 8px rgba(255,255,255,.85),0 1px 3px rgba(255,255,255,.6)}
body.home-hero .app-nav a:hover{color:#000;background:rgba(255,255,255,.28);transform:translateY(-2px)}
body.home-hero .app-nav a.active{color:#fff;text-shadow:none}
body.home-hero .topbar.hero-solid .app-nav a{color:var(--ink);text-shadow:none}
body.home-hero .topbar.hero-solid .app-nav a:hover{color:var(--teal-deep);background:var(--teal-soft)}
body.home-hero .topbar.hero-solid .app-nav a.active{color:#fff}
/* Hero fills the viewport behind the fixed header on phones */
@media(max-width:680px){
  body.home-hero .hero-banner{min-height:100vh;min-height:100svh}
  body.home-hero .hb-media{height:100vh;height:100svh}
}

/* ---------- Daily quests (gaming research) ---------- */
.quest{display:flex;align-items:center;gap:.9rem;padding:.85rem .4rem;border-bottom:2px solid var(--line)}
.quest:last-child{border-bottom:none}
.quest-em{font-size:1.9rem;flex:none;width:3rem;height:3rem;display:grid;place-items:center;
  background:var(--sunny-soft);border-radius:16px}
.quest.q-done .quest-em{background:var(--teal-soft)}
.quest-body{flex:1;min-width:0}
.quest-body b{font-family:var(--font-display);font-size:1rem;display:block}
.quest-body span{font-size:.85rem;color:var(--muted);display:block;margin-bottom:.35rem}
.quest-bar{height:10px;background:var(--line);border-radius:99px;overflow:hidden}
.quest-bar i{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--teal) 0%,var(--sky-deep) 60%,var(--coral) 100%);
  transition:width .5s cubic-bezier(.2,.9,.3,1.2)}
.quest-side{flex:none}
.quest-count{font-family:var(--font-display);font-weight:800;color:var(--muted);font-size:.9rem}
.quest-xp{font-family:var(--font-display);font-weight:800;color:var(--teal-deep);font-size:.9rem}
.quest-alldone{margin-top:.8rem;padding:.9rem 1.1rem;border-radius:16px;text-align:center;
  background:linear-gradient(135deg,var(--sunny-soft),#FFF3D6);border:2px solid var(--sunny-deep);
  font-family:var(--font-display);font-weight:700;color:var(--teal-ink)}
/* ---------- Streak-saver nudge ---------- */
.streak-nudge{background:linear-gradient(135deg,#1B2A6B 0%,#3B2D8B 55%,#6B2D8B 100%);
  border:none;color:#fff;text-align:center}
.streak-nudge .eyebrow{color:#FFD97A}
.streak-nudge h2{color:#fff}
.streak-nudge .lead{color:#E8E4FF}
.streak-nudge .btn{margin-top:.4rem}
/* ---------- Verse art collection ---------- */
.art-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.9rem}
.art-card{border-radius:20px;padding:1.2rem .9rem;text-align:center;color:#fff;
  display:flex;flex-direction:column;align-items:center;gap:.3rem;min-height:190px;justify-content:center;
  box-shadow:0 10px 24px -10px rgba(20,30,80,.45);border:3px solid rgba(255,255,255,.35);
  transition:transform .2s ease}
.art-card:hover{transform:translateY(-4px) rotate(-1deg)}
.art-card .art-ar{font-family:var(--font-quran);font-size:3.2rem;line-height:1.4;
  text-shadow:0 2px 12px rgba(0,0,0,.35)}
.art-card b{font-family:var(--font-display);font-size:.95rem}
.art-card span{font-size:.78rem;opacity:.92}
.art-card.locked{background:linear-gradient(135deg,#3A3F4B,#22262E);border-style:dashed;box-shadow:none}
.art-card.locked .art-ar{opacity:.4}
@media(max-width:480px){.art-grid{grid-template-columns:repeat(2,1fr)}}