/* ============ WRAPPER TOKENS ============ */
  :root{
    --pg:#F0EADB;
    --card:#FBF8F0;
    --ink:#2B2719;
    --ink-2:#6E6753;
    --line-w:#DED5BE;
    --accent:#2F9E5F;
    --accent-deep:#1F7A47;
    --gold-w:#A8914E;
    --red-w:#C74A44;
    --code:#EFE8D5;
  }
  @media (prefers-color-scheme: dark){
    :root{
      --pg:#181510;
      --card:#211E16;
      --ink:#EDE7D6;
      --ink-2:#A79E86;
      --line-w:#3B3628;
      --accent:#4CB878;
      --accent-deep:#63C98B;
      --gold-w:#C4AC69;
      --red-w:#E07069;
      --code:#2A2619;
    }
  }
  :root[data-theme="dark"]{
    --pg:#181510; --card:#211E16; --ink:#EDE7D6; --ink-2:#A79E86; --line-w:#3B3628;
    --accent:#4CB878; --accent-deep:#63C98B; --gold-w:#C4AC69; --red-w:#E07069; --code:#2A2619;
  }
  :root[data-theme="light"]{
    --pg:#F0EADB; --card:#FBF8F0; --ink:#2B2719; --ink-2:#6E6753; --line-w:#DED5BE;
    --accent:#2F9E5F; --accent-deep:#1F7A47; --gold-w:#A8914E; --red-w:#C74A44; --code:#EFE8D5;
  }

  /* ============ APP (PHONE) TOKENS — always light cream, it's the app's real look ============ */
  :root{
    --qc-green:#2F9E5F;
    --qc-green-deep:#20794A;
    --green-tint:#E9F5EC;
    --green-line:#CBE6D4;
    --gold:#A8914E;
    --gold-strong:#B49E63;
    --cream:#FBF7EC;
    --cream-card:#FFFDF6;
    --line:#EDE4CF;
    --tab-bg:#F1E9D6;
    --tab-ink:#8A7B57;
    --a-ink:#3C382E;
    --a-soft:#8B8471;
    --red:#D9534F;
  }

  /* ---- "finding your page" veil ----
     A reserved page normally makes this unnecessary; it only covers a genuine wait
     (first open, dropped connection). Sits over the phone frame, not the whole browser. */
  .findveil{position:fixed; inset:0; z-index:8000; display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:2px; text-align:center; padding:0 34px;
    background:rgba(251,247,236,.94); backdrop-filter:blur(3px);
    opacity:0; transition:opacity .22s ease;}
  .findveil.show{opacity:1;}
  .findpulse{position:relative; width:96px; height:96px; display:flex; align-items:center;
    justify-content:center; color:var(--qc-green-deep); margin-bottom:16px;}
  .findpulse svg{width:34px; height:34px; position:relative; z-index:2;}
  /* three rings expanding outward, staggered — a quiet "searching outward" pulse */
  .findpulse i{position:absolute; inset:0; border-radius:50%;
    border:1.5px solid var(--qc-green); opacity:0;
    animation:findring 2.1s ease-out infinite;}
  .findpulse i:nth-child(2){animation-delay:.7s;}
  .findpulse i:nth-child(3){animation-delay:1.4s;}
  @keyframes findring{
    0%{transform:scale(.34); opacity:0;}
    22%{opacity:.55;}
    100%{transform:scale(1); opacity:0;}
  }
  .findtitle{font-size:15px; color:var(--a-ink); letter-spacing:.01em;}
  .findsub{font-size:11.5px; color:var(--a-soft); line-height:1.5; margin-top:5px;
    max-width:250px; transition:opacity .2s ease;}
  @media (prefers-reduced-motion: reduce){
    .findveil{transition:none;}
    .findpulse i{animation:none; opacity:.4;}
    .findsub{transition:none;}
  }

  *{box-sizing:border-box;}
  body{background:var(--pg); color:var(--ink); font-family:"Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,Helvetica,Arial,sans-serif; margin:0; line-height:1.55;}
  .wrap{max-width:1120px; margin:0 auto; padding:40px 24px 90px;}
  h1,h2,h3{text-wrap:balance; line-height:1.2;}
  h1{font-size:30px; margin:6px 0 10px; font-weight:700; letter-spacing:-.3px;}
  h2{font-size:21px; margin:0 0 6px; font-weight:700;}
  h3{font-size:15px; margin:0 0 4px;}
  p{margin:6px 0;}
  .eyebrow{font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--accent-deep); font-weight:700;}
  .lede{color:var(--ink-2); max-width:66ch; font-size:15px;}
  .meta{display:flex; gap:8px; flex-wrap:wrap; margin-top:14px;}
  .meta span{font-size:11.5px; border:1px solid var(--line-w); background:var(--card); border-radius:999px; padding:4px 11px; color:var(--ink-2);}
  section{margin-top:64px;}
  .sechead{margin-bottom:22px; max-width:70ch;}
  .sechead p{color:var(--ink-2); font-size:14px;}

  .changes{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:10px; margin-top:22px;}
  .changes div{background:var(--card); border:1px solid var(--line-w); border-radius:10px; padding:12px 14px; font-size:13px;}
  .changes b{display:block; font-size:12.5px; margin-bottom:3px; color:var(--accent-deep);}

  /* ============ PHONE SHELL ============ */
  .phone{width:375px; height:734px; background:#211E16; border-radius:40px; padding:10px; box-shadow:0 24px 50px -22px rgba(30,25,10,.45); flex:none;}
  .screen{background:var(--cream); border-radius:30px; overflow:hidden; position:relative; display:flex; flex-direction:column; height:100%; font-size:13px; color:var(--a-ink);}

  .app-header{display:flex; align-items:center; gap:9px; padding:12px 12px 10px; background:var(--cream-card); border-bottom:1px solid var(--line); flex:none;}
  .app-header .back{font-size:20px; color:var(--a-ink); width:20px; text-align:center; line-height:1;}
  .app-header .ttl{flex:1; min-width:0;}
  .app-header .ttl b{display:block; font-size:12.5px;}
  .app-header .ttl small{display:block; font-size:10.5px; color:var(--a-soft);}
  .app-header .ttl .cause{color:var(--qc-green); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; max-width:190px;}
  .hdr-ic{color:var(--a-ink); opacity:.75;}
  .hdr-search{background:none; border:none; cursor:pointer; padding:6px; color:var(--a-ink); opacity:.7; display:flex; align-items:center;}
  .app-header .hdr-search svg, .app-header .hdr-ic svg{width:20px; height:20px;}
  .hdr-play{background:none; border:none; cursor:pointer; padding:4px; color:var(--a-ink); opacity:.75; display:flex; align-items:center;}
  .hdr-med{width:30px; height:30px; flex:none; border-radius:50%; background:var(--cream-card); box-shadow:inset 0 0 0 1.5px var(--gold-strong); display:flex; align-items:center; justify-content:center;}
  .hdr-med svg{transform:scale(.7);}

  .scrollarea{flex:1; overflow-y:auto; position:relative; scrollbar-width:none;}
  .scrollarea::-webkit-scrollbar{display:none;}
  .static .scrollarea{overflow:hidden;}

  .readline{position:absolute; left:0; right:0; pointer-events:none; z-index:4; border-top:1.5px dashed rgba(47,158,95,.6);}
  .readline i{position:absolute; right:8px; top:4px; font-style:normal; font-size:8px; letter-spacing:.14em; background:var(--qc-green); color:#fff; border-radius:3px; padding:1px 5px; font-weight:700;}

  /* surah banner — edge-to-edge gold frame + the QUL surah-name calligraphy glyph, big */
  .sband{margin:8px 0 2px; position:relative; height:60px;}
  .sband svg.frame{position:absolute; inset:0; width:100%; height:100%; display:block;}
  .sband .bname{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:"surah-names"; font-size:42px; line-height:1; color:#5C4E2E; padding-bottom:2px;}

  /* inline page divider — the medallion docks here when its page is finished */
  .pgdiv{display:flex; align-items:center; margin:10px 12px; gap:8px;}
  .pgdiv:before,.pgdiv:after{content:""; flex:1; border-top:1.5px solid var(--gold-strong);}
  .pgdiv .medallion{flex:none;}

  /* ============ VERSE ROWS ============ */
  .vrow{display:grid; grid-template-columns:36px 1fr; background:var(--cream-card); border-bottom:1px solid var(--line); position:relative; transition:background .26s ease; min-height:56px;}
  .vrow .rail{padding-top:10px; display:flex; flex-direction:column; align-items:flex-start; gap:5px;}
  .vbadge{background:var(--tab-bg); color:var(--tab-ink); font-size:10.5px; font-weight:700; padding:3px 9px 3px 7px; border-radius:0 9px 9px 0; box-shadow:inset 0 0 0 1px rgba(138,123,87,.18); transition:all .22s ease; font-variant-numeric:tabular-nums;}
  .tickwrap,.redowrap{width:17px; height:17px; margin-left:5px; display:none;}
  .tickwrap svg,.redowrap svg{display:block;}
  .redowrap{color:var(--red);}

  .cols{display:grid; grid-template-columns:0.92fr 1.08fr;}
  .ar{direction:rtl; text-align:right; font-family:"qpc-hafs","KFGQPC Uthmanic Script HAFS","Traditional Arabic","Amiri","Scheherazade New",serif; font-size:18px; line-height:2.1; padding:10px 12px 12px 10px; border-left:1px solid var(--line); color:#2E2A20;}
  .enwrap{padding:11px 12px 12px 11px;}
  .tr{color:var(--gold); font-size:11px; font-weight:600; line-height:1.45; margin-bottom:4px;}
  .en{font-size:12px; line-height:1.5; color:var(--a-ink);}

  /* stacked (classic) layout */
  .layout-stack .cols{display:block;}
  .layout-stack .ar{border-left:none; padding:12px 12px 2px; font-size:20px;}
  .layout-stack .enwrap{padding:2px 12px 12px;}

  /* word-by-word (third layout): a chip per word, full translation beneath the verse */
  .wordblock{display:none; grid-column:2; padding:10px 12px 12px;}
  .layout-words .cols{display:none;}
  .layout-words .wordblock{display:block;}
  .layout-words .vrow.nowords .cols{display:grid;}
  .wordwrap{display:flex; flex-wrap:wrap; direction:rtl; gap:6px;}
  .wtoken{background:var(--cream-card); border:1px solid var(--line); border-radius:10px; padding:5px 8px 4px; text-align:center; min-width:44px; box-shadow:0 1px 2px rgba(90,80,50,.06);}
  .wtoken .wa{font-family:"qpc-hafs",serif; font-size:19px; line-height:1.75; color:#2E2A20;}
  .wtoken .wt{color:var(--gold); font-size:8.5px; font-weight:600; line-height:1.35; direction:ltr;}
  .wtoken .wm{color:var(--a-ink); font-size:9.5px; line-height:1.35; margin-top:1px; direction:ltr;}
  .wtoken.end{border:1.5px solid var(--qc-green);}
  .fullen{margin-top:9px; font-size:12px; line-height:1.5; color:var(--a-ink); border-top:1px dashed var(--line); padding-top:8px;}
  .hide-tr .wt{display:none;}
  .ar-lg .wtoken .wa{font-size:22px;}
  .thumb.wordsthumb{display:flex; flex-wrap:wrap; gap:2.5px; padding:6px; align-content:flex-start;}
  .thumb.wordsthumb i{flex:none; width:13px; height:10px; border:1px solid #D8CBA6; border-radius:2.5px; background:#FDFAF1; margin:0;}

  .hide-tr .tr{display:none;}
  .ar-lg .ar{font-size:22px;}

  /* states */
  .vrow.current{box-shadow:inset 0 0 0 1.5px var(--gold-strong); z-index:1;}
  .vrow.counted{background:var(--green-tint); transition:background .45s ease;}
  .vrow.counted .vbadge{background:#fff; color:var(--qc-green-deep); box-shadow:inset 0 0 0 1.5px var(--qc-green);}
  .vrow.confirmed{background:var(--green-tint); border-bottom-color:var(--green-line);}
  .vrow.confirmed .vbadge{background:var(--qc-green); color:#fff; box-shadow:none;}
  .vrow.confirmed .tickwrap{display:block; animation:tickin .28s cubic-bezier(.34,1.56,.64,1);}
  @keyframes tickin{from{transform:scale(.3); opacity:0;} to{transform:scale(1); opacity:1;}}
  /* scrolled back up over a confirmed verse → flagged for undo */
  .vrow.undoing{background:#FBEAEA; border-bottom-color:#F2D4D2; transition:background .45s ease;}
  .vrow.undoing .vbadge{background:#fff; color:var(--red); box-shadow:inset 0 0 0 1.5px var(--red);}
  .vrow.undoing .redowrap{display:block; animation:tickin .28s cubic-bezier(.34,1.56,.64,1);}
  .vrow.undoing .tickwrap{display:none;}

  /* chips */
  .chip{position:absolute; z-index:6; background:var(--qc-green); color:#fff; font-size:11px; font-weight:800; border-radius:999px; padding:3px 9px; box-shadow:0 3px 9px rgba(31,122,71,.4); pointer-events:none; font-variant-numeric:tabular-nums;}
  .chip.minus{background:#fff; color:var(--red); box-shadow:inset 0 0 0 1.5px var(--red), 0 3px 9px rgba(0,0,0,.15);}
  .chip.in-row{left:42px; top:-9px;}
  .chip.at-counter{position:absolute; right:16px; top:62px;}
  .flyer.posed{right:60px; top:92px; transform:rotate(-14deg);}

  /* finish card */
  .finish{margin:18px 14px 24px; background:var(--cream-card); border:1px solid var(--gold-strong); border-radius:10px; padding:20px 16px; text-align:center;}
  .finish b{display:block; font-size:15px; margin-bottom:14px;}
  .finish .fbtns{display:flex; flex-direction:column; gap:9px;}

  /* verse counter — top right, out of the thumb zone; carries the QC three-bird logo */
  .counter{border:none; font:inherit; display:inline-flex; align-items:center; gap:9px; background:#EFE9D8; color:#98917D; border-radius:999px; padding:8px 16px 8px 13px; font-size:16px; font-weight:800; cursor:pointer; font-variant-numeric:tabular-nums; box-shadow:inset 0 0 0 1px rgba(138,123,87,.28); transition:background .2s ease, color .2s ease; flex:none;}
  .counter svg{display:block; width:31px; height:21px;}
  .counter.active{background:var(--qc-green); color:#fff; box-shadow:0 2px 8px rgba(31,122,71,.35);}
  .counter.pop{animation:pop .22s ease;}
  @keyframes pop{40%{transform:scale(1.14);}}

  /* red undo count — takes the same top-right spot when verses are flagged */
  .undochip{border:none; font:inherit; display:none; align-items:center; gap:5px; background:var(--red); color:#fff; border-radius:999px; padding:6px 11px 6px 9px; font-size:13px; font-weight:800; cursor:pointer; font-variant-numeric:tabular-nums; box-shadow:0 2px 8px rgba(217,83,79,.4); flex:none;}
  .undochip.show{display:inline-flex;}
  .undochip svg{display:block;}

  /* the book-bird flyer (QC emblem) — bold: opens like a book, then flies */
  .flyer{position:absolute; z-index:22; width:48px; height:36px; pointer-events:none; filter:drop-shadow(0 3px 6px rgba(31,122,71,.35));}
  .flyer svg{width:100%; height:100%; overflow:visible;}
  .flyer .wL,.flyer .wR{transform-box:view-box; transform-origin:50% 66%;}
  .flyer.opening .wL{animation:openL .14s ease-out both;}
  .flyer.opening .wR{animation:openR .14s ease-out both;}
  .flyer.flying .wL{animation:flapL .12s ease-in-out infinite alternate;}
  .flyer.flying .wR{animation:flapR .12s ease-in-out infinite alternate;}
  @keyframes openL{from{transform:rotate(44deg);} to{transform:rotate(0deg);}}
  @keyframes openR{from{transform:rotate(-44deg);} to{transform:rotate(0deg);}}
  @keyframes flapL{from{transform:rotate(28deg);} to{transform:rotate(-30deg);}}
  @keyframes flapR{from{transform:rotate(-28deg);} to{transform:rotate(30deg);}}
  .flyer.ghost{opacity:.8; filter:saturate(.45);}

  .endspacer{height:380px;}

  /* ===== FULL PAGE (mushaf) MODE — horizontal swipe pager ===== */
  .pager{flex:1; display:flex; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; scrollbar-width:none;}
  .pager::-webkit-scrollbar{display:none;}
  .static .pager{overflow:hidden;}
  .mpage{flex:none; width:100%; height:100%; scroll-snap-align:center; scroll-snap-stop:always; direction:ltr; overflow-y:auto; padding:8px 14px 16px; scrollbar-width:none;}
  .mpage::-webkit-scrollbar{display:none;}
  .mpage .mushaf{direction:rtl; text-align:justify; text-align-last:center; font-family:"qpc-hafs",serif; font-size:20px; line-height:2.35; color:#2E2A20; hyphens:none; word-spacing:1px;}
  .mpage.counted .mushaf{opacity:.9;}
  .mpage .pfoot{margin-top:14px; text-align:center; font-size:11px; color:var(--a-soft); font-variant-numeric:tabular-nums; border-top:1px solid var(--line); padding-top:8px;}
  .mpage .pfoot .med{display:inline-flex; vertical-align:middle; margin:0 2px;}
  .swipehint{position:absolute; left:0; right:0; bottom:60px; text-align:center; font-size:10.5px; letter-spacing:.05em; color:var(--a-soft); pointer-events:none; z-index:4;}
  .swipehint b{color:var(--qc-green-deep);}

  /* bottom bar */
  .bottombar{flex:none; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:9px 12px; background:#fff; border-top:1px solid #E8E4D8; position:relative; z-index:5;}
  .undo{border:none; background:#fff; box-shadow:inset 0 0 0 1.5px var(--red); color:var(--red); width:32px; height:32px; border-radius:50%; cursor:pointer; display:none; align-items:center; justify-content:center; flex:none;}
  .undo.show{display:inline-flex;}
  .medallion{position:relative; width:52px; height:44px; flex:none; display:flex; align-items:center; justify-content:center;}
  .medallion span{position:absolute; font-size:12px; font-weight:700; color:#3C382E; font-variant-numeric:tabular-nums;}
  .playbtn{width:32px; height:32px; border-radius:50%; border:none; background:#fff; box-shadow:inset 0 0 0 1.5px #C9C3B2; color:#6E6857; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; flex:none;}
  .barleft{display:flex; align-items:center; gap:8px; min-width:96px;}
  .barright{min-width:96px; display:flex; justify-content:flex-end;}
  /* audio player — over the bottom bar; progress on top, transport below */
  .apwrap{position:absolute; left:0; right:0; bottom:0; display:flex; flex-direction:column; gap:8px; padding:9px 12px 10px; background:#fff; border-top:1px solid #E8E4D8; box-shadow:0 -8px 22px -12px rgba(60,45,10,.4); z-index:7;}
  .apwrap .aptop{display:flex; align-items:center; gap:9px;}
  .apwrap .aptrack{flex:1; height:5px; border-radius:999px; background:#EBE6D7; overflow:hidden;}
  .apwrap .aptrack i{display:block; height:100%; border-radius:999px; background:var(--qc-green); width:0; transition:width .14s linear;}
  .apwrap .aptime{flex:none; font-size:10.5px; font-weight:700; color:#98917D; font-variant-numeric:tabular-nums; min-width:36px; text-align:right;}
  .apwrap .apctl{display:flex; align-items:center; gap:5px;}
  .apwrap .apsp{flex:1;}
  .apwrap .apback,.apwrap .apfwd,.apwrap .aprep{flex:none; width:30px; height:30px; border:none; background:none; color:#4A4234; cursor:pointer; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;}
  .apwrap .apback:hover,.apwrap .apfwd:hover,.apwrap .aprep:hover{background:#F1ECDD;}
  .apwrap .applay{flex:none; width:38px; height:38px; border-radius:50%; border:none; background:var(--qc-green); color:#fff; cursor:pointer; display:inline-flex; align-items:center; justify-content:center;}
  .apwrap .aprep{position:relative; color:#B7AE97;}
  .apwrap .aprep.on{color:var(--qc-green);}
  .apwrap .aprep .reponly{display:none; position:absolute; top:-1px; right:-1px; background:var(--qc-green); color:#fff; font-size:7px; font-style:normal; font-weight:800; width:11px; height:11px; border-radius:50%; line-height:11px; text-align:center;}
  .apwrap .aprep.one .reponly{display:block;}
  .apwrap .aprec{flex:none; font:inherit; font-size:10px; font-weight:700; color:#6E6857; background:#F1ECDD; border:none; border-radius:8px; padding:5px 7px; cursor:pointer; max-width:82px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .apwrap .apspeed{flex:none; font:inherit; font-size:10px; font-weight:800; color:#6E6857; background:#F1ECDD; border:none; border-radius:8px; padding:5px 6px; cursor:pointer;}
  .apwrap .apx{flex:none; background:none; border:none; color:#98917D; font-size:15px; cursor:pointer; padding:2px 3px;}
  .apwrap .apread{display:flex; align-items:center; justify-content:center; gap:7px; width:100%; font:inherit; font-size:11.5px; font-weight:800; color:var(--qc-green); background:rgba(47,158,95,.1); border:1px solid rgba(47,158,95,.28); border-radius:9px; padding:9px; cursor:pointer;}
  .apwrap .apread svg{flex:none;}
  .apwrap .apread .apra{font-weight:800; font-size:13px;}
  .apwrap .apread:hover{background:rgba(47,158,95,.16);}
  .amode .apwrap .apread{color:#005eb2; background:#EAF2FB; border-color:#CFE0F4;}
  .amode .apwrap .apread:hover{background:#DCEAFA;}
  /* ===== dedicated blue AUDIO mode (page 10) ===== */
  .amode{background:var(--cream);}
  .amhd{display:flex; align-items:center; gap:10px; padding:13px 14px; background:#fff; border-bottom:1px solid var(--line); flex:none;}
  .amhd .amback{font-size:23px; color:#8CA4BE; cursor:pointer; line-height:1;}
  .amhd .ammed{width:38px; height:38px; border-radius:11px; background:#E7F0FB; display:flex; align-items:center; justify-content:center; flex:none;}
  .amhd .amttl b{display:block; font-size:15px; font-weight:800; color:#0A3B6E;}
  .amhd .amttl small{display:block; font-size:10px; color:#5A7796; margin-top:1px;}
  .ambody{flex:1; overflow-y:auto; padding:13px 14px 14px; -ms-overflow-style:none; scrollbar-width:none;}
  .ambody::-webkit-scrollbar{display:none;}
  .amprog{background:linear-gradient(135deg,#00468a,#0a63b8); border-radius:15px; padding:14px 15px; color:#fff; box-shadow:0 10px 22px -12px rgba(0,70,150,.6);}
  .amprog .amptop{display:flex; align-items:baseline; justify-content:space-between;}
  .amprog .amptop b{font-size:13px; font-weight:700;}
  .amprog .ampct{font-size:19px; font-weight:800;}
  .amprog .ambar{height:9px; border-radius:999px; background:rgba(255,255,255,.24); overflow:hidden; margin:10px 0 8px;}
  .amprog .ambar i{display:block; height:100%; border-radius:999px; background:#fff;}
  .amprog .ampsub{font-size:10.5px; line-height:1.45; color:rgba(255,255,255,.88);}
  .amcont{display:flex; align-items:center; gap:12px; width:100%; margin-top:12px; background:var(--cream-card); border:1.5px solid #CFE0F4; border-radius:14px; padding:12px 13px; cursor:pointer; text-align:left; font:inherit;}
  .amcont .amci{flex:none; width:34px; height:34px;} .amcont .amci svg{width:34px; height:34px;}
  .amcont .amct{flex:1; min-width:0;} .amcont .amct b{font-size:13px; font-weight:800; color:var(--a-ink);} .amcont .amct small{display:block; font-size:10.5px; color:#5A7796; margin-top:2px;}
  .amcont .amchev{flex:none; color:#9BB4CE; font-size:20px;}
  .amlabel{font-size:9px; letter-spacing:.11em; text-transform:uppercase; font-weight:800; color:#5A7796; margin:17px 2px 9px; display:flex; align-items:center; justify-content:space-between;}
  .amlabel .amleg{font-size:8.5px; color:#7C93AC; font-weight:700; display:inline-flex; align-items:center; gap:5px; text-transform:none; letter-spacing:0;}
  .amlabel .amleg i{width:14px; height:14px; border-radius:50%; background:#005eb2; display:inline-flex; align-items:center; justify-content:center; flex:none;}
  .amlabel .amleg i::after{content:'\2713'; color:#fff; font-size:9px; font-weight:800;}
  .ambm{display:flex; gap:8px; flex-wrap:wrap;}
  .ambchip{font:inherit; font-size:11.5px; font-weight:700; color:#005eb2; background:#EAF2FB; border:1px solid #CFE0F4; border-radius:999px; padding:7px 13px; cursor:pointer;}
  .ambchip:hover{background:#DCEAFA;}
  .amlist{display:flex; flex-direction:column; gap:6px;}
  .amrow{display:flex; align-items:center; gap:11px; width:100%; background:var(--cream-card); border:1px solid var(--line); border-radius:12px; padding:9px 12px; cursor:pointer; text-align:left; font:inherit;}
  .amrow.done{background:#EFF5FC; border-color:#D7E5F6;}
  .amrow.playing{border-color:#005eb2; box-shadow:0 0 0 1.5px #005eb2 inset;}
  .amrow .amnum{flex:none; width:27px; height:27px; border-radius:50%; background:#EAF2FB; color:#005eb2; font-size:11px; font-weight:800; display:flex; align-items:center; justify-content:center;}
  .amrow.done .amnum{background:#005eb2; color:#fff;}
  .amrow .amnm{flex:1; min-width:0;} .amrow .amnm b{font-size:12.5px; font-weight:700; color:var(--a-ink); display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .amrow .amnm small{display:block; font-size:9.5px; color:#8A94A5; margin-top:1px;}
  .amrow .amtick{flex:none; font-size:9.5px; font-weight:800; color:#005eb2; white-space:nowrap;}
  .amrow .amgo{flex:none; width:23px; height:23px; color:#005eb2;} .amrow .amgo svg{width:23px; height:23px;}
  /* the shared bottom player, tinted blue inside audio mode */
  .amode .apwrap .aptrack i{background:#005eb2;}
  .amode .apwrap .applay{background:#005eb2;}
  .amode .apwrap .aprep.on{color:#005eb2;}
  .amode .apwrap .aprep .reponly{background:#005eb2;}
  /* home "Listen" card — inverted to a blue audio-player look */
  .hcard.listencard{background:linear-gradient(135deg,#0a63b8,#013f79); border-color:#0a4e92;}
  .hcard.listencard .htitle{color:#fff;}
  .hcard.listencard .hdesc{color:rgba(255,255,255,.85);}
  .hcard.listencard .hchev{color:rgba(255,255,255,.72);}
  .hcard.listencard .hmed{background:rgba(255,255,255,.18);}
  .hcard.listencard .hmed svg{stroke:#fff;}
  .hcard.listencard .audprog .hbar{background:rgba(255,255,255,.3);}
  .hcard.listencard .audprog .hbar i{background:#fff;}
  .hcard.listencard .audprog b{color:#fff;}
  .hcard.listencard .audprog .hbar em{color:#fff;}
  /* ===== Set Your Intention (page 11) ===== */
  .screen.intent{background:linear-gradient(180deg,#FBF8F0,#F1F5EC);}
  .inthd{display:flex; align-items:center; gap:10px; padding:14px 15px; background:#fff; border-bottom:1px solid var(--line); flex:none;}
  .inthd .intback{background:none; border:none; font-size:22px; color:#8A94A5; cursor:pointer; line-height:1; padding:0 2px;}
  .inthd b{font-size:16px; font-weight:800; color:var(--a-ink);}
  .intbody{flex:1; overflow-y:auto; padding:16px 16px 20px; text-align:center; -ms-overflow-style:none; scrollbar-width:none;}
  .intbody::-webkit-scrollbar{display:none;}
  .intniyyah{display:inline-flex; align-items:center; gap:9px; background:rgba(1,178,112,.1); border:1px solid rgba(1,178,112,.28); color:#0a7c53; border-radius:999px; padding:7px 15px; font-size:11px; font-weight:700; margin-bottom:16px;}
  .intniyyah .intar{font-family:"qpc-hafs",serif; font-size:15px; color:#01824f;}
  .intcall{text-align:left; background:linear-gradient(135deg,#063b2a,#01824f); color:#fff; border-radius:18px; padding:15px 16px; margin-bottom:15px; box-shadow:0 14px 34px -18px rgba(1,120,80,.8);}
  .intcall .intcalltag{display:inline-block; font-size:9px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; background:rgba(255,255,255,.2); color:#ffe9b8; border-radius:999px; padding:4px 10px; margin-bottom:9px;}
  .intcall b{display:block; font-size:18px; font-weight:800; line-height:1.12;}
  .intcall small{display:block; font-size:11.5px; line-height:1.5; color:rgba(255,255,255,.88); margin-top:6px;}
  .inthero{position:relative; border-radius:20px; overflow:hidden; min-height:186px; display:flex; flex-direction:column; justify-content:flex-end; align-items:flex-start; text-align:left; padding:16px; color:#fff; box-shadow:0 16px 40px -18px rgba(20,40,30,.55);}
  .inthero::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,0) 34%,rgba(0,0,0,.6) 100%);}
  .inthero > *{position:relative; z-index:1;}
  .inthtag{font-size:8.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; background:rgba(255,255,255,.24); border-radius:999px; padding:5px 11px; margin-bottom:auto;}
  .inthmotif{position:absolute; top:14px; right:14px; opacity:.5;} .inthmotif svg{width:46px; height:46px;}
  .inthname{font-size:23px; font-weight:800; line-height:1.08; margin-top:10px;}
  .inthstat{font-size:11px; color:rgba(255,255,255,.92); margin-top:5px; font-weight:600;}
  .intline{font-size:15px; color:var(--a-ink); margin:18px 0 7px; font-weight:600;} .intline b{color:#01824f; font-weight:800;}
  .intblurb{font-size:12.5px; color:var(--a-soft); line-height:1.55; margin:0 auto; max-width:284px;}
  .intlabel{font-size:9px; letter-spacing:.12em; text-transform:uppercase; font-weight:800; color:var(--a-soft); margin:22px 0 10px; text-align:left;}
  .intgrid{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
  .intcard{position:relative; border-radius:15px; overflow:hidden; min-height:94px; display:flex; flex-direction:column; justify-content:flex-end; align-items:flex-start; text-align:left; padding:11px; color:#fff; cursor:pointer; border:none; font:inherit; box-shadow:0 8px 20px -12px rgba(20,40,30,.5);}
  .intcard::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.52));}
  .intcard > *{position:relative; z-index:1;}
  .intcard .icmotif{position:absolute; top:9px; right:9px; opacity:.5;} .intcard .icmotif svg{width:24px; height:24px;}
  .intcard .icname{font-size:12.5px; font-weight:800; line-height:1.15;}
  .intcard.on{box-shadow:0 0 0 3px #01b270, 0 10px 22px -10px rgba(1,140,90,.6);}
  .intcard .iccheck{position:absolute; top:8px; left:8px; width:22px; height:22px; border-radius:50%; background:#01b270; color:#fff; font-size:12px; font-weight:800; display:flex; align-items:center; justify-content:center; z-index:2; box-shadow:0 2px 6px rgba(0,0,0,.3);}
  .intcta{width:100%; margin-top:20px; background:#01b270; color:#fff; border:none; border-radius:14px; padding:15px; font:inherit; font-size:14px; font-weight:800; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:9px; box-shadow:0 12px 26px -12px rgba(1,140,90,.75);}
  .intcta:hover{background:#01a267;}
  .intskip{width:100%; margin-top:10px; background:none; border:none; color:var(--a-soft); font:inherit; font-size:12px; font-weight:600; cursor:pointer; padding:7px;}
  .intconfirm{position:absolute; inset:0; z-index:30; background:rgba(250,247,240,.98); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:32px; opacity:0; transition:opacity .25s;}
  .intconfirm.show{opacity:1;}
  .intconfirm .icbadge{width:78px; height:78px; border-radius:50%; background:#01b270; display:flex; align-items:center; justify-content:center; margin-bottom:18px; box-shadow:0 14px 30px -12px rgba(1,140,90,.75);}
  .intconfirm .icdua{font-family:"qpc-hafs",serif; font-size:21px; color:#01824f; margin-bottom:12px;}
  .intconfirm h3{font-size:17px; color:var(--a-ink); margin:0 0 8px;}
  .intconfirm p{font-size:12.5px; color:var(--a-soft); line-height:1.55; max-width:255px; margin:0 0 22px;} .intconfirm p b{color:#01824f;}
  .intconfirm .icbegin{background:#01b270; color:#fff; border:none; border-radius:12px; padding:13px 28px; font:inherit; font-size:13px; font-weight:800; cursor:pointer;}
  /* audio-mode surah part-listened progress bar */
  .amrow .amnm .ampbar{display:block; height:5px; border-radius:999px; background:#DBE7F5; overflow:hidden; margin-top:6px; max-width:170px;}
  .amrow .amnm .ampbar i{display:block; height:100%; border-radius:999px; background:#005eb2;}
  .amrow.partial{border-color:#CFE0F4;}
  /* ===== Audio mode v2 — full media player (blue theme) ===== */
  .screen.amode2{background:linear-gradient(170deg,#0a63b8 0%,#0a4e92 52%,#012f5c 100%); color:#fff;}
  .am2hd{display:flex; align-items:center; gap:11px; padding:14px 15px 4px; flex:none;}
  .am2back{background:rgba(255,255,255,.15); border:none; color:#fff; width:32px; height:32px; border-radius:50%; font-size:20px; line-height:1; cursor:pointer; flex:none;}
  .am2ht b{display:block; font-size:15px; font-weight:800; color:#fff;}
  .am2ht small{display:block; font-size:10px; color:rgba(255,255,255,.7); margin-top:1px;}
  .am2scroll{flex:1; overflow-y:auto; padding:6px 16px 18px; -ms-overflow-style:none; scrollbar-width:none;}
  .am2scroll::-webkit-scrollbar{display:none;}
  .am2player{position:relative; padding-top:6px;}
  .am2hero{position:relative; background:linear-gradient(160deg,#ffffff,#e7f1fc); border-radius:20px; padding:26px 18px 22px; min-height:172px; display:flex; flex-direction:column; align-items:center; justify-content:center; box-shadow:0 18px 44px -18px rgba(0,20,50,.75);}
  .am2nowtag{position:absolute; top:12px; left:0; right:0; text-align:center; font-size:8px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; color:#0a63b8;}
  .am2ar{font-family:"qpc-hafs",serif; font-size:27px; line-height:1.95; color:#123153; text-align:center; direction:rtl;}
  .am2en{margin-top:12px; font-size:12.5px; line-height:1.5; color:#41586f; text-align:center; max-width:250px;}
  .am2meta{text-align:center; margin-top:15px;}
  .am2title{display:block; font-size:15px; font-weight:800; color:#fff;}
  .am2rec{margin-top:7px; font:inherit; font-size:11px; font-weight:700; color:rgba(255,255,255,.9); background:rgba(255,255,255,.15); border:none; border-radius:999px; padding:5px 13px; cursor:pointer;}
  .am2prg{margin-top:16px;}
  .am2barwrap{height:5px; border-radius:999px; background:rgba(255,255,255,.25); overflow:hidden;}
  .am2fill{display:block; height:100%; width:0; background:#fff; border-radius:999px; transition:width .14s linear;}
  .am2times{display:flex; justify-content:space-between; margin-top:6px; font-size:10px; color:rgba(255,255,255,.78); font-variant-numeric:tabular-nums;}
  .am2tr{display:flex; align-items:center; justify-content:center; gap:20px; margin-top:16px;}
  .am2tr button{background:none; border:none; cursor:pointer; color:#fff; display:flex; align-items:center; justify-content:center; padding:0;}
  .am2rep,.am2spd{position:relative; color:rgba(255,255,255,.72); font:inherit; font-size:12px; font-weight:800; min-width:32px;}
  .am2rep.on{color:#fff;}
  .am2repone{display:none; position:absolute; top:-3px; right:-2px; background:#fff; color:#0a63b8; font-size:7px; font-style:normal; font-weight:800; width:11px; height:11px; border-radius:50%; line-height:11px; text-align:center;}
  .am2rep.one .am2repone{display:block;}
  .am2play{width:62px; height:62px; border-radius:50%; background:#fff; color:#0a63b8; box-shadow:0 10px 24px -8px rgba(0,0,0,.55);}
  .am2bg{text-align:center; margin-top:15px; font-size:9.5px; color:rgba(255,255,255,.6);}
  .am2reclist{position:absolute; left:50%; transform:translateX(-50%); bottom:64px; background:#fff; border-radius:12px; box-shadow:0 14px 32px rgba(0,0,0,.45); padding:6px; z-index:12; min-width:186px;}
  .am2reclist button{display:block; width:100%; text-align:left; font:inherit; font-size:12px; font-weight:600; color:#123153; background:none; border:none; border-radius:8px; padding:9px 11px; cursor:pointer;}
  .am2reclist button.on,.am2reclist button:hover{background:#EAF2FB;}
  .am2khatam{margin-top:24px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.17); border-radius:14px; padding:13px 14px;}
  .am2ktop{display:flex; justify-content:space-between; align-items:baseline;} .am2ktop b{font-size:12.5px; color:#fff;} .am2ktop span{font-size:16px; font-weight:800; color:#fff;}
  .am2kbar{height:8px; border-radius:999px; background:rgba(255,255,255,.24); overflow:hidden; margin:9px 0 6px;} .am2kbar i{display:block; height:100%; background:#fff; border-radius:999px;}
  .am2ksub{font-size:10px; color:rgba(255,255,255,.74);}
  .am2lab{font-size:9px; letter-spacing:.1em; text-transform:uppercase; font-weight:800; color:rgba(255,255,255,.62); margin:18px 2px 9px; display:flex; align-items:center; justify-content:space-between;}
  .am2leg{font-size:8.5px; font-weight:700; color:rgba(255,255,255,.62); display:inline-flex; align-items:center; gap:5px; text-transform:none; letter-spacing:0;}
  .am2leg i{width:13px; height:13px; border-radius:50%; background:#fff; display:inline-flex; align-items:center; justify-content:center;}
  .am2leg i::after{content:'✓'; color:#0a63b8; font-size:8px; font-weight:800;}
  .am2bm{display:flex; gap:8px; flex-wrap:wrap;}
  .am2chip{font:inherit; font-size:11.5px; font-weight:700; color:#fff; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.22); border-radius:999px; padding:7px 13px; cursor:pointer;}
  .am2list{display:flex; flex-direction:column; gap:6px;}
  .am2row{display:flex; align-items:center; gap:11px; width:100%; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.15); border-radius:12px; padding:9px 12px; cursor:pointer; text-align:left; font:inherit;}
  .am2row.done{background:rgba(255,255,255,.17);}
  .am2row.playing{border-color:#fff; box-shadow:0 0 0 1.5px #fff inset;}
  .am2num{flex:none; width:27px; height:27px; border-radius:50%; background:rgba(255,255,255,.2); color:#fff; font-size:11px; font-weight:800; display:flex; align-items:center; justify-content:center;}
  .am2row.done .am2num{background:#fff; color:#0a63b8;}
  .am2nm{flex:1; min-width:0;} .am2nm b{font-size:12.5px; color:#fff; display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .am2nm small{display:block; font-size:9.5px; color:rgba(255,255,255,.72); margin-top:1px;}
  .am2pbar{display:block; height:5px; border-radius:999px; background:rgba(255,255,255,.24); overflow:hidden; margin-top:6px; max-width:170px;} .am2pbar i{display:block; height:100%; background:#fff; border-radius:999px;}
  .am2tick{flex:none; font-size:12px; font-weight:800; color:#fff;}
  .am2go{flex:none; color:#fff;} .am2go svg{width:22px; height:22px;}
  /* ===== audio player refinements (v3.00) ===== */
  .am2hd{gap:8px;}
  .am2med{width:34px; height:34px; border-radius:10px; background:rgba(255,255,255,.16); display:flex; align-items:center; justify-content:center; flex:none;}
  .am2ht{flex:1; min-width:0;}
  .am2ico{flex:none; width:31px; height:31px; border-radius:50%; background:rgba(255,255,255,.12); border:none; color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0;}
  .am2ico:hover{background:rgba(255,255,255,.24);}
  .am2av{display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; color:#fff; font-size:8.5px; font-weight:800; flex:none;}
  .am2rec{display:inline-flex; align-items:center; gap:7px;} .am2rec .am2av{width:20px; height:20px;}
  .am2rep{color:rgba(255,255,255,.4);} .am2rep.on{color:#fff;}
  .am2spd{color:rgba(255,255,255,.82);}
  .am2play{background:#fff; color:#0a63b8; box-shadow:0 0 0 6px rgba(255,255,255,.16), 0 12px 28px -8px rgba(0,0,0,.6);}
  .am2row{background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.1);}
  .am2row.done{background:rgba(255,255,255,.9); border-color:#fff;}
  .am2row.done .am2nm b{color:#0d2f52;} .am2row.done .am2nm small{color:#54708f;} .am2row.done .am2tick{color:#0a63b8;}
  .am2row.done .am2num{background:#0a63b8; color:#fff;}
  .am2reclist button{display:flex; align-items:center; gap:9px;}
  .am2scroll{padding-bottom:78px;}
  /* pinned mini player */
  .am2mini{position:absolute; left:0; right:0; bottom:0; display:flex; align-items:center; gap:11px; padding:11px 14px; background:rgba(4,38,74,.97); border-top:1px solid rgba(255,255,255,.15); transform:translateY(120%); transition:transform .25s; z-index:24;}
  .am2mini.show{transform:none;}
  .am2mit{flex:1; min-width:0; font-size:12px; font-weight:700; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .am2mini button{flex:none; background:none; border:none; color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0;}
  .am2miplay{width:40px; height:40px; border-radius:50%; background:#fff; color:#0a63b8;}
  .am2miprev,.am2minext{width:30px; height:30px; opacity:.85;}
  /* bottom sheets */
  .am2dim{position:absolute; inset:0; background:rgba(4,20,40,.55); opacity:0; transition:opacity .25s; z-index:40;}
  .am2dim.show{opacity:1;}
  .am2sheet{position:absolute; left:0; right:0; bottom:0; z-index:41; background:#fff; border-radius:20px 20px 0 0; padding:20px 18px 22px; transform:translateY(100%); transition:transform .28s; max-height:84%; overflow-y:auto; box-shadow:0 -14px 40px rgba(0,0,0,.4);}
  .am2sheet.show{transform:none;}
  .am2shx{position:absolute; top:12px; right:13px; background:none; border:none; font-size:16px; color:#98917D; cursor:pointer;}
  .am2sheet h4{margin:0 0 9px; font-size:16px; color:#123153;}
  .am2sheet > p{font-size:12.5px; color:#4a5a6e; line-height:1.55; margin:0 0 11px;} .am2sheet > p b{color:#0a63b8;}
  .am2pref{display:flex; align-items:center; gap:10px; padding:12px 0; border-top:1px solid #EEF1F5;}
  .am2pref > div{flex:1; min-width:0;} .am2pref b{display:block; font-size:13px; color:#1c3350; font-weight:700;} .am2pref small{display:block; font-size:11px; color:#7488a0; margin-top:1px;}
  .am2pref .am2chev{color:#9BB4CE; font-size:18px;}
  .am2tog{flex:none; width:40px; height:23px; border-radius:999px; background:#D7DEE7; position:relative; cursor:pointer; transition:background .18s;}
  .am2tog::after{content:""; position:absolute; top:2.5px; left:2.5px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.3); transition:left .18s;}
  .am2tog.on{background:#01b270;} .am2tog.on::after{left:19.5px;}
  .am2jrow{display:flex; align-items:center; gap:12px; margin:12px 0;}
  .am2jrow label{width:50px; font-size:12px; font-weight:700; color:#1c3350;}
  .am2jrow select,.am2jrow input{flex:1; font:inherit; font-size:13px; color:#123153; border:1.5px solid #D7DEE7; border-radius:10px; padding:10px 11px; background:#fff;}
  .am2jgo{width:100%; margin-top:8px; background:#0a63b8; color:#fff; border:none; border-radius:12px; padding:13px; font:inherit; font-size:13px; font-weight:800; cursor:pointer;}
  /* transport button colours — beat .am2tr button / .am2mini button */
  .am2tr .am2play, .am2mini .am2miplay{color:#0a63b8;}
  .am2tr .am2rep{color:rgba(255,255,255,.4);}
  .am2tr .am2rep.on{color:#fff;}
  .am2tr .am2spd{color:rgba(255,255,255,.82);}
  /* ===== audio player v3.01 ===== */
  /* overall progress bar under the header */
  .am2overall{flex:none; padding:2px 16px 8px;}
  .am2ol{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:5px;}
  .am2ol span{font-size:8.5px; font-weight:800; letter-spacing:.1em; color:rgba(255,255,255,.66);}
  .am2ol b{font-size:11px; font-weight:800; color:#fff;}
  .am2obar{height:5px; border-radius:999px; background:rgba(255,255,255,.2); overflow:hidden;}
  .am2obar i{display:block; height:100%; background:#fff; border-radius:999px;}
  /* capped verse box so the controls stay visible */
  .am2hero{min-height:150px; max-height:206px; padding:18px 16px;}
  .am2versebox{flex:1 1 auto; min-height:0; width:100%; overflow-y:auto; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; -ms-overflow-style:none; scrollbar-width:none;}
  .am2versebox::-webkit-scrollbar{display:none;}
  .am2hero .am2ar{font-size:24px; line-height:1.8;}
  /* bigger, prominent reciter avatar */
  .am2av.big{width:28px; height:28px; font-size:11px; box-shadow:0 0 0 2px rgba(255,255,255,.4);}
  .am2rec{gap:9px; padding:6px 14px 6px 7px;}
  /* play/pause — coloured button, WHITE icon (was hard to see) */
  .am2play{background:#1f83d8; box-shadow:0 0 0 5px rgba(255,255,255,.18), 0 12px 26px -8px rgba(0,0,0,.55);}
  .am2tr .am2play{color:#fff; background:#1f83d8;}
  /* A–B range loop */
  .am2abrow{display:flex; justify-content:center; margin-top:13px;}
  .am2ab{display:inline-flex; align-items:center; gap:7px; font:inherit; font-size:11px; font-weight:800; color:rgba(255,255,255,.85); background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.22); border-radius:999px; padding:8px 15px; cursor:pointer; max-width:100%;}
  .am2ab.arm{background:rgba(255,206,120,.2); border-color:rgba(255,206,120,.6); color:#ffdca0;}
  .am2ab.on{background:#fff; color:#0a4f92; border-color:#fff;}
  /* inline search bar above the list */
  .am2search{display:flex; align-items:center; gap:9px; width:100%; margin:6px 0 14px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2); border-radius:12px; padding:11px 13px; color:rgba(255,255,255,.82); font:inherit; font-size:12.5px; cursor:pointer; text-align:left;}
  .am2search svg{flex:none;} .am2search:hover{background:rgba(255,255,255,.18);}
  /* info sheet bullets */
  .am2sheet .am2ul{margin:6px 0 0; padding-left:20px;}
  .am2sheet .am2ul li{font-size:12.5px; color:#4a5a6e; line-height:1.5; margin-bottom:9px;}
  .am2sheet .am2ul li b{color:#0a63b8;}
  /* fuller pinned player (progress + controls) */
  .am2mini{flex-direction:column; align-items:stretch; gap:9px; padding:10px 14px 12px;}
  .am2mibar{height:3px; border-radius:999px; background:rgba(255,255,255,.24); overflow:hidden;}
  .am2mibar i{display:block; height:100%; background:#fff; border-radius:999px; width:0;}
  .am2mirow{display:flex; align-items:center; gap:11px;}
  .am2miav{flex:none;} .am2miav .am2av{width:30px; height:30px; font-size:11px;}
  .am2mit{flex:1; min-width:0; font-size:12px; font-weight:700; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .am2miplay{width:38px; height:38px; border-radius:50%; background:#1f83d8;}
  .am2mini .am2miplay{color:#fff; background:#1f83d8;}
  .am2miprev,.am2minext{width:28px; height:28px; opacity:.9;}
  .am2mispd{flex:none; background:none; border:none; color:rgba(255,255,255,.82); font:inherit; font-size:11px; font-weight:800; min-width:30px; cursor:pointer;}
  /* ===== audio player v3.02 ===== */
  /* verse box — scrolls cleanly top & bottom (margin:auto centres short verses, no clipping) */
  .am2hero{position:relative; height:198px; padding:0; overflow:hidden; display:block;}
  .am2versebox{height:100%; overflow-y:auto; display:flex; flex-direction:column; -ms-overflow-style:none; scrollbar-width:none;}
  .am2versebox::-webkit-scrollbar{display:none;}
  .am2vinner{margin:auto; width:100%; padding:36px 16px 18px; text-align:center;}
  .am2vref{position:absolute; top:0; left:0; right:0; z-index:2; text-align:center; padding:11px 12px 9px; font-size:10.5px; font-weight:800; letter-spacing:.02em; color:#0a4f92; background:linear-gradient(180deg,#f3f8fd 62%,rgba(243,248,253,0));}
  .am2nowtag{position:absolute; top:0; left:0; right:0; z-index:2; padding:12px 0 10px; background:linear-gradient(180deg,#f3f8fd 62%,rgba(243,248,253,0));}
  /* bigger reciter avatar (photo-ready frame) */
  .am2av.big{width:30px; height:30px; font-size:11.5px; box-shadow:0 0 0 2px rgba(255,255,255,.45);}
  .am2av.xl{width:64px; height:64px; font-size:22px; box-shadow:0 0 0 3px rgba(255,255,255,.5);}
  .am2av.photo{overflow:hidden; background:#0a4f92;}
  .am2av img{width:100%; height:100%; object-fit:cover; display:block; border-radius:50%;}
  .am2rec{gap:9px; padding:6px 15px 6px 6px;}
  /* reciter menu download markers */
  .am2reclist button{display:flex; align-items:center; gap:9px;}
  .am2reclist button > span:not(.am2av){flex:1;}
  .am2dlok{color:#2f9e5f; font-style:normal; font-weight:800; font-size:12px;}
  .am2dlic{color:#8aa0bd; font-style:normal; font-size:14px;}
  /* loop chip */
  .am2loopchip{display:flex; align-items:center; justify-content:center; gap:9px; margin-top:13px; background:#fff; color:#0a4f92; border-radius:999px; padding:8px 14px; font-size:11.5px; font-weight:800;}
  .am2loopchip .am2lpx{background:rgba(10,79,146,.12); border:none; color:#0a4f92; width:20px; height:20px; border-radius:50%; cursor:pointer; font-size:11px; line-height:1;}
  /* reciter download overlay */
  .am2dl{position:absolute; inset:0; z-index:55; background:rgba(4,30,62,.78); display:flex; align-items:center; justify-content:center; padding:28px; opacity:0; transition:opacity .25s;}
  .am2dl.show{opacity:1;}
  .am2dlcard{width:100%; max-width:280px; background:#fff; border-radius:18px; padding:24px 20px; text-align:center; box-shadow:0 20px 50px rgba(0,0,0,.5);}
  .am2dlcard .am2av{margin:0 auto 14px;}
  .am2dlcard b{display:block; font-size:15px; color:#123153;}
  .am2dlcard small{display:block; font-size:11px; color:#7488a0; margin-top:3px;}
  .am2dlbar{height:7px; border-radius:999px; background:#E4EAF1; overflow:hidden; margin:16px 0 8px;}
  .am2dlbar i{display:block; height:100%; width:0; border-radius:999px; background:linear-gradient(90deg,#1f83d8,#0a63b8); transition:width .13s linear;}
  .am2dlpct{font-size:11.5px; font-weight:800; color:#0a63b8;}
  .am2dlcard.done .am2dlpct{color:#2f9e5f;}
  /* listen-set rows */
  .am2ltog{border-top:1px solid #EEF1F5; cursor:pointer;}
  .am2torow input{background:#fff;}
  .am2loopprev{margin:8px 0 14px; font-size:12px; font-weight:800; color:#0a63b8; text-align:center; background:#EAF2FB; border-radius:10px; padding:10px;}
  .am2ab{display:inline-block;} .am2ab svg{vertical-align:-3px; margin:0 1px;}
  .apreclist{position:absolute; right:12px; bottom:calc(100% + 4px); background:#fff; border:1px solid #E8E4D8; border-radius:12px; padding:5px; box-shadow:0 -6px 20px -8px rgba(60,45,10,.4); z-index:9; min-width:158px;}
  .apreclist .apreci{display:block; width:100%; text-align:left; font:inherit; font-size:11.5px; font-weight:600; color:var(--a-ink); background:none; border:none; border-radius:8px; padding:8px 10px; cursor:pointer;}
  .apreclist .apreci.on{background:rgba(47,158,95,.14); color:#1f7a47; font-weight:800;}
  .vrow.aplay{background:rgba(1,178,112,.12); box-shadow:inset 0 0 0 2px rgba(1,178,112,.55);}
  .mvv.aplay{background:rgba(1,178,112,.16); border-radius:8px; padding:3px 4px; -webkit-box-decoration-break:clone; box-decoration-break:clone;}
  .apprompt{position:absolute; left:12px; right:12px; bottom:calc(100% + 8px); background:#fff; border:1px solid #E8E4D8; border-radius:14px; padding:12px 13px; box-shadow:0 -6px 22px -10px rgba(60,45,10,.4); z-index:8;}
  .apprompt b{display:block; font-size:12.5px; color:var(--a-ink);} .apprompt span{display:block; font-size:11px; color:var(--ink-2); margin-top:2px;}
  .apprompt .apbtns{display:flex; gap:8px; margin-top:10px;}
  .apprompt .apbtns button{flex:1; font:inherit; font-size:12px; font-weight:800; padding:9px; border-radius:10px; cursor:pointer;}
  .apprompt .apsurah{background:var(--qc-green); color:#fff; border:none;}
  .apprompt .aptop{background:#F1ECDD; color:#6E6857; border:none;}
  .wtoken{cursor:pointer;}
  .wtoken.wplay.playing{background:#EAF7EF; box-shadow:0 0 0 2px #6FCE9B, 0 2px 10px rgba(47,158,95,.25);}
  .wtoken.wplay.playing .wa{color:var(--qc-green-deep);}
  .wtoken.wplay.playing .wt{color:var(--qc-green-deep);}
  .wtoken.wplay.playing .wm{color:var(--qc-green-deep);}
  .wtoken .wchip{position:absolute; top:-9px; right:-7px; width:18px; height:18px; border-radius:50%; background:var(--qc-green); color:#fff; font-size:9px; display:flex; align-items:center; justify-content:center; box-shadow:0 1px 3px rgba(0,0,0,.25);}
  .wtoken{position:relative;}

  /* overlays: sheet + dialog */
  .dim{position:absolute; inset:0; background:rgba(33,30,22,.45); z-index:8;}
  .sheet{position:absolute; left:0; right:0; bottom:0; background:#fff; border-radius:18px 18px 0 0; padding:20px 18px 22px; z-index:9; box-shadow:0 -8px 30px rgba(0,0,0,.18);}
  .sheet h4{margin:0 0 6px; font-size:15px; text-align:center;}
  .sheet .sub{text-align:center; color:var(--a-soft); font-size:11.5px; margin-bottom:14px;}
  .sbtns{display:flex; flex-direction:column; gap:9px;}
  .btn{font:inherit; font-size:12px; font-weight:700; letter-spacing:.06em; border-radius:8px; padding:11px 12px; cursor:pointer; text-transform:uppercase;}
  .btn.outline{background:#fff; border:1.5px solid var(--qc-green); color:var(--qc-green);}
  .btn.solid{background:var(--qc-green); border:1.5px solid var(--qc-green); color:#fff;}
  .btn.ghost{background:none; border:none; color:#8B8471; font-weight:600; text-transform:none;}
  .btn.danger{background:var(--red); border:1.5px solid var(--red); color:#fff;}
  .dialog{position:absolute; left:24px; right:24px; top:38%; background:#fff; border-radius:14px; padding:18px 16px; z-index:9; box-shadow:0 14px 40px rgba(0,0,0,.25); text-align:center;}
  .dialog h4{margin:0 0 6px; font-size:13.5px;}
  .dialog p{font-size:11.5px; color:var(--a-soft); margin:0 0 14px;}
  .drow{display:flex; gap:9px;}
  .drow .btn{flex:1;}

  /* settings sheet */
  .set-label{font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--a-soft); font-weight:700; margin:22px 0 9px;}
  .set-label:first-of-type{margin-top:16px;}
  .laycards{display:flex; gap:10px;}
  .laycard{flex:1; border:1.5px solid var(--line); border-radius:11px; padding:11px 9px; cursor:pointer; background:#fff; text-align:center;}
  .laycard.sel{border-color:var(--qc-green); background:var(--green-tint);}
  .laycard .thumb{height:46px; border-radius:6px; background:var(--cream); border:1px solid var(--line); margin-bottom:8px; display:flex; overflow:hidden;}
  .laycard .thumb i{display:block; flex:1;}
  .laycard .thumb .t-ar{border-right:1px solid var(--gold-strong); background:repeating-linear-gradient(180deg,transparent 0 6px,#D8CBA6 6px 8px); margin:6px 3px 6px 6px;}
  .laycard .thumb .t-en{background:repeating-linear-gradient(180deg,transparent 0 6px,#BFD9C8 6px 8px); margin:6px 6px 6px 3px;}
  .laycard .thumb.stackthumb{flex-direction:column;}
  .laycard .thumb.stackthumb .t-ar{margin:6px 6px 2px; border-right:none;}
  .laycard .thumb.stackthumb .t-en{margin:2px 6px 6px;}
  .laycard b{font-size:11.5px; display:block;}
  .laycard small{display:block; margin-top:2px; font-size:9.5px; color:var(--a-soft);}
  .submode{font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--qc-green-deep); font-weight:700; margin:16px 0 8px;}
  .laycards + .submode{margin-top:20px;}
  .laycard .thumb.fullthumb{flex-direction:column; align-items:center; justify-content:center; gap:2px; padding:5px;}
  .laycard .thumb.fullthumb i{display:block; height:2px; background:#C9B98C; border-radius:1px; margin:0;}
  .laycard .thumb.fullthumb i:nth-child(1){width:84%;} .laycard .thumb.fullthumb i:nth-child(2){width:84%;} .laycard .thumb.fullthumb i:nth-child(3){width:84%;} .laycard .thumb.fullthumb i:nth-child(4){width:84%;} .laycard .thumb.fullthumb i:nth-child(5){width:84%;}
  .togglerow{display:flex; align-items:center; justify-content:space-between; background:#fff; border:1px solid var(--line); border-radius:11px; padding:13px 14px; font-size:12.5px; font-weight:600;}
  .switch{width:36px; height:21px; border-radius:999px; background:var(--qc-green); position:relative; flex:none; cursor:pointer; border:none;}
  .switch:after{content:""; position:absolute; top:2.5px; right:3px; width:16px; height:16px; border-radius:50%; background:#fff;}
  .switch.off{background:#D7D2C2;}
  .switch.off:after{right:auto; left:3px;}
  .seg{display:flex; border:1.5px solid var(--line); border-radius:10px; overflow:hidden;}
  .seg button{flex:1; border:none; background:#fff; font:inherit; padding:11px 4px; cursor:pointer; color:var(--a-soft); font-weight:600;}
  .seg button.sel{background:var(--green-tint); color:var(--qc-green-deep);}
  .seg .s1{font-size:11px;} .seg .s2{font-size:13px;} .seg .s3{font-size:15px;}

  /* toast */
  .toast{position:absolute; left:50%; bottom:72px; transform:translateX(-50%); background:#2B2719; color:#F6F1E2; font-size:11.5px; font-weight:600; border-radius:999px; padding:7px 15px; z-index:10; white-space:nowrap; opacity:0; transition:opacity .25s ease;}
  .toast.show{opacity:1;}

  /* ============ LAYOUT OF THE SUITE PAGE ============ */
  .protobox{display:flex; gap:34px; align-items:flex-start; flex-wrap:wrap;}
  .protoside{flex:1; min-width:270px; max-width:430px;}
  .trylist{counter-reset:t; list-style:none; padding:0; margin:14px 0 0; display:flex; flex-direction:column; gap:9px;}
  .trylist li{counter-increment:t; background:var(--card); border:1px solid var(--line-w); border-radius:10px; padding:11px 13px 11px 44px; position:relative; font-size:13.5px;}
  .trylist li:before{content:counter(t); position:absolute; left:13px; top:10px; width:21px; height:21px; border-radius:50%; background:var(--accent); color:#fff; font-size:11.5px; font-weight:700; display:flex; align-items:center; justify-content:center;}
  .controlchips{display:flex; gap:8px; flex-wrap:wrap; margin-top:16px;}
  .cchip{font:inherit; font-size:12px; font-weight:600; border:1.5px solid var(--line-w); background:var(--card); color:var(--ink); border-radius:999px; padding:6px 13px; cursor:pointer;}
  .cchip[aria-pressed="true"]{border-color:var(--accent); color:var(--accent-deep); background:transparent;}

  .suite{display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:34px 26px;}
  .cell .cap{margin-bottom:10px;}
  .cell .cap .fno{font-size:10.5px; letter-spacing:.15em; color:var(--gold-w); font-weight:800;}
  .cell .cap h3{font-size:15px; margin:2px 0 4px;}
  .cell .cap ul{margin:0; padding-left:16px; color:var(--ink-2); font-size:12.5px;}
  .cell .cap li{margin:2px 0;}
  .minibox{width:319px; height:625px; overflow:hidden; border-radius:34px;}
  .minibox .phone{transform:scale(.85); transform-origin:top left;}

  /* spec */
  .specgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:16px;}
  .spec{background:var(--card); border:1px solid var(--line-w); border-radius:12px; padding:16px 18px;}
  .spec h3{font-size:14px; color:var(--accent-deep); margin-bottom:8px;}
  .spec ul{margin:0; padding-left:17px; font-size:13px; color:var(--ink);}
  .spec li{margin:5px 0;}
  .spec small{color:var(--ink-2);}
  .spec .t{display:inline-block; background:var(--code); border-radius:5px; padding:0 6px; font-size:12px; font-variant-numeric:tabular-nums;}

  table.tokens{border-collapse:collapse; width:100%; font-size:13px; background:var(--card); border:1px solid var(--line-w); border-radius:12px; overflow:hidden;}
  table.tokens th,table.tokens td{padding:9px 13px; text-align:left; border-bottom:1px solid var(--line-w);}
  table.tokens th{font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2);}
  table.tokens tr:last-child td{border-bottom:none;}
  .sw{display:inline-block; width:15px; height:15px; border-radius:4px; vertical-align:-3px; margin-right:8px; border:1px solid rgba(0,0,0,.15);}
  .tokenwrap{overflow-x:auto;}
  code{background:var(--code); border-radius:5px; padding:1px 6px; font-size:12.5px;}

  /* font proof */
  .fontproof{margin-top:24px;}
  .fontproof > h3{font-size:15px; color:var(--accent-deep); margin-bottom:4px;}
  .fp-note{color:var(--ink-2); font-size:13px; max-width:75ch;}
  .wbw-full{direction:rtl; font-family:"qpc-hafs",serif; font-size:25px; line-height:2.25; color:var(--ink); background:var(--card); border:1px solid var(--line-w); border-radius:12px; padding:14px 18px; margin:14px 0;}
  .wbw{display:flex; flex-wrap:wrap; direction:rtl; gap:8px;}
  .wchip{background:var(--card); border:1px solid var(--line-w); border-radius:10px; padding:8px 10px 7px; text-align:center;}
  .wchip .wa{font-family:"qpc-hafs",serif; font-size:23px; line-height:1.8; color:var(--ink);}
  .wchip .we{font-size:10.5px; color:var(--ink-2); max-width:100px; direction:ltr;}
  .wchip.end{border-color:var(--accent); background:transparent;}
  .codeblock{background:var(--code); border-radius:8px; padding:12px 14px; font-size:12px; overflow-x:auto; font-family:Consolas,"Cascadia Mono",monospace; line-height:1.6; margin:8px 0 10px;}

  /* page tints in full-page mode */
  .mpage.counted{background:var(--green-tint); transition:background .45s ease;}
  .mpage.undoing{background:#FBEAEA; transition:background .45s ease;}

  /* periodic “tap to confirm” nudge on the counter */
  @keyframes nudgewig{0%,100%{transform:rotate(0) scale(1);}18%{transform:rotate(-7deg) scale(1.1);}36%{transform:rotate(6deg) scale(1.12);}54%{transform:rotate(-4deg) scale(1.07);}72%{transform:rotate(2deg) scale(1.03);}}
  @keyframes nudgering{0%{box-shadow:0 0 0 0 rgba(47,158,95,.5);}100%{box-shadow:0 0 0 16px rgba(47,158,95,0);}}
  .counter.nudge{animation:nudgewig 1s ease, nudgering 1.15s ease;}

  /* first-run walkthrough (coach marks) */
  .spot{position:absolute; border:2px solid #FFFDF6; border-radius:16px; box-shadow:0 0 0 4000px rgba(28,25,18,.62); z-index:40; pointer-events:none;}
  .wcard{position:absolute; z-index:41; left:16px; right:16px; background:#FFFDF6; border-radius:14px; padding:15px 16px 13px; box-shadow:0 14px 40px rgba(0,0,0,.3);}
  .wcard h5{margin:0 0 4px; font-size:13.5px; color:var(--a-ink);}
  .wcard p{margin:0 0 12px; font-size:11.5px; line-height:1.5; color:var(--a-soft);}
  .wcard .wrow{display:flex; align-items:center; justify-content:space-between;}
  .wcard .wdots{display:flex; gap:5px;}
  .wcard .wdots i{width:6px; height:6px; border-radius:50%; background:#DDD6C4;}
  .wcard .wdots i.on{background:var(--qc-green);}
  .wcard .wbtns{display:flex; gap:8px;}
  .wcard .wskip{border:none; background:none; font:inherit; font-size:11.5px; color:var(--a-soft); cursor:pointer; padding:7px 6px;}
  .wcard .wnext{border:none; background:var(--qc-green); color:#fff; font:inherit; font-size:11.5px; font-weight:700; border-radius:8px; padding:8px 16px; cursor:pointer;}

  /* ===== GUIDED ONBOARDING (dedicated flow) ===== */
  .obcard{position:absolute; left:16px; right:16px; top:64px; z-index:41; background:#FFFDF6; border-radius:16px; padding:17px 17px 15px; box-shadow:0 18px 50px rgba(0,0,0,.4);}
  .obcard.center{top:50%; transform:translateY(-50%);}
  .obstep{font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--qc-green-deep); font-weight:800; margin-bottom:5px;}
  .obcard h4{margin:0 0 5px; font-size:15px; color:var(--a-ink); text-wrap:balance;}
  .obcard p{margin:0 0 13px; font-size:11.5px; line-height:1.5; color:var(--a-soft);}
  .obmodes{display:flex; flex-direction:column; gap:8px;}
  .obmode{display:flex; align-items:center; gap:12px; border:1.5px solid var(--line); border-radius:11px; padding:9px 11px; background:#fff; cursor:pointer; text-align:left; transition:border-color .15s ease, background .15s ease;}
  .obmode:hover{border-color:var(--qc-green); background:var(--green-tint);}
  .obmode .obprev{width:78px; height:54px; flex:none; border-radius:8px; overflow:hidden; border:1px solid var(--line); box-shadow:0 1px 3px rgba(90,80,50,.12);}
  .obmode .obprev svg{display:block; width:100%; height:100%;}
  .obmode .obtext{min-width:0;}
  .obmode b{display:block; font-size:12.5px; color:var(--a-ink);}
  .obmode small{display:block; font-size:10px; color:var(--a-soft); line-height:1.35;}
  .obmode .obnotx{display:inline-block; margin-top:5px; background:#FDECEA; border:1px solid #D98682; color:#B42318; font-weight:800; font-size:9px; letter-spacing:.3px; padding:2px 8px; border-radius:999px; line-height:1.5;}
  /* Arabic-only reading: free-flowing Arabic, translation hidden */
  .content.layout-arabic .enwrap{display:none;} .content.layout-arabic .cols .ar{width:100%;}
  /* khatam screen: link to the full stats page + the quiz entry pill */
  .kseeall{display:block; margin:9px auto 0; font:inherit; font-size:10.5px; font-weight:800; color:#F5E7B8; background:rgba(255,253,246,.1); border:1px solid rgba(245,231,184,.35); border-radius:999px; padding:7px 16px; cursor:pointer;}
  /* "Test yourself" — its own section on the khatam screen (before the video) */
  .kquiz{margin:16px 14px 0;}
  .kquizcard{display:flex; align-items:center; gap:10px; width:100%; font:inherit; text-align:left; color:#EAF6EE; background:rgba(47,158,95,.16); border:1px solid rgba(47,158,95,.5); border-radius:13px; padding:11px 12px; cursor:pointer;}
  .kquizcard .kqnum{flex:none; width:30px; height:30px; border-radius:10px; background:linear-gradient(160deg,#35A96C,#1F7A47); color:#fff; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:800; box-shadow:0 2px 8px rgba(31,122,71,.45);}
  .kquizcard b{display:block; font-size:11.5px; font-weight:800;}
  .kquizcard small{display:block; font-weight:600; font-size:9px; color:#9FB2CC; margin-top:1px;}
  .kquizcard .kqstart{margin-left:auto; flex:none; font-size:10.5px; font-weight:800; color:#0E1520; background:#7ED9A2; border-radius:999px; padding:6px 12px;}
  .kquizcard.soon{opacity:.7; cursor:default;}
  .kquizcard.soon .kqstart{background:rgba(255,253,246,.2); color:#EAF6EE;}
  /* ==================== QUIZ (page 7) ==================== */
  .qz{background:var(--cream); color:var(--a-ink); display:flex; flex-direction:column; overflow:hidden;}
  /* hero band — brand green gradient with soft glows */
  .qzhero{position:relative; flex:none; padding:12px 14px 24px; color:#fff;
    background:radial-gradient(120% 90% at 85% -10%, rgba(126,217,162,.45) 0%, rgba(126,217,162,0) 55%), linear-gradient(135deg,#2F9E5F 0%,#25834F 55%,#1F7A47 100%);}
  .qzhero:after{content:"✦"; position:absolute; top:14px; right:52px; font-size:11px; color:rgba(255,255,255,.5);}
  .qztoprow{display:flex; align-items:center; gap:10px;}
  .qzback{flex:none; width:30px; height:30px; border-radius:50%; border:none; background:rgba(255,255,255,.16); color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center;}
  .qzht{min-width:0;}
  .qzht small{display:block; font-size:8px; letter-spacing:.16em; text-transform:uppercase; font-weight:800; color:#CFF2DC;}
  .qzht h4{margin:1px 0 0; font-size:16.5px; font-weight:800; color:#fff; line-height:1.1;}
  .qzatt{margin-left:auto; flex:none; font-size:9.5px; font-weight:800; color:#fff; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.3); border-radius:999px; padding:5px 11px;}
  .qzbarrow{display:flex; align-items:center; gap:9px; margin-top:11px;}
  .qzbarw{flex:1; height:6px; background:rgba(255,255,255,.22); border-radius:999px; overflow:hidden;}
  .qzbarw i{display:block; height:100%; width:0%; background:#fff; border-radius:999px; transition:width .35s ease;}
  .qzplab{flex:none; font-size:9.5px; font-weight:800; color:#EAF6EE;}
  /* the question card floats up over the hero */
  .qcard{position:relative; z-index:2; flex:1; display:flex; flex-direction:column; margin:-14px 12px 12px; background:#fff; border:1px solid var(--line); border-radius:18px; padding:14px 13px 12px; overflow:hidden; box-shadow:0 8px 22px rgba(60,50,20,.10);}
  .qflag{position:absolute; top:10px; right:10px; width:26px; height:26px; border-radius:8px; border:1px solid var(--line); background:var(--cream); color:#A79F8A; cursor:pointer; font-size:12px; line-height:1;}
  .qflag:hover{color:#B42318; border-color:#D98682;}
  .qq{font-size:13.5px; font-weight:800; color:var(--a-ink); line-height:1.4; padding-right:30px;}
  /* the hint lives right under the question, impossible to miss */
  .qhintbtn{align-self:flex-start; margin-top:8px; font:inherit; font-size:10.5px; font-weight:800; color:#8A6F35; background:#FCF8EC; border:1.5px dashed var(--gold-strong); border-radius:999px; padding:6px 13px; cursor:pointer;}
  .qhintbtn:hover{background:#F7EFD8;}
  .qopts{display:flex; flex-direction:column; gap:7px; margin-top:11px;}
  .qopt{font:inherit; font-size:11.5px; font-weight:600; color:var(--a-ink); text-align:left; background:var(--cream); border:1.5px solid var(--line); border-radius:12px; padding:10px 12px; cursor:pointer; display:flex; align-items:center; gap:9px; transition:border-color .12s ease, background .12s ease, transform .12s ease;}
  .qopt .qol{flex:none; width:21px; height:21px; border-radius:50%; border:1.5px solid var(--gold-strong); background:#fff; color:#8A6F35; font-size:9.5px; font-weight:800; display:flex; align-items:center; justify-content:center;}
  .qopt:hover{border-color:var(--qc-green); transform:translateY(-1px);}
  .qopt.lock{pointer-events:none;}
  .qopt.right{background:var(--green-tint); border-color:var(--qc-green); color:var(--qc-green-deep); animation:qpop .3s ease;}
  .qopt.right .qol{background:var(--qc-green); border-color:var(--qc-green); color:#fff;}
  .qopt.wrong{background:#FDECEA; border-color:#D98682; color:#B42318; animation:qshake .3s ease;}
  .qopt.wrong .qol{border-color:#D98682; color:#B42318;}
  .qopt.reveal{border-color:var(--qc-green); background:var(--green-tint); color:var(--qc-green-deep); animation:qglow 1.1s ease infinite;}
  .qopt.reveal .qol{background:var(--qc-green); border-color:var(--qc-green); color:#fff;}
  .qopt.dim2{opacity:.45;}
  @keyframes qshake{0%,100%{transform:translateX(0)} 25%{transform:translateX(-4px)} 75%{transform:translateX(4px)}}
  @keyframes qpop{0%{transform:scale(1)} 45%{transform:scale(1.03)} 100%{transform:scale(1)}}
  @keyframes qglow{0%,100%{box-shadow:0 0 0 0 rgba(47,158,95,.35)} 50%{box-shadow:0 0 0 5px rgba(47,158,95,.12)}}
  /* feedback strip + the unmissable Next button */
  .qfeed{margin-top:10px; font-size:11px; font-weight:800; border-radius:10px; padding:8px 11px; display:none;}
  .qfeed.ok{display:block; color:var(--qc-green-deep); background:var(--green-tint); border:1px solid var(--green-line);}
  .qfeed.no{display:block; color:#B42318; background:#FDECEA; border:1px solid #D98682;}
  .qnextbig{display:none; width:100%; margin-top:9px; font:inherit; font-size:12.5px; font-weight:800; color:#fff; background:linear-gradient(135deg,#2F9E5F,#1F7A47); border:none; border-radius:12px; padding:12px; cursor:pointer; box-shadow:0 4px 12px rgba(31,122,71,.28); animation:qrise .25s ease;}
  .qnextbig.show{display:block;}
  @keyframes qrise{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}
  /* hint sheet = the full page the answer comes from */
  .qz .sheet{max-height:84%; overflow-y:auto; scrollbar-width:none;}
  .qz .sheet::-webkit-scrollbar{display:none;}
  .qz .sheet .qhsub{font-size:10px; color:var(--a-soft); margin:2px 0 4px; line-height:1.45;}
  .qz .sheet .qhv{border:1px solid var(--line); border-radius:11px; padding:8px 11px; margin-top:7px; background:var(--cream);}
  .qz .sheet .qhv.cur{border-color:var(--gold-strong); background:#FCF8EC; box-shadow:0 0 0 1px var(--gold-strong);}
  .qz .sheet .qhv .qha{font-family:'qpc-hafs',serif; font-size:16px; direction:rtl; text-align:right; color:var(--a-ink); line-height:1.9;}
  .qz .sheet .qhv .qhe{font-size:10px; color:var(--a-soft); margin-top:3px; line-height:1.45;}
  .qreason{display:block; width:100%; font:inherit; font-size:11px; font-weight:600; text-align:left; color:var(--a-ink); background:var(--cream); border:1.5px solid var(--line); border-radius:10px; padding:9px 11px; margin-top:6px; cursor:pointer;}
  .qreason.sel{border-color:#B42318; background:#FDECEA; color:#B42318; font-weight:800;}
  /* results — celebratory */
  .qres{position:relative; z-index:2; flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; margin:-14px 12px 12px; background:#fff; border:1px solid var(--line); border-radius:18px; padding:16px; overflow:hidden; box-shadow:0 8px 22px rgba(60,50,20,.10);}
  .qres .qspark{position:absolute; font-size:13px; color:var(--gold-strong); animation:qtw 1.6s ease infinite;}
  @keyframes qtw{0%,100%{opacity:.25; transform:scale(.85)} 50%{opacity:1; transform:scale(1.15)}}
  .qres .qring{width:96px; height:96px; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; background:
    radial-gradient(closest-side, #fff 82%, transparent 83% 100%),
    conic-gradient(var(--qc-green) calc(var(--p,100)*1%), #E4EFE7 0);
    animation:qpop .5s ease;}
  .qres .qring b{font-size:23px; font-weight:800; color:var(--qc-green-deep);}
  .qres .qring small{font-size:8px; letter-spacing:.1em; font-weight:800; color:var(--a-soft);}
  .qres h4{margin:12px 0 0; font-size:15px; font-weight:800;}
  .qres p{margin:5px 0 0; font-size:10.5px; color:var(--a-soft); line-height:1.5;}
  .qres .qresrow{display:flex; gap:8px; margin-top:14px;}
  .qres .qagain{font:inherit; font-size:11px; font-weight:800; color:var(--qc-green-deep); background:var(--green-tint); border:1.5px solid var(--green-line); border-radius:999px; padding:9px 15px; cursor:pointer;}
  .qres .qdone2{font:inherit; font-size:11px; font-weight:800; color:#fff; background:var(--qc-green); border:none; border-radius:999px; padding:9px 15px; cursor:pointer;}
  /* the summary page's "understand what you read" box, embedded on the result */
  .qlearn{display:flex; gap:10px; align-items:center; width:100%; margin-top:13px; font:inherit; text-align:left; background:linear-gradient(135deg,#E9F7EF 0%,#FCF8EC 100%); border:1.5px solid var(--green-line); border-radius:13px; padding:9px 10px; cursor:pointer; transition:border-color .15s ease;}
  .qlearn:hover{border-color:var(--qc-green);}
  .qlearn .qlthumb{flex:none; width:72px; height:45px; border-radius:8px; overflow:hidden; box-shadow:0 2px 8px rgba(43,39,25,.18);}
  .qlearn .qlthumb svg{display:block; width:100%; height:100%;}
  .qlearn .qltxt{min-width:0;}
  .qlearn .qltxt small{display:block; font-size:7.5px; letter-spacing:.14em; text-transform:uppercase; font-weight:800; color:var(--gold);}
  .qlearn .qltxt b{display:block; font-size:11px; font-weight:800; color:var(--a-ink); margin-top:1px; line-height:1.25;}
  .qlearn .qlwatch{display:block; font-size:9.5px; font-weight:800; color:var(--qc-green-deep); margin-top:3px;}
  /* script-choice cards: a live Arabic sample above the name */
  .obmode.script{flex-direction:column; align-items:stretch; gap:7px; padding:10px 12px;}
  .obmode.script .obsample{display:block; text-align:center; direction:rtl; color:#2E2A20; background:var(--cream); border:1px solid var(--line); border-radius:8px; padding:7px 6px; overflow:hidden; white-space:nowrap; text-overflow:clip;}
  .obsample.s-uth{font-family:'qpc-hafs',serif; font-size:19px; line-height:1.9;}
  .obsample.s-indo{font-family:'indopak','qpc-hafs',serif; font-size:18px; line-height:2.5;}
  .obsample.s-turk{font-family:'turkish','qpc-hafs',serif; font-size:19px; line-height:1.95;}
  /* mushaf line-count chooser (IndoPak + full page) */
  .obmushafgrid{display:grid; grid-template-columns:1fr 1fr; gap:9px;}
  .obmushaf{border:1.5px solid var(--line); border-radius:11px; padding:9px; background:#fff; cursor:pointer; text-align:center; transition:border-color .15s ease, background .15s ease;}
  .obmushaf:hover{border-color:var(--qc-green); background:var(--green-tint);}
  .obmushaf .obmthumb{display:block; width:100%; height:64px; margin-bottom:6px;}
  .obmushaf .obmthumb svg{display:block; width:auto; height:64px; margin:0 auto;}
  .obmushaf b{font-size:11.5px; color:var(--a-ink);}

  /* ===== HOME — choose your reading mode (redesigned) ===== */
  .home{background:var(--cream); display:flex; flex-direction:column; padding:20px 16px 14px; overflow-y:auto; scrollbar-width:none;}
  .home > *{flex-shrink:0;}  /* the column scrolls — children must never be crushed (overflow:hidden items lose min-height:auto) */
  .home::-webkit-scrollbar{display:none;}
  .htop{display:flex; flex-direction:column; align-items:center; gap:11px; flex:none;}
  .hlogo svg{width:120px; height:auto; display:block;}
  .hsign{display:inline-flex; align-items:center; gap:7px; font-size:11px; font-weight:600; color:var(--a-soft); background:#FFFDF6; border:1px solid var(--line); border-radius:999px; padding:5px 12px 5px 6px;}
  .hprof{position:absolute; top:10px; right:12px; width:34px; height:34px; border-radius:50%; border:1.5px solid var(--green-line); background:var(--cream-card); display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:6; padding:0; font:inherit;}
  .hprof .hav{width:25px; height:25px; border-radius:50%; background:#2F9E5F; color:#fff; font-size:9.5px; font-weight:800; display:flex; align-items:center; justify-content:center;}
  .hprof .ptick{position:absolute; right:-2px; bottom:-2px; display:flex;}
  .hprof.out{border-style:dashed; border-color:#CFC5AA;}
  /* compact streak chip — top-left, mirroring the profile icon */
  .hstreakmini{position:absolute; top:10px; left:12px; z-index:6; display:inline-flex; align-items:center; gap:4px; background:var(--cream-card); border:1.5px solid var(--line); border-radius:999px; padding:6px 11px 6px 9px; font:inherit; font-size:11.5px; font-weight:800; color:var(--a-ink); cursor:pointer;}
  .hstreakmini svg{opacity:.55;}
  .hstreakmini.lit{background:var(--green-tint); border-color:var(--green-line); color:var(--qc-green-deep);}
  .hstreakmini.lit svg{opacity:1;}
  .hstreak.guest{background:#FDECEA; border-color:#D98682; color:#B42318;}
  /* compact daily-status tag in the Live Global title row */
  .hstag{margin-left:auto; flex:none; font:inherit; font-size:8.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; border-radius:6px; padding:2.5px 7px; border:1px solid; cursor:pointer; line-height:1.3;}
  .hstag.due{color:#8A5E17; background:#FCF3E2; border-color:#E2B65A;}
  .hstag.done{color:var(--qc-green-deep); background:var(--green-tint); border-color:var(--green-line);}
  /* Global Khatam: the "Today's reading" FLAG BOX — amber while incomplete, green once done —
     with the flip clock inside it (brand-green tiles, clear H/M/S labels) */
  .htoday{display:block; margin-top:10px; border-radius:12px; border:1.5px solid; padding:9px 10px 11px; cursor:pointer;}
  .htoday.due{background:#FCF3E2; border-color:#E2B65A;}
  .htoday.done{background:var(--green-tint); border-color:var(--green-line);}
  .htoday .thead{display:block; text-align:center; font-size:9px; letter-spacing:.13em; text-transform:uppercase; font-weight:800; margin-bottom:8px;}
  .htoday.due .thead{color:#8A5E17;}
  .htoday.done .thead{color:var(--qc-green-deep);}
  .hflip{display:flex; gap:9px; justify-content:center;}
  .hflip .fu{text-align:center;}
  .hflip .ftile{display:block; position:relative; background:linear-gradient(180deg,#35A96C 0%,#25834F 52%,#1F7A47 100%); color:#fff; font-weight:800; font-size:17px; line-height:1; font-variant-numeric:tabular-nums; letter-spacing:.5px; border-radius:7px; padding:9px 0 8px; min-width:46px; box-shadow:0 2px 6px rgba(31,122,71,.3), inset 0 1px 0 rgba(255,255,255,.22);}
  .hflip .ftile:after{content:""; position:absolute; left:0; right:0; top:50%; height:1.5px; background:rgba(0,0,0,.28);}
  .hflip .flab{display:block; margin-top:5px; font-size:7.5px; letter-spacing:.15em; text-transform:uppercase; color:#8A5E17; font-weight:800;}
  .htoday .tdone{display:flex; align-items:center; gap:8px; font-size:11.5px; font-weight:700; color:var(--qc-green-deep);}
  .htoday .tdone .hrm{margin-left:auto; flex:none; font:inherit; font-size:10.5px; font-weight:800; color:#fff; background:var(--qc-green); border:none; border-radius:999px; padding:6px 11px; cursor:pointer; white-space:nowrap;}
  .hstreak.guest b{color:#B42318;}
  .hsign .hav{width:20px; height:20px; border-radius:50%; background:var(--green-tint); color:var(--qc-green-deep); font-size:9.5px; font-weight:800; display:inline-flex; align-items:center; justify-content:center;}
  .hhead{text-align:center; margin:18px 0 14px; flex:none;}
  .hhead small{display:block; font-family:"qpc-hafs",serif; font-size:16px; color:var(--gold); margin-bottom:3px;}
  .hhead h3{margin:0; font-size:19px; color:var(--a-ink); letter-spacing:-.2px;}
  .hcard{display:flex; align-items:center; gap:13px; text-align:left; font:inherit; background:#FFFDF6; border:1.5px solid var(--line); border-radius:16px; padding:15px 13px; margin-bottom:12px; cursor:pointer; box-shadow:0 2px 10px rgba(90,80,50,.07); transition:border-color .15s ease, transform .15s ease; width:100%;}
  .hcard:hover{border-color:var(--gold-strong); transform:translateY(-1px);}
  .hmed{position:relative; width:52px; height:52px; flex:none; display:flex; align-items:center; justify-content:center; border-radius:50%; background:var(--cream); box-shadow:inset 0 0 0 1.5px var(--gold-strong), 0 0 0 3px #FFFDF6, 0 0 0 4px rgba(180,158,99,.35);}
  .hbody{flex:1; min-width:0;}
  .htitle{display:flex; align-items:center; gap:7px; font-size:14.5px; font-weight:800; color:var(--a-ink);}
  .hlive{display:inline-flex; align-items:center; gap:4px; font-size:8.5px; font-weight:800; letter-spacing:.1em; color:#fff; background:var(--red); border-radius:5px; padding:2.5px 6px;}
  .hlive i{width:5px; height:5px; border-radius:50%; background:#fff; animation:hlivepulse 1.6s ease infinite;}
  @keyframes hlivepulse{0%,100%{opacity:1;}50%{opacity:.25;}}
  .hdesc{display:block; font-size:11px; line-height:1.45; color:var(--a-soft); margin:3px 0 10px;}
  .hprog{display:flex; align-items:center; gap:9px;}
  .hbar{position:relative; flex:1; height:7px; border-radius:4px; background:var(--tab-bg);}
  .hbar i{position:absolute; left:0; top:0; bottom:0; border-radius:4px; min-width:7px; background:linear-gradient(90deg,#3FB271,var(--qc-green-deep));}
  .hbar em{position:absolute; top:-10px; margin-left:-8px; color:var(--qc-green-deep); font-style:normal;}
  .hbar em svg{display:block;}
  .hprog b{font-size:11px; font-variant-numeric:tabular-nums; color:var(--qc-green-deep); flex:none;}
  .hchev{flex:none; font-size:20px; color:var(--gold-strong); line-height:1;}
  /* daily status chip on the Live Global card */
  .hstatus{display:flex; align-items:center; gap:6px; margin-top:9px; font-size:10.5px; font-weight:600; border-radius:8px; padding:6px 9px; cursor:pointer;}
  .hstatus b{margin-left:auto; font-weight:800; white-space:nowrap;}
  .hstatus.due{background:#FCF3E2; border:1px solid #E2B65A; color:#8A5E17;}
  .hstatus.due b{color:var(--qc-green-deep);}
  .hstatus.done{background:var(--green-tint); border:1px solid var(--green-line); color:var(--qc-green-deep);}
  .hstatus.done b{color:var(--qc-green-deep);}
  .hstatus svg{flex:none;}
  /* live world ticker — prominent, constantly counting */
  /* the live ticker is PINNED to the bottom edge of the home screen */
  .hticker{margin:auto -16px -14px; position:sticky; bottom:-14px; z-index:5; flex:none; display:flex; align-items:center; flex-wrap:nowrap; gap:6px; background:var(--green-tint); border:1.5px solid var(--green-line); border-bottom:none; border-radius:13px 13px 0 0; padding:10px 10px; box-shadow:0 -6px 16px rgba(43,39,25,.08);}
  .hticker .htlabel{flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .hticker .htnum, .hticker .htdot, .hticker svg, .hticker .htmore{flex:none; white-space:nowrap;}
  .hticker{overflow:hidden;}
  .htmore{flex:none; font:inherit; font-size:10px; font-weight:800; letter-spacing:.03em; color:#fff; background:var(--qc-green); border:none; border-radius:999px; padding:5px 11px; cursor:pointer;}
  .htmore:active{transform:translateY(1px);}
  .htdot{width:7px; height:7px; border-radius:50%; background:var(--qc-green); animation:hlivepulse 1.6s ease infinite; flex:none;}
  .hticker svg{color:var(--qc-green); flex:none;}
  .htnum{font-size:17px; font-weight:800; color:var(--qc-green-deep); font-variant-numeric:tabular-nums; letter-spacing:-.2px;}
  .htnum.tick{animation:httick .5s ease;}
  @keyframes httick{30%{transform:translateY(-2px) scale(1.05); color:var(--qc-green);}}
  .htlabel{font-size:10px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:#5E8A6F;}
  .obfoot{display:flex; align-items:center; justify-content:space-between; margin-top:6px;}
  .obdots{display:flex; gap:5px;}
  .obdots i{width:6px; height:6px; border-radius:50%; background:#DDD6C4;}
  .obdots i.on{background:var(--qc-green);}
  .obbtns{display:flex; gap:8px; align-items:center;}
  .obskip{border:none; background:none; font:inherit; font-size:11.5px; color:var(--a-soft); cursor:pointer; padding:8px 6px;}
  .obnext{border:none; background:var(--qc-green); color:#fff; font:inherit; font-size:11.5px; font-weight:700; border-radius:8px; padding:9px 17px; cursor:pointer;}
  .obnext.wide{width:100%; padding:11px; margin-top:4px; font-size:12px;}
  .obcheck{width:46px; height:46px; border-radius:50%; background:var(--green-tint); display:flex; align-items:center; justify-content:center; margin:0 auto 10px;}
  /* non-dimming bottom hint (reading stays fully visible) */
  .obhint{position:absolute; left:14px; right:14px; bottom:62px; z-index:20; background:rgba(255,253,246,.97); border-radius:12px; padding:11px 36px 11px 13px; box-shadow:0 8px 26px rgba(0,0,0,.28); pointer-events:none;}
  .obhint b{display:block; font-size:12.5px; color:var(--a-ink); margin-top:1px;}
  .obhint span{display:block; font-size:11px; color:var(--a-soft); line-height:1.4; margin-top:1px;}
  .obhint .obskip{position:absolute; top:7px; right:7px; padding:4px 8px; pointer-events:auto;}

  /* guest login alert on the stats screen */
  .kguest{position:relative; z-index:5; background:linear-gradient(#C08A2C,#A2711E); color:#FFF8E7; font-size:10.5px; line-height:1.35; padding:8px 12px 8px 50px; display:flex; align-items:center; gap:8px; flex:none;}
  .kguest span{flex:1;}
  .kguest b{color:#fff;}
  .kguest button{flex:none; border:none; background:#FFF8E7; color:#8A5E17; font:inherit; font-size:10px; font-weight:800; border-radius:7px; padding:6px 11px; cursor:pointer;}

  /* global khatam screen (post-confirmation) — deliberate night-sky takeover */
  .kscreen{position:absolute; inset:0; z-index:30; background:linear-gradient(180deg,#0B1220 0%,#12203A 46%,#1A2C48 100%); color:#F2EDDD; display:flex; flex-direction:column; overflow-y:auto; scrollbar-width:none;}
  .kscreen::-webkit-scrollbar{display:none;}
  .ksky{position:relative; height:348px; flex:none; overflow:hidden;
    background-image: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.1px 1.1px at 88% 26%,rgba(255,250,230,.85) 50%,transparent 51%),radial-gradient(1px 1px at 20% 44%,rgba(255,250,230,.5) 50%,transparent 51%),radial-gradient(1.3px 1.3px at 66% 38%,rgba(255,250,230,.7) 50%,transparent 51%),radial-gradient(1px 1px at 44% 30%,rgba(255,250,230,.55) 50%,transparent 51%);}
  .kallah{position:absolute; top:16px; left:0; right:0; text-align:center; font-family:"qpc-hafs",serif; font-size:40px; line-height:1; color:#F5E7B8; text-shadow:0 0 18px rgba(245,222,150,.75), 0 0 44px rgba(245,222,150,.4); z-index:5;}
  .kback{position:absolute; top:12px; left:12px; z-index:6; border:none; background:rgba(255,253,246,.12); color:#F2EDDD; width:32px; height:32px; border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center; line-height:1; backdrop-filter:blur(4px); transition:background .2s ease;}
  .kback:hover{background:rgba(255,253,246,.22);}
  .kback svg{display:block;}
  .kglobe{position:absolute; left:50%; bottom:-84px; transform:translateX(-50%); filter:drop-shadow(0 0 22px rgba(120,190,255,.28)); z-index:1;}
  /* the app logo — the hub through which the khatams complete */
  .klogo{position:absolute; left:50%; top:112px; width:150px; z-index:3; transform:translateX(-50%); filter:drop-shadow(0 0 12px rgba(245,231,184,.4)); animation:klogopulse 5.4s ease-in-out infinite;}
  .klogo svg{display:block; width:100%; height:auto;}
  @keyframes klogopulse{0%,40%{transform:translateX(-50%) scale(1);}47%{transform:translateX(-50%) scale(1.06);}55%,100%{transform:translateX(-50%) scale(1);}}
  /* birds converging from the globe up into the logo */
  .kbird{position:absolute; width:26px; height:19px; left:50%; margin-left:-13px; top:116px; opacity:0; z-index:2;}
  .kbird svg{width:100%; height:100%; overflow:visible;}
  .kbird .kwL,.kbird .kwR{transform-box:view-box; transform-origin:50% 66%;}
  .kbird .kwL{animation:flapL .16s ease-in-out infinite alternate;}
  .kbird .kwR{animation:flapR .16s ease-in-out infinite alternate;}
  @keyframes conv1{0%{transform:translate(-54px,112px) scale(.55);opacity:0;}10%{opacity:.95;}44%{transform:translate(0,0) scale(1);opacity:.95;}50%{transform:translate(0,-4px) scale(.5);opacity:0;}100%{opacity:0;}}
  @keyframes conv2{0%{transform:translate(32px,124px) scale(.5);opacity:0;}12%{opacity:.9;}45%{transform:translate(0,0) scale(.92);opacity:.9;}51%{transform:translate(0,-4px) scale(.5);opacity:0;}100%{opacity:0;}}
  @keyframes conv3{0%{transform:translate(60px,102px) scale(.5);opacity:0;}14%{opacity:.85;}46%{transform:translate(0,0) scale(.86);opacity:.85;}52%{transform:translate(0,-4px) scale(.5);opacity:0;}100%{opacity:0;}}
  .kbird.b1{animation:conv1 5.4s ease-in infinite;}
  .kbird.b2{animation:conv2 5.4s ease-in infinite;}
  .kbird.b3{animation:conv3 5.4s ease-in infinite;}
  /* portal beneath the name of Allah — the icon passes through, then sparks confirm acceptance */
  .kportal{position:absolute; left:50%; top:64px; width:52px; height:11px; z-index:4; border-radius:50%; background:radial-gradient(ellipse at center,rgba(245,231,184,.95),rgba(245,231,184,.35) 55%,transparent 72%); transform:translateX(-50%); animation:kportalflare 5.4s ease-in-out infinite;}
  @keyframes kportalflare{0%,80%{opacity:.22;transform:translateX(-50%) scaleX(.7);}88%{opacity:1;transform:translateX(-50%) scaleX(1.35);}96%{opacity:.3;}100%{opacity:.22;transform:translateX(-50%) scaleX(.7);}}
  .kspark{position:absolute; left:50%; top:68px; width:0; height:0; z-index:5;}
  .kspark i{display:block; width:3px; height:3px; margin:-1.5px; border-radius:50%; background:#F7ECC4; box-shadow:0 0 5px 1px rgba(245,231,184,.9); animation:ksparkfly 5.4s ease-out infinite;}
  @keyframes ksparkfly{0%,85%{transform:translateX(0) scale(0);opacity:0;}89%{transform:translateX(7px) scale(1.1);opacity:1;}100%{transform:translateX(32px) scale(.2);opacity:0;}}
  /* single line of light from the app up to the portal */
  .kbeam{position:absolute; left:50%; margin-left:-1px; top:70px; width:2px; height:48px; z-index:2; transform-origin:bottom; background:linear-gradient(to top,rgba(245,231,184,0),rgba(245,231,184,.7)); opacity:0; animation:kbeamrise 5.4s ease-in-out infinite;}
  @keyframes kbeamrise{0%,50%{opacity:0;transform:scaleY(.15);}62%{opacity:.75;transform:scaleY(1);}84%{opacity:.4;}90%,100%{opacity:0;}}
  /* the uploaded Khatam Quran icon rises and disappears into the portal (never overlaps Allah) */
  .kriser{position:absolute; left:50%; margin-left:-20px; top:104px; width:40px; height:28px; opacity:0; z-index:4; filter:drop-shadow(0 0 9px rgba(245,220,130,.7)); animation:krise 5.4s ease-in infinite;}
  .kriser svg{display:block; width:100%; height:100%;}
  @keyframes krise{0%,50%{transform:translateY(0) scale(.85);opacity:0;}57%{opacity:1;}80%{transform:translateY(-38px) scale(1);opacity:1;}88%{transform:translateY(-44px) scale(.4);opacity:.5;}93%,100%{transform:translateY(-46px) scale(.05);opacity:0;}}
  /* the hero count, over the globe — bounces in as it lands */
  .kcount{position:absolute; left:0; right:0; top:180px; text-align:center; z-index:4; pointer-events:none;}
  .kcount b{display:block; font-size:54px; font-weight:800; line-height:.88; letter-spacing:-1px; color:#F7ECC4; font-variant-numeric:tabular-nums; text-shadow:0 2px 12px rgba(0,0,0,.6), 0 0 24px rgba(245,222,150,.55); transform-origin:center; animation:kcountpop .62s cubic-bezier(.34,1.56,.64,1) both;}
  @keyframes kcountpop{0%{transform:scale(.25); opacity:0;}55%{transform:scale(1.18); opacity:1;}100%{transform:scale(1); opacity:1;}}
  .kcount small{display:block; margin-top:3px; font-size:13px; font-weight:700; letter-spacing:.24em; text-transform:uppercase; color:#F2EDDD; text-shadow:0 1px 7px rgba(0,0,0,.7); opacity:0; animation:kcountlabel .4s ease .42s both;}
  @keyframes kcountlabel{from{opacity:0; transform:translateY(4px);}to{opacity:1; transform:translateY(0);}}
  .kcount .kcsub{display:inline-block; margin-top:9px; font-size:12px; font-weight:800; color:#FBEFC6; background:rgba(9,14,24,.62); border:1px solid rgba(245,231,184,.6); border-radius:999px; padding:5px 13px; font-variant-numeric:tabular-nums; text-shadow:0 1px 4px rgba(0,0,0,.75); backdrop-filter:blur(2px); opacity:0; animation:kcountlabel .4s ease .55s both;}
  .khead{text-align:center; padding:12px 18px 2px;}
  .khead b{display:block; font-size:13.5px; font-weight:600; color:#9FB2CC; text-wrap:balance;}
  .kstats{display:flex; gap:8px; padding:12px 14px 4px;}
  .kstats > div{flex:1; background:rgba(255,253,246,.07); border:1px solid rgba(255,253,246,.14); border-radius:10px; padding:9px 6px; text-align:center;}
  .kstats .kstatic{display:block; line-height:0; margin-bottom:5px;}
  .kstats .kstatic svg,.kstats .kstatic img{width:20px; height:20px;}
  .kstats b{display:block; font-size:14.5px; font-variant-numeric:tabular-nums; color:#F5E7B8;}
  .kstats small{display:block; margin-top:2px; font-size:8.5px; line-height:1.35; color:#9FB2CC; text-transform:uppercase; letter-spacing:.06em;}
  /* occasion cause — collective reading dedicated this window + donate */
  .kcause{margin:14px 14px 4px; padding:14px; border-radius:16px; background:linear-gradient(155deg,rgba(1,130,80,.24),rgba(11,18,32,.5)); border:1px solid rgba(245,231,184,.3); box-shadow:0 14px 34px -20px rgba(0,0,0,.7);}
  .kcausehd{display:flex; align-items:center; justify-content:space-between; margin-bottom:11px;}
  .kcausetag{font-size:9px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#FBEAB0;}
  .kcausewin{font-size:9px; font-weight:800; letter-spacing:.04em; color:#0B1220; background:#F5E7B8; border-radius:999px; padding:3px 9px;}
  .kcausetop{display:flex; gap:11px; align-items:flex-start; margin-bottom:12px;}
  .kcauseheart{flex:none; width:34px; height:34px; border-radius:9px; background:rgba(245,231,184,.14); display:flex; align-items:center; justify-content:center;}
  .kcausenm b{display:block; font-size:16px; font-weight:800; color:#fff; line-height:1.1;}
  .kcausenm small{display:block; font-size:11px; line-height:1.45; color:#B9C6DC; margin-top:3px;}
  .kcausestats{display:flex; gap:8px; margin-bottom:10px;}
  .kcausestats > div{flex:1; background:rgba(255,253,246,.06); border:1px solid rgba(255,253,246,.14); border-radius:11px; padding:10px 6px; text-align:center;}
  .kcausestats .kcsic{display:block; line-height:0; margin-bottom:5px;} .kcausestats .kcsic svg,.kcausestats .kcsic img{width:20px; height:20px;}
  .kcausestats b{display:block; font-size:16px; font-weight:800; font-variant-numeric:tabular-nums; color:#F5E7B8;}
  .kcausestats small{display:block; margin-top:2px; font-size:8.5px; line-height:1.35; color:#9FB2CC; text-transform:uppercase; letter-spacing:.05em;}
  .kcauseyou{text-align:center; font-size:11.5px; color:#CBD6E8; margin-bottom:12px;} .kcauseyou b{color:#7ED9A2;}
  .kcausegive{width:100%; display:flex; align-items:center; justify-content:center; gap:8px; background:#F5E7B8; color:#4A2E00; border:none; border-radius:12px; padding:13px; font:inherit; font-size:13.5px; font-weight:800; cursor:pointer; box-shadow:0 12px 26px -14px rgba(245,231,184,.8);}
  .kcausegive svg{stroke:#4A2E00 !important;}
  .kcausegive:hover{background:#FBEAB0;}
  /* today's leaderboard */
  .klead{padding:14px 14px 4px;}
  .klead .klabel{font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:#9FB2CC; font-weight:700; margin-bottom:8px;}
  .klrow{display:flex; align-items:center; gap:10px; padding:7px 11px; border-radius:9px; background:rgba(255,253,246,.05); margin-bottom:5px; font-size:11.5px;}
  .klrow.you{background:rgba(47,158,95,.2); border:1px solid rgba(76,184,120,.55);}
  .klrank{width:22px; text-align:center; font-weight:800; color:#9FB2CC; font-variant-numeric:tabular-nums; flex:none;}
  .klrow.r1 .klrank{color:#F5C542;} .klrow.r2 .klrank{color:#CFD6DE;} .klrow.r3 .klrank{color:#D9955A;}
  .klav{width:22px; height:22px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center; font-size:9.5px; font-weight:700; color:#0C2440; background:#8FB9D8;}
  .klrow.you .klav{background:#4CB878; color:#04140C;}
  .klflag{flex:none; font-size:14px; line-height:1; display:flex;}
  .klflag .flagsvg{width:18px; height:12px; border-radius:2px;}
  .klname{flex:1; color:#F2EDDD; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .klrow.you .klname{font-weight:700;}
  .klpages{color:#9FB2CC; font-variant-numeric:tabular-nums; flex:none;}
  .klrow.you .klpages{color:#BFF0D2;}
  .klsep{text-align:center; color:#54637A; font-size:13px; letter-spacing:3px; line-height:1; margin:3px 0 5px;}
  /* NEXT-UP video — the primary nudge: a glowing accent panel that outshines the muted cards */
  .kvideo{flex:none; margin:16px 14px 4px; padding:14px 14px 15px; border-radius:16px; position:relative; overflow:hidden;
    background:linear-gradient(135deg,rgba(47,158,95,.28),rgba(31,95,138,.2)); border:1px solid rgba(76,184,120,.5);
    animation:kvglow 3s ease-in-out infinite;}
  @keyframes kvglow{0%,100%{box-shadow:0 0 0 1px rgba(76,184,120,.14), 0 8px 26px rgba(0,0,0,.34);}50%{box-shadow:0 0 0 1px rgba(76,184,120,.45), 0 10px 34px rgba(47,158,95,.34);}}
  .kvhead{display:flex; align-items:center; gap:8px; margin-bottom:11px;}
  .kvbadge{background:#FF9E2E; color:#3A2400; font-size:9px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; border-radius:6px; padding:4px 9px; box-shadow:0 2px 8px rgba(255,158,46,.5);}
  .kvhead h5{margin:0; font-size:14.5px; font-weight:800; color:#F7ECC4; letter-spacing:.01em; text-wrap:balance;}
  .vcard{display:flex; gap:12px; align-items:center; background:rgba(4,12,22,.35); border:1px solid rgba(255,253,246,.16); border-radius:12px; padding:11px; text-decoration:none; color:inherit; transition:border-color .2s ease;}
  .vcard:hover{border-color:rgba(76,184,120,.6);}
  .vcard .vthumb{flex:none; width:108px; height:68px; border-radius:10px; overflow:hidden; display:block; box-shadow:0 4px 14px rgba(0,0,0,.4);}
  .vcard .vthumb svg,.vcard .vthumb img{display:block; width:100%; height:100%; object-fit:cover;}
  .vcard .vbody{flex:1; min-width:0;}
  .vcard b{display:block; font-size:11.5px; line-height:1.35;}
  .vcard small{display:block; margin-top:2px; font-size:9.5px; color:#B9C6D8;}
  .vwatch{margin-top:8px; display:inline-flex; align-items:center; gap:5px; background:var(--qc-green); color:#fff; font-size:10px; font-weight:800; letter-spacing:.04em; border-radius:7px; padding:6px 12px; box-shadow:0 3px 10px rgba(47,158,95,.4);}
  .vcard:hover .vwatch{background:var(--qc-green-deep);}
  /* a bigger variant sized for portrait video thumbnails — the clip on the left at its
     own aspect ratio (never cropped or stretched), title and meta beside it on the right */
  .vcard.vcard-big{align-items:stretch; gap:14px; padding:12px}
  .vthumbp{position:relative; flex:none; width:100px; aspect-ratio:214/322; border-radius:11px; overflow:hidden; background:#0B1220; box-shadow:0 4px 14px rgba(0,0,0,.4)}
  .vthumbp img{display:block; width:100%; height:100%; object-fit:cover}
  .vplaymini{
    position:absolute; bottom:7px; right:7px; width:28px; height:28px; border-radius:50%;
    background:rgba(6,14,10,.6); border:1.5px solid rgba(255,253,246,.5);
    color:#fff; display:flex; align-items:center; justify-content:center; font-size:12px;
  }
  .vbody2{flex:1; min-width:0; display:flex; flex-direction:column; justify-content:center}
  .vbody2 b{display:block; font-size:14.5px; color:#fff; line-height:1.35}
  .vbody2 small{display:block; margin-top:5px; font-size:11.5px; color:#B9C6D8}
  .kdone{margin:14px 14px 16px; border:none; background:var(--qc-green); color:#fff; font:inherit; font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; border-radius:9px; padding:12px; cursor:pointer; flex:none;}
  .kdonerow{display:flex; gap:10px; margin:14px 14px 16px; flex:none;}
  .kdonerow .kdone{margin:0; flex:1;}
  .kdone.kalt{background:none; border:1.5px solid rgba(255,253,246,.34); color:#EAF1FA;}
  /* walkthrough: read-then-gesture hint + highlight what to read */
  .obgest{position:absolute; z-index:38; pointer-events:none; left:50%; top:44%; color:#F5E7B8;}
  .obgest svg{width:34px; height:34px; filter:drop-shadow(0 2px 6px rgba(0,0,0,.55));}
  .obgest.scroll{animation:obg-scroll 1.5s ease-in-out infinite;}
  .obgest.swipe{animation:obg-swipe 1.6s ease-in-out infinite;}
  @keyframes obg-scroll{0%{transform:translate(-50%,14px);opacity:0} 25%{opacity:1} 100%{transform:translate(-50%,-42px);opacity:0}}
  @keyframes obg-swipe{0%{transform:translate(-46px,-50%);opacity:0} 25%{opacity:1} 100%{transform:translate(34px,-50%);opacity:0}}
  .obreadhi{animation:obreadpulse 1.5s ease-in-out infinite; border-radius:10px;}
  .obbtns{display:flex; align-items:center;}
  .obback{background:none; border:none; color:var(--ink-2); font:inherit; font-size:12px; font-weight:700; cursor:pointer; padding:8px 4px; margin-right:auto;}
  .obback:hover{color:var(--a-ink);}
  .hreplay{display:block; margin:-2px auto 10px; background:none; border:none; color:var(--qc-green); font:inherit; font-size:11.5px; font-weight:700; cursor:pointer; padding:2px 6px;}
  .hreplay:hover{text-decoration:underline;}
  .hhelp{position:absolute; top:10px; right:54px; width:34px; height:34px; border-radius:50%; border:1.5px solid var(--line); background:var(--cream-card); color:var(--a-soft); font-size:16px; font-weight:800; cursor:pointer; z-index:6; display:flex; align-items:center; justify-content:center; padding:0;}
  .hmenu{position:absolute; top:48px; right:12px; z-index:20; background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:0 12px 28px -10px rgba(60,45,10,.4); padding:5px; min-width:196px; display:none;}
  .hmenu.show{display:block;}
  .hmi{display:block; width:100%; text-align:left; font:inherit; font-size:12px; font-weight:600; color:var(--a-ink); background:none; border:none; border-radius:8px; padding:9px 11px; cursor:pointer;}
  .hmi:hover{background:#F5F0E3;}
  .set-hint{font-size:11.5px; color:var(--ink-2); margin:0 0 16px; line-height:1.5;}
  .laycard .notr{display:block; margin-top:7px; font-size:8.5px; font-weight:800; letter-spacing:.03em; color:#B42318; background:#FDECEA; border:1px solid #F1C4BE; border-radius:6px; padding:3px 5px;}
  .aothumb{display:flex; flex-direction:column; gap:3px; justify-content:center; align-items:center; padding:6px;}
  .aothumb i{height:2px; background:#C9BE9E; border-radius:2px;} .aothumb i:nth-child(1){width:78%} .aothumb i:nth-child(2){width:95%} .aothumb i:nth-child(3){width:66%}
  .sizeprev{background:var(--cream-card); border:1px solid var(--line); border-radius:10px; padding:9px 12px; margin:2px 0 8px; min-height:38px; display:flex; align-items:center; overflow:hidden;}
  .sizeprev .pv-ar{font-family:"qpc-hafs",serif; color:var(--a-ink); direction:rtl; line-height:1.7; white-space:nowrap;}
  .sizeprev .pv-en{color:var(--ink-2); line-height:1.4;}
  .transsel{width:100%; font:inherit; font-size:12.5px; font-weight:600; padding:10px 12px; border-radius:10px; border:1px solid var(--line); background:var(--cream-card); color:var(--a-ink); margin:2px 0 8px; cursor:pointer;}
  .sizeslider{-webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:999px; background:linear-gradient(90deg,var(--qc-green),#CFE9DA); outline:none; margin:2px 0 10px;}
  .sizeslider::-webkit-slider-thumb{-webkit-appearance:none; width:22px; height:22px; border-radius:50%; background:#fff; border:2px solid var(--qc-green); cursor:pointer; box-shadow:0 1px 4px rgba(0,0,0,.2);}
  .sizeslider::-moz-range-thumb{width:22px; height:22px; border-radius:50%; background:#fff; border:2px solid var(--qc-green); cursor:pointer;}
  @keyframes obreadpulse{0%,100%{box-shadow:0 0 0 0 rgba(76,184,120,0)} 50%{box-shadow:0 0 0 3px rgba(76,184,120,.6)}}
  /* quiz report — free-text box for "Other" */
  .qz .sheet .qother{display:none; width:100%; box-sizing:border-box; margin-top:8px; font:inherit; font-size:11px; color:var(--a-ink); background:#fff; border:1.5px solid var(--line); border-radius:10px; padding:9px 10px; min-height:54px; resize:none;}
  .qz .sheet .qother.show{display:block;}

  /* in-app video player (shorts style) */
  .vplayer{position:absolute; inset:0; z-index:60; background:#05070C; display:flex; flex-direction:column; align-items:center; padding:12px 14px; overflow-y:auto; scrollbar-width:none;}
  .vplayer::-webkit-scrollbar{display:none;}
  .vclose{align-self:flex-end; flex:none; border:none; background:rgba(255,255,255,.12); color:#F2EDDD; width:30px; height:30px; border-radius:50%; cursor:pointer; font-size:13px; line-height:1;}
  .vstage{position:relative; width:190px; flex:none; border-radius:14px; overflow:hidden; margin-top:6px; cursor:pointer; box-shadow:0 10px 40px rgba(0,0,0,.6);}
  .vstage svg{display:block; width:100%; height:auto;}
  .vstage .art{transition:transform 9s linear; transform-origin:50% 60%;}
  .vplayer.playing .vstage .art{transform:scale(1.14);}
  .vbigplay{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.28); transition:opacity .25s ease;}
  .vplayer.playing .vbigplay{opacity:0;}
  /* the real embedded player — same footprint as the old mock (9:16, matches a Short),
     the mounted div is swapped for YouTube's own <iframe> once its API finishes loading */
  .vstage.yt{aspect-ratio:9/16; cursor:default; background:#000;}
  .vstage.yt > div, .vstage.yt iframe{position:absolute; inset:0; width:100%; height:100%; border:0;}
  .vmeta2{margin-top:11px; text-align:center;}
  .vmeta2 b{font-size:11.5px; display:block; color:#F2EDDD; line-height:1.4;}
  .vmeta2 small{font-size:9.5px; color:#9FB2CC;}
  .vprogwrap{width:190px; flex:none; margin-top:9px; display:flex; align-items:center; gap:7px; font-size:9.5px; color:#9FB2CC; font-variant-numeric:tabular-nums;}
  .vprog{flex:1; height:3.5px; border-radius:2px; background:rgba(255,255,255,.16); overflow:hidden;}
  .vprog i{display:block; height:100%; width:0%; background:#E4372B; border-radius:2px; transition:width .5s linear;}
  .vyt{margin-top:11px; font-size:10.5px; color:#8FD4FF; text-decoration:none;}

  /* ===== BROWSE & NAVIGATE — the scholar's index ===== */
  .browse .bwrap{flex:1; overflow-y:auto; padding:13px 14px 16px; display:flex; flex-direction:column; gap:10px; scrollbar-width:none;}
  .browse .bwrap::-webkit-scrollbar{display:none;}
  /* quiet card — the solid green button is reserved for GO at the bottom */
  .contcard{display:flex; align-items:center; gap:11px; width:100%; background:var(--cream-card); color:var(--a-ink); border:1.5px solid var(--green-line); border-radius:14px; padding:10px 12px; cursor:pointer; text-align:left; font:inherit; flex:none; transition:border-color .15s ease;}
  .contcard:hover{border-color:var(--qc-green);}
  .contcard .cbook{width:38px; height:38px; flex:none; border-radius:50%; background:var(--green-tint); color:var(--qc-green-deep); box-shadow:inset 0 0 0 1.5px var(--green-line); display:flex; align-items:center; justify-content:center;}
  .contcard .ctxt{flex:1; min-width:0;}
  .contcard .ctxt em{display:block; font-style:normal; font-size:9px; letter-spacing:.14em; text-transform:uppercase; font-weight:800; color:var(--qc-green-deep); margin-bottom:2px;}
  .contcard .ctxt b{display:block; font-size:13px;}
  .contcard .ctxt small{display:block; font-size:10.5px; color:var(--a-soft); margin-top:1px;}
  .contcard .cchev{flex:none; font-size:18px; color:var(--gold-strong); line-height:1;}
  .ordiv{display:flex; align-items:center; gap:10px; color:var(--a-soft); font-size:9.5px; letter-spacing:.13em; text-transform:uppercase; font-weight:800; flex:none;}
  .ordiv:before,.ordiv:after{content:""; flex:1; border-top:1px solid var(--line);}
  .blabel{font-size:9.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--a-soft); font-weight:800; margin:1px 0 -3px; flex:none;}
  .freqrow{display:flex; flex-wrap:wrap; gap:7px; flex:none;}
  .fchip{display:inline-flex; align-items:center; gap:6px; font:inherit; font-size:11px; font-weight:700; color:var(--qc-green-deep); background:var(--cream-card); border:1.5px solid var(--green-line); border-radius:999px; padding:6px 12px; cursor:pointer; transition:border-color .15s ease, background .15s ease;}
  .fchip:hover{border-color:var(--qc-green); background:var(--green-tint);}
  .fchip svg{flex:none;}
  .fchip.bmk{border-color:var(--gold-strong); color:#8A6F35;}
  .fchip.add{border-style:dashed; border-color:#CFC5AA; color:var(--a-soft); font-weight:600;}
  .fchip.add:hover{border-color:var(--gold-strong); color:#8A6F35; background:#FCF8EC;}
  /* the tri-wheel picker */
  .pickcard{position:relative; background:var(--cream-card); border:1.5px solid var(--line); border-radius:14px; overflow:hidden; flex:none;}
  .pickhead{display:grid; grid-template-columns:60px 1fr 60px; border-bottom:1px solid var(--line); background:var(--cream);}
  .pickhead span{padding:8px 4px 7px; text-align:center; font-size:9.5px; letter-spacing:.13em; text-transform:uppercase; font-weight:800; color:var(--gold);}
  .pickwheels{position:relative; display:grid; grid-template-columns:60px 1fr 60px; height:210px;}
  .wheel{overflow-y:auto; scroll-snap-type:y mandatory; scroll-padding-top:42px; scrollbar-width:none; position:relative; z-index:2;}
  .wheel::-webkit-scrollbar{display:none;}
  .static .wheel{overflow:hidden;}
  .wpad{height:126px; flex:none;}
  .wpad.t{height:42px;}
  .witem{height:42px; scroll-snap-align:start; scroll-snap-stop:always; display:flex; flex-direction:column; align-items:center; justify-content:center; color:#B5AD97; font-variant-numeric:tabular-nums; text-align:center; padding:0 4px;}
  .witem b{display:block; font-size:12px; font-weight:700; color:inherit; line-height:1.2; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .witem small{display:block; font-size:8.5px; line-height:1.25; color:inherit; opacity:.8; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .witem .wnum{font-size:14px; font-weight:700;}
  .witem.on{color:var(--qc-green-deep);}
  .witem.on .wnum{font-size:16px; font-weight:800;}
  .selband{position:absolute; left:7px; right:7px; top:42px; height:42px; border:1.5px solid var(--gold-strong); border-radius:10px; background:rgba(233,245,236,.5); pointer-events:none; z-index:1;}
  .pickfade{position:absolute; left:0; right:0; height:56px; pointer-events:none; z-index:3;}
  .pickfade.top{top:0; height:28px; background:linear-gradient(var(--cream-card), rgba(255,253,246,0));}
  .pickfade.bot{bottom:0; background:linear-gradient(rgba(255,253,246,0), var(--cream-card));}
  .gobtn{width:100%; border:none; font:inherit; font-size:12.5px; font-weight:800; letter-spacing:.04em; color:#fff; background:var(--qc-green); border-radius:12px; padding:13px 12px; cursor:pointer; box-shadow:0 4px 14px rgba(31,122,71,.3); flex:none;}
  .gobtn b{font-weight:800;}
  .gobtn:active{transform:translateY(1px);}
  /* jumped-past verses — grey, not included, never count */
  .vrow.skipped{background:#F3EFE3;}
  .vrow.skipped .ar{color:#BCB49D;}
  .vrow.skipped .tr,.vrow.skipped .en{color:#C3BCA9;}
  .vrow.skipped .vbadge{background:#EBE5D3; color:#B5AD95; box-shadow:inset 0 0 0 1px rgba(138,123,87,.12);}
  .jumpmark{display:flex; align-items:center; gap:7px; padding:6px 12px; font-size:9.5px; letter-spacing:.11em; text-transform:uppercase; font-weight:800; color:var(--qc-green-deep); background:var(--green-tint); border-top:1.5px dashed var(--qc-green); border-bottom:1px solid var(--green-line);}
  .jumpmark i{font-style:normal; font-size:8px;}
  /* full-page jump: your reading in the normal mushaf ink; text before the entry point in grey */
  .mushaf .mgrey{color:#C0B79E;}
  .mushaf .mmain{color:inherit; font-weight:inherit;}
  .mpage.mgreyed .mushaf{color:#C0B79E;}
  .mpage.mgreyed .sband{opacity:.55;}
  /* the bookmark control lives with the wheels, inside the picker card */
  .pickfoot{display:flex; align-items:center; gap:9px; border-top:1px solid var(--line); background:var(--cream); padding:7px 10px;}
  .pickfoot .bmkbtn{display:inline-flex; align-items:center; gap:6px; font:inherit; font-size:11px; font-weight:700; color:#8A6F35; background:none; border:1.5px dashed var(--gold-strong); border-radius:999px; padding:5px 11px; cursor:pointer; white-space:nowrap; transition:background .15s ease;}
  .pickfoot .bmkbtn:hover{background:#FCF8EC;}
  .pickfoot .bmkbtn.saved{border-style:solid; background:#FCF8EC;}
  .pickfoot small{color:var(--a-soft); font-size:9.5px; line-height:1.35;}
  .pickhead span.primary{color:var(--qc-green-deep);}
  /* browse search — type or speak, Arabic or English */
  .bsearch{display:flex; align-items:center; gap:8px; background:var(--cream-card); border:1.5px solid var(--line); border-radius:12px; padding:7px 8px 7px 12px; flex:none; transition:border-color .15s ease;}
  .bsearch:focus-within{border-color:var(--qc-green);}
  .bsearch .sic{display:flex; color:var(--a-soft); flex:none;}
  .sinput{flex:1; min-width:0; border:none; outline:none; background:none; font:inherit; font-size:12.5px; color:var(--a-ink);}
  .sinput::placeholder{color:var(--a-soft);}
  .smic{flex:none; width:30px; height:30px; border-radius:50%; border:none; background:var(--qc-green); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer;}
  .smic.listening{background:#D9534F; animation:miclisten 1s ease-in-out infinite;}
  @keyframes miclisten{0%,100%{box-shadow:0 0 0 0 rgba(217,83,79,.45);} 50%{box-shadow:0 0 0 9px rgba(217,83,79,0);}}
  .sres{display:flex; flex-direction:column; gap:8px; flex:none;}
  .scount{font-size:10px; letter-spacing:.06em; color:var(--a-soft); font-weight:700; text-transform:uppercase; line-height:1.5;}
  .srescard{font:inherit; text-align:left; background:var(--cream-card); border:1.5px solid var(--line); border-radius:12px; padding:9px 11px; cursor:pointer; display:flex; flex-direction:column; gap:4px; transition:border-color .15s ease;}
  .srescard:hover{border-color:var(--qc-green);}
  .srescard .sar{font-family:"qpc-hafs",serif; font-size:15px; line-height:2; color:var(--a-ink); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
  .srescard .sen{font-size:11px; color:var(--a-soft); line-height:1.5; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
  .srescard .sref{display:flex; align-items:center; gap:6px; font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; font-weight:800; color:var(--gold);}
  .srescard .sref i{font-style:normal; margin-left:auto; color:var(--gold-strong); font-size:13px;}
  .shl{background:var(--green-tint); color:var(--qc-green-deep); border-radius:3px; padding:0 2px;}
  /* full-screen search overlay (opened from the Home search bar or the Browse header icon) */
  .searchover{position:absolute; inset:0; z-index:70; background:var(--cream); display:flex; flex-direction:column;}
  .searchover .swrap{flex:1; overflow-y:auto; padding:12px 14px 16px; display:flex; flex-direction:column; gap:10px; scrollbar-width:none;}
  .searchover .swrap::-webkit-scrollbar{display:none;}
  /* home-menu search bar — above the Personal Khatam card */
  .hsearchbar{display:flex; align-items:center; gap:9px; width:100%; background:var(--cream-card); border:1.5px solid var(--line); border-radius:12px; padding:8px 8px 8px 12px; font:inherit; font-size:12px; color:var(--a-soft); cursor:pointer; text-align:left; margin:2px 0 8px; transition:border-color .15s ease;}
  .hsearchbar:hover{border-color:var(--qc-green);}
  .hsearchbar .sic{display:flex; color:var(--a-soft); flex:none;}
  .hsearchbar .hsmic{margin-left:auto; width:27px; height:27px; border-radius:50%; background:var(--qc-green); color:#fff; display:flex; align-items:center; justify-content:center; flex:none;}
  /* the "switches to Browse" note inside the search screen */
  .snote{font-size:10.5px; color:#B42318; background:#FDECEA; border:1px solid #E4A79F; border-radius:9px; padding:7px 10px; line-height:1.5; flex:none;}
  .submitask{position:absolute; left:14px; right:14px; bottom:24px; background:#fff; border:1px solid #E8E4D8; border-radius:16px; padding:15px 15px 13px; box-shadow:0 12px 30px -10px rgba(60,45,10,.5); z-index:61;}
  .submitask b{font-size:13.5px; color:var(--a-ink);}
  .submitask p{font-size:11.5px; color:var(--ink-2); line-height:1.5; margin:6px 0 0;}
  .submitask .saibtns{display:flex; gap:8px; margin-top:12px;}
  .submitask .saibtns button{flex:1; font:inherit; font-size:11.5px; font-weight:800; padding:10px 6px; border-radius:10px; cursor:pointer; border:none;}
  .submitask .sasub{background:var(--qc-green); color:#fff;}
  .submitask .saskip{background:#F1ECDD; color:#6E6857;}
  .submitask .sacancel{display:block; margin:9px auto 0; background:none; border:none; color:var(--a-soft); font:inherit; font-size:11px; font-weight:700; cursor:pointer;}
  /* reading streak pill (home) */
  .hstreak{display:inline-flex; align-items:center; gap:6px; font-size:10.5px; font-weight:600; color:var(--a-soft); background:#FFFDF6; border:1px solid var(--line); border-radius:999px; padding:4px 11px; margin-top:7px;}
  .hstreak b{color:var(--a-ink); font-weight:800;}
  .hstreak svg{opacity:.5;}
  .hstreak.lit{background:var(--green-tint); border-color:var(--green-line); color:var(--qc-green-deep);}
  .hstreak.lit b{color:var(--qc-green-deep);}
  .hstreak.lit svg{opacity:1;}
  /* + / move-bookmark actions on the Personal Khatam card */
  .hcard{position:relative;}
  .hacts{position:absolute; top:9px; right:34px; display:flex; gap:6px; z-index:2;}
  .hactbtn{width:24px; height:24px; border-radius:50%; border:1.5px solid var(--green-line); background:var(--cream-card); color:var(--qc-green-deep); display:flex; align-items:center; justify-content:center; font:inherit; font-size:13px; font-weight:800; line-height:1; cursor:pointer; padding:0;}
  .hactbtn:hover{border-color:var(--qc-green); background:var(--green-tint);}
  /* labelled action pills at the bottom of the Personal Khatam card */
  .hbtnrow{display:flex; gap:7px; margin-top:9px;}
  .hpill{flex:1; display:inline-flex; align-items:center; justify-content:center; gap:5px; font:inherit; font-size:10.5px; font-weight:800; color:var(--qc-green-deep); background:var(--green-tint); border:1.5px solid var(--green-line); border-radius:9px; padding:7px 6px; cursor:pointer; white-space:nowrap;}
  .hpill:hover{border-color:var(--qc-green);}
  .hpill b{font-size:13.5px; line-height:1; font-weight:800;}
  /* seasonal khatam cards (Ramadan · Dhul Hijjah) */
  .hupcoming{display:inline-flex; align-items:center; font-size:8.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#5B5FA8; background:#EEEFFA; border:1px solid #C9CBEE; border-radius:6px; padding:2px 6px;}
  .hwhen{display:inline-flex; align-items:center; gap:6px; margin-top:9px; font-size:10.5px; font-weight:700; color:var(--a-soft); background:var(--cream); border:1px dashed #CFC5AA; border-radius:999px; padding:5px 11px;}
  /* seasonal khatam cards — the Figma themed backgrounds on the STANDARD card anatomy */
  .hcard.season{position:relative; overflow:hidden; border:none; color:#fff;}
  .hcard.season .hmed{background:rgba(255,255,255,.14); box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.5); z-index:2;}
  .hcard.season .hbody{z-index:2;}
  .hcard.season .htitle{color:#fff; text-transform:uppercase; letter-spacing:.045em; font-size:13.5px;}
  .hcard.season .hdesc{color:rgba(255,255,255,.93);}
  .hcard.season .hprog b{color:#fff;}
  .hcard.season .hbar{background:rgba(255,255,255,.32);}
  .hcard.season .hbar i{background:#fff;}
  .hcard.season .hbar em{color:#fff;}
  .audprog{margin-top:10px;}
  .audprog .hbar i{background:linear-gradient(90deg,#3f8ed6,#005eb2);}
  .audprog b{color:#005eb2;}
  .audprog .hbar em{color:#005eb2;}
  .hcard.season .hchev{color:rgba(255,255,255,.85); z-index:2;}
  .sorn{position:absolute; top:0; right:10px; z-index:1; line-height:0;}
  .sorn.sdunes{inset:auto 0 0 0; right:0;}
  .hcard.ramadan{background:linear-gradient(165deg,#2C2160 0%,#1E1548 55%,#171038 100%);
    background-image:radial-gradient(1.2px 1.2px at 16% 30%,rgba(245,200,107,.85) 50%,transparent 51%),radial-gradient(1px 1px at 38% 14%,rgba(245,200,107,.6) 50%,transparent 51%),radial-gradient(1.3px 1.3px at 58% 66%,rgba(245,200,107,.7) 50%,transparent 51%),radial-gradient(1px 1px at 80% 44%,rgba(245,200,107,.55) 50%,transparent 51%),radial-gradient(1.1px 1.1px at 28% 78%,rgba(245,200,107,.65) 50%,transparent 51%),linear-gradient(165deg,#2C2160 0%,#1E1548 55%,#171038 100%);}
  .hcard.hajj{background:linear-gradient(160deg,#F2A93B 0%,#DE8628 52%,#C4681A 100%);}
  /* ===== GLOBAL STATS (page 6) — night-sky style, same family as the khatam screen ===== */
  .statsover{position:absolute; inset:0; z-index:65; display:flex;}
  .statsover .screen{flex:1; border-radius:0;}
  .gstats{background:linear-gradient(180deg,#0B1220 0%,#12203A 46%,#1A2C48 100%); color:#F2EDDD; overflow-y:auto; scrollbar-width:none;}
  .gstats::-webkit-scrollbar{display:none;}
  .gsnav{position:absolute; top:12px; z-index:8; border:none; background:rgba(255,253,246,.12); color:#F2EDDD; width:32px; height:32px; border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center; line-height:1; backdrop-filter:blur(4px);}
  .gsnav.l{left:12px;} .gsnav.r{right:12px;}
  .gssky{position:relative; height:348px; flex:none; overflow:hidden;
    background-image: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.1px 1.1px at 88% 26%,rgba(255,250,230,.85) 50%,transparent 51%),radial-gradient(1px 1px at 20% 44%,rgba(255,250,230,.5) 50%,transparent 51%),radial-gradient(1.3px 1.3px at 66% 38%,rgba(255,250,230,.7) 50%,transparent 51%),radial-gradient(1px 1px at 44% 30%,rgba(255,250,230,.55) 50%,transparent 51%);}
  .gsearth{position:absolute; left:50%; bottom:-96px; transform:translateX(-50%) scale(.82); filter:drop-shadow(0 0 22px rgba(120,190,255,.28)); z-index:1;}
  .gsh2{position:absolute; left:0; right:0; top:172px; text-align:center; z-index:4; pointer-events:none;}
  /* the scope toggle owns the top edge here — drop the name of Allah below it */
  /* name of Allah keeps its natural top position — the toggle no longer sits at the top */
  .gsh2 .ghn{display:block; font-size:36px; font-weight:800; line-height:.95; letter-spacing:-.5px; color:#F7ECC4; font-variant-numeric:tabular-nums; text-shadow:0 2px 12px rgba(0,0,0,.6), 0 0 24px rgba(245,222,150,.55);}
  .gsh2 .ghl{display:block; margin-top:6px; font-size:9.5px; letter-spacing:.22em; text-transform:uppercase; font-weight:800; color:#F1D888; text-shadow:0 1px 6px rgba(0,0,0,.85);}
  .gsh2 .ghs{display:block; margin-top:5px; font-size:10.5px; font-weight:600; color:#EAF1FA; text-shadow:0 1px 6px rgba(0,0,0,.9), 0 0 14px rgba(0,0,0,.7);}
  .gsh2 .ghs .htdot{margin-right:5px; vertical-align:1px;}
  .gsbody{padding:14px 14px 18px; display:flex; flex-direction:column; gap:12px;}
  .gsseg{display:grid; grid-template-columns:repeat(4,1fr); gap:4px; background:rgba(255,253,246,.07); border:1px solid rgba(255,253,246,.16); border-radius:12px; padding:4px; flex:none;}
  .gsseg button{font:inherit; font-size:10px; font-weight:800; letter-spacing:.02em; color:#9FB2CC; background:none; border:none; border-radius:9px; padding:7px 2px; cursor:pointer;}
  .gsseg button.on{background:#2F9E5F; color:#fff;}
  /* Global ⇄ Personal scope toggle, floating top-centre like the nav buttons */
  .gscope{align-self:center; margin:0 auto 2px; display:flex; gap:3px; background:rgba(255,253,246,.14); border:1px solid rgba(255,253,246,.24); border-radius:999px; padding:3px; backdrop-filter:blur(4px);}
  .gscope button{font:inherit; font-size:10px; font-weight:800; letter-spacing:.03em; color:#CBD6E6; background:none; border:none; border-radius:999px; padding:5px 12px; cursor:pointer;}
  .gscope button.on{background:#2F9E5F; color:#fff;}
  .gsmic img.bic{width:24px; height:24px; object-fit:contain; display:block;}
  .gschapter .gchero img.bic{width:100% !important; height:100% !important; object-fit:contain;}
  /* profile avatar shows the LEVEL number instead of a tick */
  .hprof .plvl{position:absolute; right:-5px; bottom:-5px; background:linear-gradient(180deg,#F5E7B8,#C9AE68); color:#4A3B12; font-size:8px; font-weight:800; border-radius:999px; min-width:15px; text-align:center; padding:1px 3px; line-height:1.35; border:1.5px solid var(--cream); box-shadow:0 1px 3px rgba(0,0,0,.25);}
  /* bold streak on the submission screen */
  .kstreak{align-self:center; display:inline-flex; align-items:center; gap:9px; margin:2px auto 8px; background:rgba(255,158,46,.14); border:1px solid rgba(255,158,46,.5); border-radius:999px; padding:8px 16px;}
  .kstreak b{font-size:21px; font-weight:800; color:#FFD79A; line-height:1; font-variant-numeric:tabular-nums;}
  .kstreak small{font-size:10px; font-weight:700; color:#F0DCBE; letter-spacing:.02em;}
  /* + on the sunnah-habits label */
  .gslabel .habadd{float:right; width:19px; height:19px; border-radius:50%; background:var(--qc-green); color:#fff; font-weight:800; font-size:14px; line-height:17px; text-align:center; cursor:pointer; margin-top:-2px;}
  /* ===== full-page long-press → mark read ===== */
  .mrscreen{background:#FBF6EA; display:flex; flex-direction:column;}
  .mrpage{position:relative; flex:1; overflow-y:auto; padding:14px 15px 10px;}
  .mrv{position:relative; display:flex; flex-direction:row-reverse; align-items:flex-start; gap:9px; padding:9px 10px; border-radius:12px; margin-bottom:3px; cursor:pointer; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; transition:background .25s, box-shadow .18s;}
  .mrv .mra{flex:1; font-family:qpc-hafs,'Amiri',serif; font-size:23px; line-height:2.05; color:#2A2417; text-align:justify; direction:rtl;}
  .mrv .mrend{flex:none; min-width:25px; height:25px; margin-top:7px; border-radius:50%; border:1.4px solid #C9AE68; color:#8A6D2A; font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; font-family:qpc-hafs,serif;}
  .mrv.sel{background:#FBEBCB; box-shadow:0 0 0 2px #E9C46A inset;}
  .mrv.read{background:rgba(1,178,112,.13);}
  .mrv.read .mrend{border-color:#01b270; color:#01922f; background:rgba(1,178,112,.1);}
  .mrv.read .mra{color:#14532D;}
  .mrbar{position:absolute; left:50%; transform:translateX(-50%) scale(.92); z-index:20; display:flex; gap:1px; background:#FBF3E0; border:1px solid #EAD9AE; border-radius:16px; padding:7px 5px; box-shadow:0 14px 32px -12px rgba(60,45,10,.55); opacity:0; pointer-events:none; transition:opacity .15s, transform .15s;}
  .mrbar.show{opacity:1; pointer-events:auto; transform:translateX(-50%) scale(1);}
  .mrbar .mract{background:none; border:none; cursor:pointer; font:inherit; display:flex; flex-direction:column; align-items:center; gap:3px; padding:5px 9px; border-radius:10px; color:#6B5A2E;}
  .mrbar .mract:hover{background:rgba(201,174,104,.18);}
  .mrbar .mract svg{width:21px; height:21px;}
  .mrbar .mract b{font-size:9.5px; font-weight:700;}
  .mrbar .mract.off{opacity:.32; cursor:default;} .mrbar .mract.off:hover{background:none;}
  .mrbar .mract.read b{color:inherit;}
  .mrbar .mract.read .mrbird{display:block; width:28px; height:20px;} .mrbar .mract.read .mrbird svg{width:28px; height:20px;}
  .mrbar:after{content:''; position:absolute; bottom:-7px; left:50%; transform:translateX(-50%) rotate(45deg); width:12px; height:12px; background:#FBF3E0; border-right:1px solid #EAD9AE; border-bottom:1px solid #EAD9AE;}
  .mrbar.below:after{bottom:auto; top:-7px; transform:translateX(-50%) rotate(225deg);}
  .mrfoot{flex:none; padding:11px 16px; border-top:1px solid #ECE2C8; background:#FBF6EA; font-size:12px; color:#6E5F3C; text-align:center; font-weight:600;}
  .mrfoot b{color:#01922f;}
  .mrmode{display:flex; margin:10px 15px 2px; background:#EFE6D2; border:1px solid #E1D5B6; border-radius:10px; padding:3px;}
  .mrmode button{flex:1; font:inherit; font-size:11px; font-weight:700; padding:7px; border:none; background:none; color:#8A784E; border-radius:8px; cursor:pointer;}
  .mrmode button.on{background:#FFFDF6; color:#3A2E12; box-shadow:0 1px 3px rgba(60,45,10,.15);}
  .mrpage.vbv .mrv{flex-direction:row; align-items:flex-start; gap:10px;}
  .mrv .mrnum{flex:none; width:22px; height:22px; margin-top:3px; border-radius:50%; border:1.4px solid #C9AE68; color:#8A6D2A; font-size:10px; font-weight:700; display:flex; align-items:center; justify-content:center; font-family:qpc-hafs,serif;}
  .mrv .mravbv{flex:1; font-family:qpc-hafs,'Amiri',serif; font-size:19px; line-height:1.95; color:#2A2417; text-align:right; direction:rtl;}
  .mrv .mrenvbv{flex:1; font-size:11.5px; line-height:1.5; color:#5A4E33;}
  .mrpage.vbv .mrv.read{background:transparent;}
  /* full-page mode reuses the mushaf look; verses are inline spans */
  .mrmush{direction:rtl; text-align:justify; text-align-last:center; font-family:"qpc-hafs",serif; font-size:20px; line-height:2.55; color:#2E2A20; word-spacing:1px; padding:6px 2px 2px;}
  .mrmush .mvv{cursor:pointer; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; border-radius:9px; padding:3px 4px; -webkit-box-decoration-break:clone; box-decoration-break:clone; transition:background .2s;}
  .mrmush .mvv.read{background:rgba(1,178,112,.15); color:#14532D;}
  .mrmush .mvv.sel{background:#FBEBCB; box-shadow:0 0 0 2px #E9C46A;}
  .mvend{font-family:"qpc-hafs",serif; font-size:15px; color:#8A6D2A; padding:0 2px;}
  .mrpfoot{margin-top:14px; text-align:center; font-size:11px; color:#A99B7A; border-top:1px solid #ECE2C8; padding-top:8px; direction:ltr;}
  /* verse-by-verse: the real side-by-side row; selecting boxes the Arabic (adapts to multi-line) */
  .mrpage .vrow{cursor:pointer; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none;}
  .mrpage .vrow.sel{background:#FBEBCB; box-shadow:0 0 0 2px #E9C46A inset; border-radius:10px;}
  /* sunnah habits — bigger icons + progress bars (clearer, less busy) */
  .habrow2{display:flex; align-items:center; gap:12px;}
  .habic{flex:none; width:44px; height:44px; border-radius:13px; background:rgba(245,231,184,.13); display:flex; align-items:center; justify-content:center;}
  .habic svg{width:24px; height:24px; stroke:#F5E7B8; fill:none;}
  .habinfo{flex:1; min-width:0;}
  .habtop{display:flex; align-items:baseline; gap:8px;}
  .habtop b{font-size:13px; color:#F2EDDD; font-weight:800;}
  .habtop em{margin-left:auto; font-style:normal; font-size:13px; font-weight:800; color:#F5E7B8; font-variant-numeric:tabular-nums; white-space:nowrap;}
  .habinfo > small{display:block; font-size:9.5px; color:#9FB2CC; margin:1px 0 8px;}
  .habbar{height:9px; border-radius:999px; background:rgba(255,253,246,.13); overflow:hidden;}
  .habbar i{display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,#2F9E5F,#4CB878);}
  .mrtoast{position:absolute; left:50%; bottom:72px; transform:translateX(-50%); background:#241B0C; color:#FBEFD2; font-size:12px; font-weight:600; padding:9px 15px; border-radius:999px; opacity:0; transition:opacity .2s; z-index:40; max-width:82%; text-align:center; pointer-events:none;}
  .mrtoast.show{opacity:.97;}
  .mrshare{position:absolute; inset:0; z-index:50; background:rgba(20,14,4,.42); display:flex; align-items:flex-end; opacity:0; pointer-events:none; transition:opacity .2s;}
  .mrshare.show{opacity:1; pointer-events:auto;}
  .mrshare .mscard{background:#FFFDF6; width:100%; border-radius:20px 20px 0 0; padding:16px 17px 20px; transform:translateY(24px); transition:transform .22s;}
  .mrshare.show .mscard{transform:none;}
  .mrshare h4{margin:0; font-size:14px; color:#2A2417;}
  .mrshare .msar{font-family:qpc-hafs,serif; font-size:20px; text-align:right; color:#2A2417; margin:9px 0 4px; line-height:1.95;}
  .mrshare .msen{font-size:12.5px; color:#5A4E33; line-height:1.5;}
  .mrshare .msref{font-size:11px; color:#8A784E; margin-top:9px; font-weight:700;}
  .mrshare .msbtns{display:flex; gap:8px; margin-top:15px;}
  .mrshare .msbtns button{flex:1; font:inherit; font-weight:700; font-size:12.5px; padding:11px; border-radius:12px; cursor:pointer; border:1px solid #DFD3AE; background:#F3EAD0; color:#4A3B12;}
  .mrshare .msbtns .prim{background:#01b270; color:#fff; border-color:#01b270;}
  /* metric tiles double as leaderboard FILTERS */
  .gstile{font-family:inherit; color:inherit; -webkit-appearance:none; cursor:pointer; text-align:left; width:100%; transition:border-color .12s ease, background .12s ease, transform .1s ease;}
  .gstile.flt.on{border-color:#4CB878; background:rgba(47,158,95,.2); box-shadow:0 0 0 1px rgba(76,184,120,.5) inset;}
  .gstile.flt:active{transform:scale(.98);}
  .gsflab{display:flex; align-items:center; gap:6px; font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:#9FB2CC; font-weight:800; margin:2px 2px -4px;}
  .gsflab .ii{color:#7E93B2; display:inline-flex; cursor:pointer;}
  /* leaderboard dimension toggle */
  .gsdim{display:flex; gap:3px; background:rgba(255,253,246,.07); border:1px solid rgba(255,253,246,.16); border-radius:11px; padding:3px; margin-top:2px;}
  .gsdim button{flex:1; font:inherit; font-size:10px; font-weight:800; letter-spacing:.02em; color:#9FB2CC; background:none; border:none; border-radius:8px; padding:7px 2px; cursor:pointer;}
  .gsdim button.on{background:#2F9E5F; color:#fff;}
  /* interesting facts — a scroll-through STORY: each fact is a full-width chapter,
     strung on a connecting timeline line, each with its own themed hero background */
  .gsstory{position:relative; padding-left:20px;}
  .gsstory:before{content:""; position:absolute; left:6px; top:14px; bottom:14px; width:2px; background:linear-gradient(180deg,rgba(245,231,184,.55),rgba(245,231,184,.06));}
  .gschapter{position:relative; min-height:130px; border-radius:16px; overflow:hidden; padding:16px 16px 15px; margin-bottom:12px; border:1px solid rgba(255,253,246,.15); display:flex; flex-direction:column; justify-content:center; box-shadow:0 6px 18px rgba(5,9,18,.35);}
  .gschapter .gcdot{position:absolute; left:-17.5px; top:24px; width:12px; height:12px; border-radius:50%; background:#F5E7B8; box-shadow:0 0 0 3px rgba(11,18,32,.92), 0 0 10px rgba(245,231,184,.6);}
  .gschapter .gchero{position:absolute; right:-8px; bottom:-14px; width:124px; height:124px; opacity:.17; pointer-events:none;}
  .gschapter .gchero svg{width:100% !important; height:100% !important;}
  .gschapter .gckicker{font-size:8px; letter-spacing:.2em; text-transform:uppercase; font-weight:800; color:rgba(255,253,246,.65); position:relative; z-index:2;}
  .gschapter .gcv{font-size:30px; font-weight:800; color:#FBEFC6; line-height:1.02; letter-spacing:-.5px; margin-top:6px; text-shadow:0 2px 12px rgba(0,0,0,.45); position:relative; z-index:2; max-width:80%;}
  .gschapter .gcl{font-size:10.5px; letter-spacing:.03em; font-weight:700; color:#EAF1FA; margin-top:6px; position:relative; z-index:2; max-width:82%;}
  .gschapter .gci{position:absolute; top:11px; right:11px; color:rgba(255,253,246,.7); cursor:pointer; display:inline-flex; z-index:3;}
  /* personal scope: the SAME dark universe — the sky swaps to the reader illustration,
     the body to the reader's own numbers (My Stats v2.0, folded in from the companion demo) */
  .gstats.pers .gssky, .gstats.pers .gsbody{display:none;}
  .pssky{display:none; position:relative; height:352px; flex:none; overflow:hidden;
    background-image: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.1px 1.1px at 88% 26%,rgba(255,250,230,.85) 50%,transparent 51%),radial-gradient(1px 1px at 20% 44%,rgba(255,250,230,.5) 50%,transparent 51%),radial-gradient(1.3px 1.3px at 66% 38%,rgba(255,250,230,.7) 50%,transparent 51%),radial-gradient(1px 1px at 44% 30%,rgba(255,250,230,.55) 50%,transparent 51%);}
  .gstats.pers .pssky{display:block; height:382px;}
  .psbody{display:none; padding:14px 14px 18px; flex-direction:column; gap:12px;}
  .psbody > *{flex-shrink:0;}
  .gstats.pers .psbody{display:flex;}
  .psillo{position:absolute; left:0; right:0; top:44px; z-index:2;}
  .psscope{position:absolute; top:12px; left:50%; transform:translateX(-50%); z-index:6; margin:0;}
  .psillo .psphoto{display:block; width:100%; height:auto;}
  .psillo svg{display:block; width:100%; height:auto;}
  .psh{position:absolute; left:0; right:0; bottom:10px; padding-top:22px; text-align:center; z-index:4; pointer-events:none; background:linear-gradient(180deg,rgba(11,18,32,0) 0%,rgba(11,18,32,.55) 55%,rgba(11,18,32,.8) 100%);}
  .psh .ghn2{display:inline-flex; align-items:center; gap:8px; font-size:44px; font-weight:800; line-height:.95; letter-spacing:-.5px; color:#F7ECC4; font-variant-numeric:tabular-nums; text-shadow:0 2px 12px rgba(0,0,0,.6), 0 0 24px rgba(245,222,150,.55);}
  .psh .ghl2{display:block; margin-top:6px; font-size:9.5px; letter-spacing:.22em; text-transform:uppercase; font-weight:800; color:#E9C46A;}
  .psh .ghs2{display:block; margin-top:5px; font-size:10.5px; color:#9FB2CC;}
  /* dark panel that extends the hero down to include the streak chips */
  .pshx{margin:-14px -14px 8px; padding:14px 14px 14px; background:#0B1220;}
  /* ---- personal-stats hero choreography: thumb swipes → page scrolls → gold birds rise ---- */
  .psanim{position:absolute; inset:0; z-index:3; pointer-events:none;}
  /* the REAL page on the phone slides. The phone screen is a PERSPECTIVE TRAPEZOID (not a
     rotatable rect), pixel-traced from the photo: display corners TL(161,119) TR(228,119)
     BR(225,201) BL(195,201) — the bottom narrows because the man's thumb occludes the page's
     lower-left, so clipping to this quad keeps his thumb visible & static. The container is
     the full photo box (0,44 · 355×230) clipped to that quad; the panes carry the photo as a
     1:1 background (pixel-identical to the real photo → invisible at rest) and slide L→R. */
  .psscreen{position:absolute; left:0; top:44px; width:355px; height:231px; overflow:hidden;
    clip-path:polygon(159px 73px, 230px 73px, 227px 158px, 195px 158px);}
  .pspg{position:absolute; left:158px; top:72px; width:74px; height:88px; background-repeat:no-repeat; background-size:355px 230.234px; background-position:-158px -72px;}
  .pspg.pg1{animation:psPg1 5.6s ease-in-out infinite;}
  .pspg.pg2{animation:psPg2 5.6s ease-in-out infinite;}
  @keyframes psPg1{ 0%,10%{transform:translateX(0);} 22%,100%{transform:translateX(76px);} }
  @keyframes psPg2{ 0%,10%{transform:translateX(-76px);} 22%,100%{transform:translateX(0);} }
  /* dotted flight trail up into the sky */
  .pstrail{position:absolute; left:164px; top:16px; width:60px; height:152px; opacity:0; animation:psTr 5.6s linear infinite; overflow:visible;}
  .pstrail path{stroke:#F5E7B8; stroke-width:2.6; stroke-linecap:round; stroke-dasharray:.1 9; animation:psDash 1.1s linear infinite;}
  @keyframes psTr{ 0%,16%{opacity:0;} 24%{opacity:.75;} 86%{opacity:.75;} 95%,100%{opacity:0;} }
  @keyframes psDash{ to{stroke-dashoffset:-9.1;} }
  /* the gold birds — the SAME bird as the global-stats sky, in the stats gold #F5E7B8 */
  .psanim .psbird{position:absolute; opacity:0; filter:drop-shadow(0 3px 8px rgba(0,0,0,.55)) drop-shadow(0 0 14px rgba(245,231,184,.85));}
  .psanim .psbird svg{width:100%; height:100%; overflow:visible;}
  .psanim .psbird path{stroke:#F5E7B8;}
  .psanim .kwL,.psanim .kwR{transform-box:view-box; transform-origin:50% 66%;}
  .psanim .kwL{animation:flapL .17s ease-in-out infinite alternate;}
  .psanim .kwR{animation:flapR .17s ease-in-out infinite alternate;}
  .psbird.pb0{left:173px; top:118px; width:42px; height:32px; animation:psB0 5.6s ease-in-out infinite;}
  /* joiners route only through the CLEAR zones: the left bird enters high on the left (dark
     upper-left, well above the carpet/hand which sit at y≳120) and climbs to the top-centre;
     the right bird glides along the dark band at the very top (y≈22, above the kufi whose top
     is ≈y49) in from the right. Neither crosses the carpet (bottom) or the hat (right). */
  .psbird.pb1{left:-28px; top:58px; width:30px; height:23px; animation:psB1 5.6s ease-in-out infinite;}
  .psbird.pb2{right:-28px; top:22px; width:30px; height:23px; animation:psB2 5.6s ease-in-out infinite;}
  @keyframes psB0{ 0%,14%{opacity:0; transform:translateY(6px) scale(.3);} 21%{opacity:1; transform:translateY(-10px) scale(.5);} 55%{transform:translate(-5px,-58px) scale(.85);} 90%{opacity:1; transform:translate(4px,-104px) scale(1.22);} 97%,100%{opacity:0; transform:translate(6px,-116px) scale(1.3);} }
  @keyframes psB1{ 0%,34%{opacity:0; transform:translate(0,0) scale(.4);} 42%{opacity:1; transform:translate(78px,-14px) scale(.62);} 90%{opacity:1; transform:translate(166px,-34px) scale(1);} 97%,100%{opacity:0; transform:translate(176px,-40px) scale(1.05);} }
  @keyframes psB2{ 0%,42%{opacity:0; transform:translate(0,0) scale(.4);} 50%{opacity:1; transform:translate(-58px,3px) scale(.58);} 90%{opacity:1; transform:translate(-150px,2px) scale(.95);} 97%,100%{opacity:0; transform:translate(-158px,0px) scale(1);} }
  @media (prefers-reduced-motion:reduce){ .psanim{display:none;} }
  .pseg3{grid-template-columns:repeat(3,1fr) !important;}
  .pschips{display:flex; gap:8px;}
  .pschips > div{flex:1; display:flex; align-items:center; gap:7px; background:rgba(255,253,246,.07); border:1px solid rgba(255,253,246,.14); border-radius:999px; padding:7px 12px; font-size:10.5px; color:#9FB2CC;}
  .pschips svg{flex:none; color:#E9C46A;}
  .pschips b{color:#F5E7B8; font-variant-numeric:tabular-nums; font-size:12px;}
  .pschips > div{padding:7px 9px; font-size:10px; min-width:0; justify-content:center;}
  /* Your khatams — personal prominent, global smaller below */
  .pskh{display:flex; flex-direction:column; gap:9px;}
  .pskhp{display:flex; align-items:center; gap:14px; background:linear-gradient(135deg,rgba(233,196,106,.16),rgba(233,196,106,.05)); border:1px solid rgba(233,196,106,.34); border-radius:14px; padding:15px 16px;}
  .pskhp .pskhpi{flex:none; width:38px; height:38px; display:flex; align-items:center; justify-content:center;}
  .pskhp .pskhpi img,.pskhp .pskhpi .bic{width:34px; height:34px;}
  .pskhp .pskhpt b{font-size:27px; font-weight:800; color:#F5E7B8; line-height:1; font-variant-numeric:tabular-nums;}
  .pskhp .pskhpt small{display:block; font-size:11px; color:#C7D2E2; margin-top:3px;}
  .pskhg{display:flex; gap:20px; flex-wrap:wrap; background:rgba(255,253,246,.06); border:1px solid rgba(255,253,246,.13); border-radius:12px; padding:11px 15px;}
  .pskhg .pskhgr{display:flex; align-items:center; gap:8px; font-size:11px; color:#B7C6D9;}
  .pskhg .pskhgi{flex:none; display:flex; align-items:center;}
  .pskhg .pskhgi svg{width:17px; height:17px;}
  .pskhg .pskhgi img,.pskhg .pskhgi .bic{width:16px; height:16px;}
  .pskhg em{font-style:normal; color:#8398b0;}
  .calsum{font-size:8.5px; color:#9FB2CC; font-weight:700; letter-spacing:.06em; text-transform:uppercase; float:right;}
  /* when do you read — weekday × time-window heatmap WITH clock times */
  .hm{background:rgba(255,253,246,.07); border:1px solid rgba(255,253,246,.14); border-radius:12px; padding:11px 11px 9px;}
  .hmrow{display:grid; grid-template-columns:86px repeat(7,1fr); gap:4px; align-items:center; padding:2px 3px; border-radius:8px; position:relative;}
  .hmrow.head{padding-bottom:4px;}
  .hmrow.head span{text-align:center; font-size:8px; font-weight:800; letter-spacing:.06em; color:#9FB2CC;}
  .hmlab b{display:block; font-size:10.5px; font-weight:700; color:#F2EDDD; line-height:1.25;}
  .hmlab small{display:block; font-size:8px; color:#9FB2CC; font-variant-numeric:tabular-nums; letter-spacing:.03em;}
  .hmc{aspect-ratio:1.35; border-radius:4px; background:rgba(255,253,246,.06);}
  .hmc.l1{background:rgba(47,158,95,.3);}
  .hmc.l2{background:rgba(47,158,95,.55);}
  .hmc.l3{background:#2F9E5F;}
  .hmc.l4{background:#4CB878;}
  .hmrow.best{background:rgba(47,158,95,.16); box-shadow:inset 0 0 0 1px rgba(76,184,120,.4);}
  .hmrow.best .hmlab b{color:#BFF0D2;}
  .hmbest{position:absolute; top:1px; right:5px; font-size:6.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:#E9C46A; opacity:.95; pointer-events:none;}
  .hmnote{font-size:9.5px; color:#9FB2CC; line-height:1.5; margin:7px 2px 0;}
  .hmnote b{color:#BFF0D2;}
  .hmleg{display:flex; align-items:center; justify-content:flex-end; gap:4px; margin-top:6px; font-size:8px; color:#9FB2CC; font-weight:700; letter-spacing:.05em; text-transform:uppercase;}
  .hmleg i{width:9px; height:9px; border-radius:3px; display:inline-block;}
  /* last-30-days calendar */
  .cal{background:rgba(255,253,246,.07); border:1px solid rgba(255,253,246,.14); border-radius:12px; padding:11px 12px 10px;}
  .calhead{display:grid; grid-template-columns:repeat(7,1fr); gap:5px; margin-bottom:5px;}
  .calhead span{text-align:center; font-size:8px; font-weight:800; letter-spacing:.06em; color:#9FB2CC;}
  .calgrid{display:grid; grid-template-columns:repeat(7,1fr); gap:5px;}
  .mday{aspect-ratio:1; border-radius:6px; background:rgba(255,253,246,.08); cursor:pointer; border:none; padding:0;}
  .mday.l1{background:rgba(47,158,95,.3);}
  .mday.l2{background:rgba(47,158,95,.55);}
  .mday.l3{background:#2F9E5F;}
  .mday.l4{background:#4CB878;}
  .mday.ghost{background:none; cursor:default;}
  .mday.today{box-shadow:0 0 0 1.5px #E9C46A;}
  .mday{display:flex; align-items:center; justify-content:center; position:relative;}
  .mday i{font-style:normal; font-size:8.5px; font-weight:700; color:rgba(255,255,255,.82); text-shadow:0 1px 1.5px rgba(0,0,0,.32); line-height:1;}
  .mday.today i{color:#F5E7B8;}
  /* View-more overlays behave as a separate page: lock the background scroll while open */
  .gstats.ovlock{overflow:hidden;}
  /* khatam achievement badge = the brand khatam icon inside the tier ring */
  .achkq{display:flex; align-items:center; justify-content:center; width:100%; aspect-ratio:1; border:2.2px solid #4E5B72; border-radius:50%; background:rgba(255,253,246,.03); box-sizing:border-box;}
  .achkq img{width:62%; height:62%; object-fit:contain;}
  .achkq.lk{opacity:.6;}
  .achb.earned .achkq{box-shadow:0 0 6px rgba(233,196,106,.35);}
  .achrow .am .achkq{width:100%; height:100%;}
  /* ===== donation feature (submission screen) ===== */
  /* golden weekly-cause card with a hero image */
  .kdonate{flex:none; margin:16px 14px 0; background:linear-gradient(165deg,#FFF7E1,#F1E0AE); border:1.5px solid #E4C878; border-radius:18px; overflow:hidden; color:#4A3B12; box-shadow:0 10px 26px -14px rgba(150,110,20,.55);}
  .kdhero{position:relative; height:104px; overflow:hidden;}
  .kdhero .kdheroart{position:absolute; inset:0; width:100%; height:100%; display:block;}
  .kdonate .kdhead{display:flex; align-items:center; justify-content:space-between; padding:12px 14px 0;}
  .kdtag{font-size:8.5px; letter-spacing:.12em; text-transform:uppercase; font-weight:800; color:#8A6B1E;}
  .kddone{font-size:9px; font-weight:800; color:#1F7A47;}
  .kdcause{display:flex; align-items:center; gap:11px; padding:8px 14px 0;}
  .kdheart{flex:none; width:40px; height:40px; border-radius:12px; background:rgba(206,154,52,.16); display:flex; align-items:center; justify-content:center;}
  .kdheart svg{stroke:#B5822A;}
  .kdct b{font-size:14px; font-weight:800; color:#3A2E10;} .kdct small{display:block; font-size:10.5px; color:#6B5320; margin-top:2px;} .kdct small b{color:#1F7A47;}
  .kdbar{height:8px; border-radius:999px; background:rgba(120,90,20,.16); margin:10px 14px 4px; overflow:hidden;} .kdbar i{display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,#2F9E5F,#57C07D);}
  .kdbtns{display:flex; gap:8px; margin:11px 14px 0;}
  .kdbtns button{flex:1; font:inherit; font-size:12px; font-weight:800; padding:11px 8px; border-radius:11px; cursor:pointer; border:none;}
  .kdgive{background:var(--qc-green); color:#fff;}
  .kdshop{background:#FFFDF6; border:1px solid #E4C878!important; color:#7A5E1E;}
  .kdnote{font-size:9.5px; color:#8A6B1E; margin:9px 14px 12px; line-height:1.45;} .kdnote b{color:#5A4718;}
  .kdthanks{font-size:11.5px; color:#5A4718; margin:10px 14px 0; line-height:1.45;}
  .kdmore{display:block; width:calc(100% - 28px); margin:10px 14px 12px; font:inherit; font-size:11.5px; font-weight:800; color:#7A5E1E; background:rgba(206,154,52,.14); border:1px solid #E4C878; border-radius:11px; padding:10px; cursor:pointer;}
  .kdover{position:absolute; inset:0; z-index:66; background:linear-gradient(180deg,#0B1220 0%,#16243F 100%); color:#F2EDDD; display:flex; flex-direction:column; overflow-y:auto; padding:16px 15px 20px; scrollbar-width:none;}
  .kdover::-webkit-scrollbar{display:none;}
  .kdovback{align-self:flex-start; background:none; border:none; color:#9FB2CC; font:inherit; font-size:12px; font-weight:700; cursor:pointer; padding:2px 0 10px;}
  .kdover h4{margin:0 0 4px; font-size:16px; color:#F6EFDC;}
  .kdamts{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:14px 0;}
  .kdamt{font:inherit; font-size:14px; font-weight:800; padding:13px 4px; border-radius:12px; cursor:pointer; background:rgba(255,253,246,.07); border:1.5px solid rgba(255,253,246,.18); color:#EAF1FA;}
  .kdamt.on{background:rgba(47,158,95,.2); border-color:#4CB878; color:#EAF6EE;}
  .kdpay{width:100%; margin-top:6px; font:inherit; font-size:13px; font-weight:800; padding:13px; border-radius:12px; border:none; background:var(--qc-green); color:#fff; cursor:pointer;}
  .kdsecure{font-size:10px; color:#9FB2CC; text-align:center; margin-top:10px;}
  .kdshopnote{font-size:11.5px; color:#C7D2E2; line-height:1.5; margin:2px 0 12px;} .kdshopnote b{color:#7ED9A2;}
  .kdlist{display:flex; flex-direction:column; gap:9px;}
  .kditem{display:flex; align-items:center; gap:10px; background:rgba(255,253,246,.06); border:1px solid rgba(255,253,246,.13); border-radius:13px; padding:11px 12px;}
  .kditt{flex:1;} .kditt b{font-size:12.5px; font-weight:700; color:#F2EDDD;} .kditt small{display:block; font-size:10px; color:#9FB2CC; margin-top:2px;} .kditt small em{font-style:normal; color:#7ED9A2; font-weight:700;}
  .kdbuy{flex:none; font:inherit; font-size:11.5px; font-weight:800; padding:8px 15px; border-radius:9px; border:none; background:var(--qc-green); color:#fff; cursor:pointer;}
  /* routine tracker (3 circles) on the submission screen */
  .kroutine{margin:16px 14px 0; background:rgba(255,253,246,.05); border:1px solid rgba(255,253,246,.13); border-radius:14px; padding:12px 12px 11px;}
  .kroutine .krh{font-size:8.5px; letter-spacing:.11em; text-transform:uppercase; font-weight:800; color:#F5E7B8; margin-bottom:11px;}
  .krow{display:flex; gap:8px;}
  .kritem{flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center;}
  .krc{width:36px; height:36px; border-radius:50%; border:2px solid rgba(255,253,246,.28); display:flex; align-items:center; justify-content:center; color:#9FB2CC;}
  .krc svg{width:17px; height:17px;}
  .kritem.done .krc{border-color:#4CB878; background:rgba(47,158,95,.18); color:#7ED9A2;}
  .kritem .krl{font-size:9px; font-weight:700; color:#C7D2E2; line-height:1.2;}
  .kritem.done .krl{color:#EAF6EE;}
  /* weekly giving — its own bold, standout section */
  .give{background:linear-gradient(135deg,rgba(233,196,106,.16),rgba(47,158,95,.15)); border:1.5px solid rgba(233,196,106,.55); border-radius:16px; padding:14px;}
  .give .gvtop{display:flex; align-items:center; gap:12px;}
  .give .gvbig{font-size:30px; font-weight:800; color:#F7ECC4; line-height:1; font-variant-numeric:tabular-nums;}
  .give .gvlab{font-size:11px; color:#EAD9BE; font-weight:700;} .give .gvsub{display:block; font-size:9.5px; color:#C7D2E2; margin-top:2px;}
  .give .gvtot{margin-left:auto; text-align:right;} .give .gvtot b{font-size:18px; color:#7ED9A2; font-weight:800;} .give .gvtot small{display:block; font-size:9px; color:#9FB2CC;}
  .give .gvweeks{display:flex; gap:5px; margin-top:13px;}
  .give .gvweeks i{flex:1; height:10px; border-radius:3px; background:rgba(255,253,246,.12);}
  .give .gvweeks i.on{background:linear-gradient(180deg,#F5E7B8,#C9AE68);}
  .give .gvnote{font-size:9.5px; color:#C7D2E2; margin-top:11px; line-height:1.45;} .give .gvnote b{color:#F5E7B8;}
  /* achievement detail screen */
  .achdet{padding:8px 16px 24px; text-align:center;}
  .achdetmed{width:96px; height:96px; margin:6px auto 2px;} .achdetmed svg,.achdetmed .achkq{width:100%!important; height:100%!important;}
  .achdet h3{margin:8px 0 2px; font-size:19px; color:#F6EFDC;}
  .achdet .adtier{font-size:9.5px; font-weight:800; letter-spacing:.07em; text-transform:uppercase;}
  .achdet .adstatus{display:inline-block; margin-top:10px; font-size:11px; font-weight:800; padding:6px 14px; border-radius:999px;}
  .achdet .adstatus.done{background:rgba(47,158,95,.2); color:#7ED9A2;} .achdet .adstatus.lock{background:rgba(255,253,246,.09); color:#C7D2E2;}
  .achdet .addesc{font-size:12.5px; color:#C7D2E2; margin:12px auto 0; max-width:250px; line-height:1.5;}
  /* share a badge */
  .achdet .adshare{display:inline-flex; align-items:center; gap:8px; margin:16px auto 0; background:#F5E7B8; color:#3A2A05; border:none; border-radius:12px; padding:11px 20px; font:inherit; font-size:13px; font-weight:800; cursor:pointer; box-shadow:0 12px 26px -14px rgba(245,231,184,.85);}
  .achdet .adshare svg{width:17px; height:17px;} .achdet .adshare:hover{background:#FBEFC6;}
  .shbody{padding:16px 16px 26px; text-align:center;}
  .shcard{position:relative; border-radius:20px; padding:24px 18px 20px; margin:6px auto 20px; max-width:270px; overflow:hidden;}
  .shcard .shbrand{display:flex; align-items:center; justify-content:center; gap:7px; color:#EAF1FA; font-weight:800; font-size:12px; letter-spacing:.02em; opacity:.92;}
  .shcard .shbrand svg{width:18px; height:18px;}
  .shcard .shmed{width:118px; height:118px; margin:16px auto 4px; filter:drop-shadow(0 10px 22px rgba(0,0,0,.55));} .shcard .shmed svg,.shcard .shmed .achkq{width:100%!important; height:100%!important;}
  .shcard .shname{font-size:22px; font-weight:800; color:#F8F1DC; line-height:1.1; margin-top:8px;}
  .shcard .shtier{font-size:10px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; margin-top:5px;}
  .shcard .shrar{font-size:11.5px; color:#CBD6E8; margin-top:12px;} .shcard .shrar b{color:#F5E7B8;}
  .shcard .shtag{font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:rgba(234,241,250,.5); font-weight:700; margin-top:16px;}
  .shprompt{font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; font-weight:800; color:#9FB2CC; margin-bottom:12px;}
  .shtargets{display:flex; justify-content:center; gap:14px; flex-wrap:wrap;}
  .shtarget{background:none; border:none; cursor:pointer; font:inherit; display:flex; flex-direction:column; align-items:center; gap:6px; width:58px;}
  .shtarget .shic{width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:0 8px 18px -8px rgba(0,0,0,.6);}
  .shtarget .shic svg{width:22px; height:22px;}
  .shtarget small{font-size:9.5px; color:#C7D2E2; font-weight:600;}
  .achdet .adbar{height:7px; border-radius:999px; background:rgba(255,253,246,.12); margin:14px auto 5px; max-width:220px; overflow:hidden;} .achdet .adbar i{display:block; height:100%; background:linear-gradient(90deg,#2F9E5F,#4CB878);}
  .achdet .adprog{font-size:10px; color:#9FB2CC; font-weight:700;}
  .achdet .adladder{margin:20px auto 0; max-width:290px; text-align:left;}
  .achdet .adlsec{font-size:9.5px; letter-spacing:.09em; text-transform:uppercase; color:#F5E7B8; font-weight:800; margin-bottom:8px;}
  .adlrow{display:flex; align-items:center; gap:11px; padding:8px 0; border-bottom:1px solid rgba(255,253,246,.08);}
  .adlrow.cur{background:rgba(233,196,106,.1); border-radius:9px; padding:8px 9px; border-bottom:none;}
  .adlrow .adlm{flex:none; width:32px; height:32px;} .adlrow .adlm svg,.adlrow .adlm .achkq{width:100%!important; height:100%!important;}
  .adlrow .adlt{flex:1;} .adlrow .adlt b{font-size:11.5px; color:#EAF1FA;} .adlrow .adlt small{display:block; font-size:9px; color:#9FB2CC;}
  .adlrow .adlck{font-size:12px; font-weight:800;}
  /* shop & give — full-page product cards */
  .kscreen.kdlock{overflow:hidden;}
  .kdshopwrap{display:flex; flex-direction:column; gap:14px; margin-top:8px;}
  .kdprod{background:rgba(255,253,246,.05); border:1px solid rgba(255,253,246,.13); border-radius:16px; overflow:hidden;}
  .kdphoto{height:148px; display:flex; align-items:center; justify-content:center; font-size:54px;}
  .kdpbanner{display:flex; align-items:center; gap:10px; padding:12px 13px;}
  .kdpbanner .kdpt{flex:1; min-width:0;} .kdpbanner .kdpt b{font-size:13px; color:#F2EDDD;} .kdpbanner .kdpt small{display:block; font-size:10.5px; color:#9FB2CC; margin-top:2px;} .kdpbanner .kdpt small em{font-style:normal; color:#7ED9A2; font-weight:700;}
  /* sunnah habits — bead strips (bigger + more spaced, Talha 21 Jul) */
  .hab{background:rgba(255,253,246,.07); border:1px solid rgba(255,253,246,.14); border-radius:12px; padding:15px 14px; display:flex; flex-direction:column; gap:22px;}
  .habrow{display:flex; align-items:flex-start; gap:13px;}
  .habrow .ht{display:flex; align-items:baseline; gap:8px;}
  .habrow .ht b{font-size:13px; font-weight:800; color:#F2EDDD;}
  .habrow .ht em{font-style:normal; margin-left:auto; font-size:13px; font-weight:800; color:#F5E7B8; font-variant-numeric:tabular-nums; white-space:nowrap;}
  .beads{display:flex; gap:9px; margin-top:11px; flex-wrap:wrap;}
  .beads i{width:15px; height:15px; border-radius:50%; background:rgba(255,253,246,.14); flex:none;}
  .beads i.on{background:#4CB878; box-shadow:0 0 6px rgba(76,184,120,.55);}
  .habnote{font-size:9.5px; color:#9FB2CC; line-height:1.5;}
  .habnote b{color:#F5E7B8;}
  /* calendar: shaded-by-points legend */
  .callegend{display:flex; align-items:center; gap:5px; flex-wrap:wrap; font-size:9px; color:#8FA3C0; margin-top:9px;}
  .callegend i{width:12px; height:12px; border-radius:3px; display:inline-block;}
  .callegend .l1{background:rgba(47,158,95,.3);} .callegend .l2{background:rgba(47,158,95,.55);} .callegend .l3{background:#3FB271;} .callegend .l4{background:#7ED9A2;}
  /* calendar day popup — points breakdown (dark stats theme) */
  .calpop-wrap{position:absolute; left:0; right:0; z-index:60; display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .2s; pointer-events:none;}
  .calpop-wrap.show{opacity:1; pointer-events:auto;}
  .calpop-dim{position:absolute; inset:0; background:rgba(6,10,20,.62);}
  .calpop{position:relative; width:84%; max-width:292px; background:#16233c; border:1px solid rgba(255,253,246,.16); border-radius:16px; padding:16px 15px 14px; box-shadow:0 20px 44px -14px rgba(0,0,0,.72); transform:translateY(10px) scale(.98); transition:transform .2s;}
  .calpop-wrap.show .calpop{transform:none;}
  .calpop-x{position:absolute; top:9px; right:10px; background:none; border:none; color:#8FA3C0; font-size:15px; cursor:pointer; padding:2px 4px; line-height:1;}
  .calpop-h b{display:block; font-size:14px; font-weight:800; color:#F2EDDD;}
  .calpop-h small{display:block; font-size:10px; color:#9FB2CC; margin-top:2px;}
  .calpop-tot{display:flex; align-items:baseline; gap:10px; margin:13px 0 4px; padding:12px 13px; border-radius:12px; background:rgba(255,255,255,.035); border:1px solid rgba(255,253,246,.12); border-left:4px solid var(--tc,#4CB878);}
  .calpop-pts{font-size:27px; font-weight:800; color:var(--tc,#4CB878); font-variant-numeric:tabular-nums; line-height:1;}
  .calpop-lab{font-size:10.5px; color:#9FB2CC;}
  .calpop-rows{display:flex; flex-direction:column; margin-top:8px;}
  .cprow{display:flex; align-items:center; gap:10px; padding:8px 2px; border-top:1px solid rgba(255,253,246,.08);}
  .cprow:first-child{border-top:none;}
  .cpic{flex:none; width:26px; height:26px; display:flex; align-items:center; justify-content:center;}
  .cpic svg{width:18px; height:18px;}
  .cpname{flex:1; min-width:0; font-size:11.5px; font-weight:700; color:#E7E0CE;}
  .cpcalc{font-size:9.5px; color:#8FA3C0; font-variant-numeric:tabular-nums; white-space:nowrap;}
  .cppts{flex:none; font-size:12.5px; font-weight:800; color:#7ED9A2; font-variant-numeric:tabular-nums; min-width:44px; text-align:right;}
  .calpop-foot{font-size:9.5px; color:#9FB2CC; line-height:1.5; margin-top:12px;}
  .calpop-foot b{color:#F5E7B8;}
  .calpop-empty{font-size:11px; color:#9FB2CC; line-height:1.55; margin-top:12px;}
  .give .gvbtn{width:100%; margin-top:13px; font:inherit; font-size:12px; font-weight:800; color:#3A2E08; background:#E9C46A; border:none; border-radius:11px; padding:11px; cursor:pointer;}
  .give .gvbtn:hover{background:#F0D07E;}
  .givepop .gpamts{display:flex; gap:8px; margin:14px 0 12px;}
  .givepop .gpamt{flex:1; font:inherit; font-size:14px; font-weight:800; color:#E7E0CE; background:rgba(255,255,255,.05); border:1.5px solid rgba(255,253,246,.16); border-radius:11px; padding:11px 4px; cursor:pointer;}
  .givepop .gpamt.on{background:rgba(233,196,106,.18); border-color:#E9C46A; color:#F5E7B8;}
  .givepop .gppay{width:100%; font:inherit; font-size:12.5px; font-weight:800; color:#3A2E08; background:#E9C46A; border:none; border-radius:11px; padding:12px; cursor:pointer;}
  /* level + badges */
  .lvl{background:rgba(255,253,246,.07); border:1px solid rgba(255,253,246,.14); border-radius:12px; padding:12px;}
  .lvlhead{display:flex; align-items:center; gap:11px;}
  .lvlmed{flex:none; width:46px; height:46px;}
  .lvlmed svg{display:block; width:100%; height:100%;}
  .lvlt b{display:block; font-size:13px; color:#F5E7B8;}
  .lvlt small{display:block; font-size:9.5px; color:#9FB2CC; margin-top:1px;}
  .lvlbar{height:6px; border-radius:999px; background:rgba(255,253,246,.12); margin-top:10px; overflow:hidden;}
  .lvlbar i{display:block; height:100%; width:0; background:linear-gradient(90deg,#C9AE68,#F5E7B8); border-radius:999px; transition:width .6s ease;}
  .lvlnext{font-size:9px; color:#9FB2CC; margin-top:5px;}
  .lvlnext b{color:#E9C46A;}
  .lvlprof{display:flex; align-items:center; gap:8px; margin-top:10px; padding-top:10px; border-top:1px solid rgba(255,253,246,.1); font-size:9.5px; color:#9FB2CC;}
  .lvlav{position:relative; width:30px; height:30px; flex:none;}
  .lvlav .av{width:100%; height:100%; border-radius:50%; background:#2F9E5F; color:#fff; font-size:10px; font-weight:800; display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 2px #C9AE68;}
  .lvlav .lv{position:absolute; right:-4px; bottom:-3px; background:linear-gradient(180deg,#F5E7B8,#C9AE68); color:#4A3B12; font-size:7.5px; font-weight:800; border-radius:999px; padding:1px 4.5px; line-height:1.3;}
  .badges{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:11px;}
  .badge{background:none; border:none; padding:0; cursor:pointer; font:inherit; text-align:center; color:#9FB2CC;}
  .badge svg{display:block; width:38px; height:38px; margin:0 auto 4px;}
  .badge small{display:block; font-size:8px; font-weight:700; letter-spacing:.04em; line-height:1.3;}
  .badge.earned small{color:#F5E7B8;}
  .badge.locked{opacity:.4;}
  /* how you compare — cohort-matched */
  .cmp{background:rgba(255,253,246,.07); border:1px solid rgba(255,253,246,.14); border-radius:12px; padding:12px;}
  .cohort{display:inline-flex; align-items:center; gap:6px; background:rgba(47,158,95,.18); border:1px solid rgba(76,184,120,.45); border-radius:999px; padding:4px 11px; font-size:9.5px; font-weight:800; color:#BFF0D2;}
  .cohort svg{flex:none;}
  .cmpwhy{font-size:9px; color:#9FB2CC; line-height:1.5; margin:7px 0 10px;}
  .cmprow{margin-bottom:9px;}
  .cmprow .ct{display:flex; align-items:baseline; font-size:9.5px; color:#F2EDDD; margin-bottom:3px;}
  .cmprow .ct em{font-style:normal; margin-left:auto; font-size:9px; color:#9FB2CC; font-variant-numeric:tabular-nums;}
  .cmprow .ct em b{color:#F5E7B8; font-size:10px;}
  .cbar{height:6px; border-radius:999px; background:rgba(255,253,246,.09); position:relative; overflow:hidden; margin-bottom:2px;}
  .cbar i{position:absolute; left:0; top:0; bottom:0; border-radius:999px; transition:width .5s ease;}
  .cbar.you i{background:linear-gradient(90deg,#2F9E5F,#4CB878);}
  .cbar.avg{height:4px; opacity:.9;}
  .cbar.avg i{background:rgba(143,185,216,.6);}
  .ckey{display:flex; gap:12px; font-size:8px; color:#9FB2CC; font-weight:700; letter-spacing:.06em; text-transform:uppercase; margin-bottom:8px;}
  .ckey i{display:inline-block; width:9px; height:5px; border-radius:3px; margin-right:4px; vertical-align:1px;}
  .cpct{margin-top:4px; font-size:10px; font-weight:800; color:#F5E7B8; text-align:center; letter-spacing:.03em;}
  /* heatmap: star marks the strongest row instead of a text tag */
  .hmstar{color:#E9C46A; margin-right:3px;}
  /* calendar time caption */
  .calcap{margin-top:9px; font-size:9.5px; color:#9FB2CC; text-align:center;}
  .calcap b{color:#EAF1FA;} .calcap svg{width:12px; height:12px; vertical-align:-2px; opacity:.85;}
  /* section-label inline info icon */
  .gslabel .ii{color:#7E93B2; cursor:pointer; margin-left:5px; display:inline-flex; vertical-align:-2px;} .gslabel .achct{color:#F5E7B8; font-weight:800;}
  /* achievements grid */
  .ach{background:rgba(255,253,246,.05); border:1px solid rgba(255,253,246,.12); border-radius:14px; padding:12px 11px;}
  .achleg{display:flex; flex-wrap:wrap; gap:7px 12px; justify-content:center; margin-bottom:10px; font-size:8px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:#9FB2CC;}
  .achleg i{display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:4px; vertical-align:-1px;}
  .achgrid{display:grid; grid-template-columns:repeat(6,1fr); gap:8px;}
  .achb{background:none; border:none; padding:0; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:2px;}
  .achb .achwpc{font-size:7px; font-weight:800; color:#7C8CA3; letter-spacing:.01em;}
  .achb.earned .achwpc{color:#B7C6D9;}
  .achb svg{display:block; width:100%; height:auto;}
  .achb.earned svg{filter:drop-shadow(0 0 3px rgba(233,196,106,.4));}
  .achsub{font-size:9px; letter-spacing:.1em; text-transform:uppercase; font-weight:800; color:#9FB2CC; margin:12px 0 8px;}
  .achviewall,.lvlmore{display:block; width:100%; margin-top:12px; font:inherit; font-size:11px; font-weight:800; color:#EAF1FA; background:rgba(255,253,246,.08); border:1px solid rgba(255,253,246,.2); border-radius:10px; padding:10px; cursor:pointer;}
  /* full-screen detail overlay (achievements / levels) */
  .psover{position:absolute; inset:0; z-index:70; background:linear-gradient(180deg,#0B1220 0%,#12203A 60%,#1A2C48 100%); color:#F2EDDD; display:flex; flex-direction:column; overflow-y:auto; scrollbar-width:none;}
  .psover::-webkit-scrollbar{display:none;}
  .psovhd{position:sticky; top:0; z-index:2; display:flex; align-items:center; gap:11px; padding:14px 14px 11px; background:linear-gradient(180deg,#0B1220,rgba(11,18,32,.82)); backdrop-filter:blur(4px);}
  .psovhd .psovback{flex:none; width:30px; height:30px; border-radius:50%; border:none; background:rgba(255,253,246,.12); color:#F2EDDD; font-size:18px; line-height:1; cursor:pointer;}
  .psovhd b{font-size:15px; font-weight:800;} .psovhd small{display:block; font-size:9.5px; color:#9FB2CC; font-weight:700; margin-top:1px;}
  .psovbody{padding:4px 14px 22px;}
  .achcat{margin-top:16px;} .achcat > b{font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:#F5E7B8; font-weight:800;}
  .achrow{display:flex; align-items:center; gap:11px; padding:11px 0; border-bottom:1px solid rgba(255,253,246,.08);}
  .achrow .am{flex:none; width:38px; height:38px;} .achrow .am svg{width:100%; height:100%;}
  .achrow .at{flex:1; min-width:0;} .achrow .at b{font-size:12px; font-weight:800; color:#EAF1FA;}
  .achrow .at .atier{font-size:8px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; margin-left:6px;}
  .achrow .at small{display:block; font-size:9.5px; color:#9FB2CC; margin-top:2px; line-height:1.4;}
  .achrow .at small.aworld{font-size:9px; color:#8496AD; font-weight:700; margin-top:3px;}
  .achdet .adworld{display:inline-flex; align-items:center; gap:7px; margin:11px auto 0; font-size:11px; color:#C7D2E2;}
  .achdet .adworld svg{width:16px; height:16px; opacity:.9;}
  .achdet .adworld b{color:#F5E7B8;}
  .adlrow .adlt small .adlw{font-style:normal; font-weight:700; color:#8FA3C0;}
  .achrow .apbar{height:5px; border-radius:999px; background:rgba(255,253,246,.1); margin-top:7px; overflow:hidden; max-width:170px;}
  .achrow .apbar i{display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,#2F9E5F,#4CB878);}
  .achrow .aprog{flex:none; font-size:9.5px; font-weight:800; color:#9FB2CC; white-space:nowrap;}
  .achrow.done .aprog{color:#7ED9A2;}
  /* levels detail */
  .lvhero{display:flex; align-items:center; gap:13px; margin-top:8px;}
  .lvhero .lvmed{flex:none; width:58px; height:58px;} .lvhero .lvmed svg{width:100%; height:100%;}
  .lvhero b{font-size:16px; color:#F5E7B8; font-weight:800;} .lvhero small{display:block; font-size:10px; color:#9FB2CC; margin-top:2px;}
  .lvbar2{height:8px; border-radius:999px; background:rgba(255,253,246,.12); margin-top:13px; overflow:hidden;} .lvbar2 i{display:block; height:100%; background:linear-gradient(90deg,#C9AE68,#F5E7B8);}
  .lvnext2{font-size:10px; color:#9FB2CC; margin-top:7px; text-align:center;} .lvnext2 b{color:#E9C46A;}
  .lvsec{font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:#F5E7B8; font-weight:800; margin:20px 0 8px;}
  .lvpts{display:flex; align-items:center; gap:11px; padding:10px 0; border-bottom:1px solid rgba(255,253,246,.08); font-size:11.5px; color:#EAF1FA; font-weight:600;}
  .lvpts .lvi{flex:none; width:26px; display:flex; justify-content:center;} .lvpts .lvi svg,.lvpts .lvi img{width:20px; height:20px; object-fit:contain;}
  .lvpts .lvp{margin-left:auto; font-weight:800; color:#7ED9A2; font-variant-numeric:tabular-nums;}
  .lvlrow{display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:11px; margin-bottom:7px; background:rgba(255,253,246,.05); border:1px solid rgba(255,253,246,.1);}
  .lvlrow.cur{border-color:#E9C46A; background:rgba(233,196,106,.12);}
  .lvlrow .ln{flex:none; width:26px; height:26px; border-radius:50%; background:rgba(245,231,184,.14); border:1.5px solid #C9AE68; color:#F5E7B8; font-size:11px; font-weight:800; display:flex; align-items:center; justify-content:center;}
  .lvlrow .lt{flex:1;} .lvlrow .lt b{font-size:12px; color:#EAF1FA;} .lvlrow .lt small{display:block; font-size:9px; color:#9FB2CC;}
  .lvlrow .lp{font-size:10px; font-weight:800; color:#9FB2CC; white-space:nowrap;}
  /* comparison — bigger, clearer: one bar per metric with an average tick */
  .cmphd{display:flex; align-items:center; gap:8px; margin-bottom:13px;}
  .cmphd .cpill{font-size:11px; font-weight:800; color:#BFF0D2; background:rgba(47,158,95,.18); border:1px solid rgba(76,184,120,.45); border-radius:999px; padding:5px 12px;}
  .cmphd .ii{margin-left:auto; color:#7E93B2; cursor:pointer; display:inline-flex;}
  .cmp2{margin-bottom:14px;}
  .cmp2h{display:flex; align-items:center; gap:8px; margin-bottom:9px;}
  .cmp2h .ci{display:inline-flex;} .cmp2h .ci svg{width:17px; height:17px;}
  .cmp2h .cname{font-size:11.5px; font-weight:700; color:#EAF1FA;}
  .cmp2h .cratio{margin-left:auto; font-size:11px; font-weight:800; color:#0E1520; background:#7ED9A2; border-radius:999px; padding:3px 10px;}
  .cbar2{position:relative; height:18px; background:rgba(255,253,246,.09); border-radius:999px;}
  .cbar2 .cfill{position:absolute; left:0; top:0; bottom:0; border-radius:999px; background:linear-gradient(90deg,#2F9E5F,#4CB878);}
  .cbar2 .cavg{position:absolute; top:-4px; bottom:-4px; width:2.5px; background:#AEBFD4; border-radius:2px;}
  .cbar2 .clvl{position:absolute; top:-4px; bottom:-4px; width:2.5px; background:#E9C46A; border-radius:2px; box-shadow:0 0 5px rgba(233,196,106,.6);}
  .cyou{margin-top:9px; font-size:10px; color:#9FB2CC; display:flex; gap:12px; flex-wrap:wrap; align-items:center;}
  .cyou .cyd{display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:5px; vertical-align:middle;}
  .cyou .cyd.you{background:#4CB878;} .cyou .cyd.lv{background:#E9C46A;} .cyou .cyd.av{background:#AEBFD4;}
  .cyou b{color:#F5E7B8; font-size:14px; font-variant-numeric:tabular-nums; margin-left:2px;}
  .gsgrid{display:grid; grid-template-columns:1fr 1fr; gap:9px;}
  .gstile{display:flex; align-items:center; gap:10px; background:rgba(255,253,246,.07); border:1px solid rgba(255,253,246,.14); border-radius:12px; padding:10px 11px; text-align:left;}
  .gsmic{flex:none; width:26px; display:flex; justify-content:center;}
  .gsmic .gskq svg{width:24px; height:auto; display:block;}
  .gstxt{min-width:0;}
  .gstxt b{display:block; font-size:15px; font-weight:800; color:#F5E7B8; font-variant-numeric:tabular-nums; line-height:1.15;}
  .gstxt span{display:block; font-size:8.5px; letter-spacing:.11em; text-transform:uppercase; font-weight:700; color:#9FB2CC; margin-top:2px;}
  .gslabel{font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:#9FB2CC; font-weight:700; margin-bottom:-4px;}
  .gslbhead{display:flex; align-items:center; justify-content:space-between; margin-bottom:-4px;}
  .gslbhead .gslabel{margin-bottom:0;}
  .gsavg{display:flex; gap:3px; background:rgba(255,253,246,.07); border:1px solid rgba(255,253,246,.16); border-radius:9px; padding:3px;}
  .gsavg button{font:inherit; font-size:9.5px; font-weight:800; letter-spacing:.03em; color:#9FB2CC; background:none; border:none; border-radius:6px; padding:4px 10px; cursor:pointer;}
  .gsavg button.on{background:#2F9E5F; color:#fff;}
  .gsfoot{font-size:9.5px; color:#9FB2CC; line-height:1.5; text-align:center; opacity:.85;}

  @media (prefers-reduced-motion: reduce){
    *{animation:none !important; transition:none !important;}
  }
  @media (max-width:430px){
    .phone{transform:scale(.9); transform-origin:top left;}
    .minibox{width:300px;}
  }

  /* ===== FEATURE PAGES (tabs) ===== */
  .pagenav{display:flex; gap:9px; flex-wrap:wrap; padding:12px 0; margin:2px 0 20px; background:var(--pg); border-bottom:1px solid var(--line-w);}
  /* ==================== GROUPS (page 12) ==================== */
  .grp{background:var(--cream); color:var(--a-ink); display:flex; flex-direction:column; overflow-y:auto; scrollbar-width:none;}
  .grp::-webkit-scrollbar{display:none;}
  .grphd{display:flex; align-items:center; gap:10px; padding:12px 14px 10px; flex:none;}
  .grphd .gback{flex:none; width:30px; height:30px; border-radius:50%; border:none; background:#F1EDE0; color:#8C8A80; font-size:18px; line-height:1; cursor:pointer;}
  .grphd b{font-size:16.5px; font-weight:800;}
  .grphd small{display:block; font-size:10.5px; color:#8C8A80;}
  .grptop{display:flex; gap:8px; padding:0 14px 12px;}
  .grptop button{flex:1; font:inherit; font-size:12px; font-weight:800; padding:11px 8px; border-radius:11px; cursor:pointer;}
  .grpnewb{border:none; background:#2F9E5F; color:#fff;}
  .grpdisc{background:#fff; border:1.5px solid #E8E3D5; color:#2A2A26;}
  .grpdisc.on,.grpnewb.off{ }
  .grplabel{font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; font-weight:800; color:#B4862E; margin:6px 14px 8px;}
  .gcard{margin:0 14px 12px; background:#fff; border:1.2px solid #E8E3D5; border-radius:16px; overflow:hidden; cursor:pointer; box-shadow:0 4px 10px rgba(0,0,0,.04);}
  .gcard .gchero{position:relative; height:88px; display:flex; align-items:flex-end; padding:10px 12px; color:#fff;}
  .gcard .gchero:after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.02) 30%,rgba(0,0,0,.55));}
  .gcard .gchero > *{position:relative; z-index:1;}
  .gclabel{position:absolute; top:9px; left:10px; z-index:2; font-size:8px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; background:rgba(0,0,0,.45); border:1px solid rgba(255,255,255,.4); color:#fff; border-radius:999px; padding:3px 9px; backdrop-filter:blur(2px);}
  .gcfeat{position:absolute; top:9px; right:10px; z-index:2; font-size:8px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; background:#FF9E2E; color:#3A2400; border-radius:999px; padding:3px 8px;}
  .gcname{font-size:15px; font-weight:800; text-shadow:0 1px 6px rgba(0,0,0,.6);}
  .gcfor{font-size:10.5px; opacity:.95; text-shadow:0 1px 5px rgba(0,0,0,.6);}
  .gcbody{padding:10px 12px 12px;}
  .gcprog{display:flex; align-items:center; gap:8px; margin-bottom:7px;}
  .gcbar{flex:1; height:7px; border-radius:999px; background:#EDE7D5; overflow:hidden;}
  .gcbar i{display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,#2F9E5F,#57C07D);}
  .gcpct{font-size:11px; font-weight:800; color:#1F7A47; flex:none;}
  .gcmeta{display:flex; flex-wrap:wrap; gap:5px 12px; font-size:10px; color:#8C8A80;}
  .gcmeta b{color:#2A2A26; font-weight:700;}
  .gcmeta .gyou{color:#1F7A47; font-weight:700;}
  .gcopen{margin-top:9px; width:100%; font:inherit; font-size:11px; font-weight:800; padding:9px; border-radius:9px; border:none; background:#E9F7EF; color:#1F7A47; cursor:pointer;}
  .gcarch{opacity:.85;} .gcarch .gcopen{background:#F1EDE0; color:#6B6754;}
  .gfilters{display:flex; gap:6px; overflow-x:auto; padding:0 14px 10px; scrollbar-width:none;} .gfilters::-webkit-scrollbar{display:none;}
  .gfilters button{flex:none; font:inherit; font-size:10px; font-weight:700; padding:6px 11px; border-radius:999px; border:1.2px solid #E8E3D5; background:#fff; color:#2A2A26; cursor:pointer;}
  .gfilters button.on{background:#2F9E5F; border-color:#2F9E5F; color:#fff;}
  /* ---- group page ---- */
  .ghero{position:relative; min-height:196px; display:flex; flex-direction:column; justify-content:flex-end; padding:14px; color:#fff; flex:none;}
  .ghero:after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.06) 20%,rgba(0,0,0,.62));}
  .ghero > *{position:relative; z-index:1;}
  .ghero .gdedic{align-self:flex-start; font-size:8.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; background:rgba(0,0,0,.45); border:1px solid rgba(255,255,255,.45); border-radius:999px; padding:4px 11px; margin-bottom:7px; backdrop-filter:blur(2px);}
  .ghero h3{margin:0; font-size:23px; font-weight:800; line-height:1.05; text-shadow:0 2px 10px rgba(0,0,0,.6);}
  .ghero .gtrib{font-size:11.5px; line-height:1.5; margin-top:6px; opacity:.96; text-shadow:0 1px 6px rgba(0,0,0,.65);}
  .ghero .grel{font-size:9.5px; margin-top:6px; opacity:.85;}
  .gpr{padding:14px; border-bottom:1px solid #EDE7D5;}
  .gprbig{display:flex; align-items:baseline; gap:7px;}
  .gprbig b{font-size:26px; font-weight:800; color:#1F7A47; font-variant-numeric:tabular-nums;}
  .gprbig span{font-size:11px; color:#8C8A80; font-weight:600;}
  .gkbar{height:10px; border-radius:999px; background:#EDE7D5; overflow:hidden; margin:9px 0 5px;}
  .gkbar i{display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,#2F9E5F,#57C07D);}
  .gklab{display:flex; justify-content:space-between; font-size:9.5px; color:#8C8A80; font-weight:700;}
  .gtiles{display:flex; gap:7px; margin-top:11px;}
  .gtile{flex:1; background:#FFFDF6; border:1px solid #EDE7D5; border-radius:10px; padding:8px 4px; text-align:center;}
  .gtile b{display:block; font-size:13.5px; font-weight:800; color:#2A2A26; font-variant-numeric:tabular-nums;}
  .gtile small{display:block; font-size:8px; text-transform:uppercase; letter-spacing:.05em; color:#8C8A80; margin-top:2px; line-height:1.3;}
  .gtile.you b{color:#1F7A47;}
  .greadbtn{display:block; width:calc(100% - 28px); margin:13px 14px 0; font:inherit; font-size:14px; font-weight:800; letter-spacing:.04em; padding:14px; border-radius:13px; border:none; background:#2F9E5F; color:#fff; cursor:pointer; box-shadow:0 10px 22px -10px rgba(31,122,71,.55);}
  .gtwo{display:flex; gap:8px; align-items:center; justify-content:center; font-size:9.5px; color:#8C8A80; margin:9px 14px 0;}
  .gtwo i{flex:1; height:1px; background:#EDE7D5;}
  .gchar{margin:12px 14px 0; background:linear-gradient(165deg,#FFF9EA,#F7EDD2); border:1.2px solid #E9D9A8; border-radius:15px; padding:12px;}
  .gchar .gctag{font-size:8.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:#8A6B1E; margin-bottom:8px;}
  .gcharrow{display:flex; gap:10px; align-items:center;}
  .gclogo{flex:none; width:38px; height:38px; border-radius:10px; background:#fff; border:1px solid #E9D9A8; display:flex; align-items:center; justify-content:center; font-size:17px;}
  .gcharrow b{display:block; font-size:13px; font-weight:800; color:#3A2E10;}
  .gcharrow small{display:block; font-size:10px; color:#6B5320; line-height:1.4;}
  .gverif{display:inline-flex; align-items:center; gap:4px; font-size:8.5px; font-weight:800; color:#1F7A47; margin-top:3px;}
  .gcharbar{height:7px; border-radius:999px; background:rgba(120,90,20,.15); overflow:hidden; margin:10px 0 4px;}
  .gcharbar i{display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,#2F9E5F,#57C07D);}
  .gcharsum{font-size:10px; color:#6B5320;} .gcharsum b{color:#1F7A47;}
  .gdonbtn{width:100%; margin-top:10px; font:inherit; font-size:12px; font-weight:800; padding:11px; border-radius:10px; border:1.5px solid #2F9E5F; background:#fff; color:#1F7A47; cursor:pointer;}
  .gsecl{font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; font-weight:800; color:#B4862E; margin:16px 14px 8px;}
  .gfeed{margin:0 14px;}
  .gfeed .gfi{display:flex; gap:8px; align-items:center; font-size:11px; color:#5A5648; padding:6px 0; border-bottom:1px dashed #EDE7D5;}
  .gfeed .gfi:last-child{border-bottom:none;}
  .gfeed .gfd{flex:none; width:7px; height:7px; border-radius:50%; background:#57C07D;}
  .gfeed .gfd.money{background:#E9C46A;} .gfeed .gfd.mile{background:#FF9E2E;}
  .glb{margin:0 14px; background:#fff; border:1.2px solid #E8E3D5; border-radius:13px; overflow:hidden;}
  .glb .glbrow{display:flex; align-items:center; gap:9px; padding:8px 12px; font-size:11px; border-bottom:1px solid #F1EDE0;}
  .glb .glbrow:last-child{border-bottom:none;}
  .glb .glbrank{flex:none; width:18px; font-weight:800; color:#8C8A80; text-align:center;}
  .glb .glbrow.r1 .glbrank{color:#D9A62E;}
  .glb .glbname{flex:1; font-weight:600;}
  .glb .glbrow.you{background:#F0FAF4;} .glb .glbrow.you .glbname{font-weight:800; color:#1F7A47;}
  .glb .glbval{font-weight:800; color:#2A2A26; font-variant-numeric:tabular-nums;}
  .gshare{display:flex; gap:8px; margin:14px;}
  .gshare button{flex:1; font:inherit; font-size:11.5px; font-weight:800; padding:11px; border-radius:10px; cursor:pointer;}
  .gshbtn{border:none; background:#2A2A26; color:#fff;}
  .gcpbtn{background:#fff; border:1.5px solid #E8E3D5; color:#2A2A26;}
  /* ---- overlays (read / donate / final) ---- */
  .gov{position:absolute; inset:0; z-index:40; background:var(--cream); display:flex; flex-direction:column; overflow-y:auto; scrollbar-width:none;}
  .gov::-webkit-scrollbar{display:none;}
  .gov.dark{background:linear-gradient(180deg,#0B1220 0%,#12203A 60%,#1A2C48 100%); color:#F2EDDD;}
  .govhd{display:flex; align-items:center; gap:9px; padding:12px 14px; flex:none;}
  .govhd .gback{width:30px; height:30px; border-radius:50%; border:none; background:#F1EDE0; color:#8C8A80; font-size:17px; cursor:pointer;}
  .gov.dark .govhd .gback{background:rgba(255,253,246,.12); color:#F2EDDD;}
  .govhd b{font-size:14.5px; font-weight:800;}
  .govhd small{display:block; font-size:9.5px; color:#8C8A80;} .gov.dark .govhd small{color:#9FB2CC;}
  .gassign{margin:2px 14px 10px; background:#E9F7EF; border:1.2px solid #BFE6CE; border-radius:12px; padding:10px 12px; font-size:11px; color:#1F7A47; line-height:1.45;}
  .gassign b{font-weight:800;}
  .gpage{margin:0 14px; background:#FFFDF6; border:1.2px solid #E4D9BC; border-radius:14px; padding:16px 14px; box-shadow:0 6px 16px rgba(120,100,40,.08);}
  .gpage .gpar{font-family:"qpc-hafs",serif; font-size:17.5px; line-height:2.15; text-align:justify; direction:rtl; color:#26251E;}
  .gpage .gpnum{text-align:center; font-size:9.5px; color:#B4862E; font-weight:800; letter-spacing:.14em; margin-top:10px;}
  .gsubmit{display:block; width:calc(100% - 28px); margin:13px 14px; font:inherit; font-size:13px; font-weight:800; padding:13px; border-radius:12px; border:none; background:#2F9E5F; color:#fff; cursor:pointer;}
  .gaskrow{display:flex; gap:8px; margin:0 14px 14px;}
  .gaskrow button{flex:1; font:inherit; font-size:11.5px; font-weight:800; padding:12px 6px; border-radius:11px; cursor:pointer;}
  .gagain{border:none; background:#E9F7EF; color:#1F7A47;}
  .gcont{border:none; background:#2F9E5F; color:#fff;}
  .gdone-note{margin:0 14px 10px; text-align:center; font-size:11px; color:#1F7A47; font-weight:700;}
  /* donate stages */
  .gdon{padding:0 15px 18px;}
  .gdon h5{margin:8px 0 4px; font-size:12.5px; font-weight:800; color:#F5E7B8;}
  .gdon p{margin:0 0 10px; font-size:10.5px; line-height:1.5; color:#C7D2E2;}
  .gamts{display:grid; grid-template-columns:repeat(4,1fr); gap:7px; margin-bottom:6px;}
  .gamts button{font:inherit; font-size:13px; font-weight:800; padding:12px 4px; border-radius:11px; cursor:pointer; background:rgba(255,253,246,.07); border:1.5px solid rgba(255,253,246,.18); color:#EAF1FA;}
  .gamts button.on{background:rgba(47,158,95,.22); border-color:#4CB878; color:#EAF6EE;}
  .gqcrow{display:flex; gap:7px; margin-bottom:6px;}
  .gqcrow button{flex:1; font:inherit; font-size:11px; font-weight:800; padding:9px 4px; border-radius:10px; cursor:pointer; background:rgba(255,253,246,.07); border:1.5px solid rgba(255,253,246,.18); color:#EAF1FA;}
  .gqcrow button.on{background:rgba(245,231,184,.18); border-color:#F5E7B8; color:#FBEFC6;}
  .gfee{display:flex; align-items:center; gap:9px; padding:9px 11px; border-radius:10px; background:rgba(255,253,246,.06); border:1px solid rgba(255,253,246,.14); font-size:10.5px; color:#DCE5F0; margin-bottom:7px; cursor:pointer;}
  .gfee .gchk{flex:none; width:17px; height:17px; border-radius:5px; border:1.5px solid rgba(255,253,246,.4); display:flex; align-items:center; justify-content:center; font-size:11px; color:#0B1220;}
  .gfee.on .gchk{background:#7ED9A2; border-color:#7ED9A2;}
  .gtotal{margin-top:9px; background:rgba(255,253,246,.06); border:1px solid rgba(245,231,184,.35); border-radius:12px; padding:11px 13px;}
  .gtotal .gtr{display:flex; justify-content:space-between; font-size:11px; color:#C7D2E2; padding:2.5px 0;}
  .gtotal .gtr b{color:#F2EDDD; font-variant-numeric:tabular-nums;}
  .gtotal .gtr.sum{border-top:1px solid rgba(255,253,246,.18); margin-top:6px; padding-top:8px; font-weight:800; color:#F5E7B8;}
  .gtotal .gtr.sum b{color:#F5E7B8; font-size:13.5px;}
  .gnamep{display:flex; gap:6px; margin:8px 0 2px;}
  .gnamep button{flex:1; font:inherit; font-size:9.5px; font-weight:800; padding:8px 3px; border-radius:9px; cursor:pointer; background:rgba(255,253,246,.07); border:1.2px solid rgba(255,253,246,.18); color:#DCE5F0;}
  .gnamep button.on{background:rgba(47,158,95,.22); border-color:#4CB878;}
  .gpay{display:block; width:100%; margin-top:12px; font:inherit; font-size:13.5px; font-weight:800; padding:14px; border-radius:12px; border:none; background:#2F9E5F; color:#fff; cursor:pointer;}
  .gskip{display:block; width:100%; margin-top:8px; font:inherit; font-size:11px; font-weight:700; padding:8px; border-radius:10px; border:none; background:none; color:#9FB2CC; cursor:pointer;}
  .gsecure{text-align:center; font-size:9.5px; color:#9FB2CC; margin-top:8px;}
  /* final page */
  .gfinhero{text-align:center; padding:18px 16px 4px;}
  .gfinhero .gfimg{width:74px; height:74px; border-radius:50%; margin:0 auto 9px; border:2.5px solid #F5E7B8; box-shadow:0 0 22px rgba(245,222,150,.4); background-size:cover; background-position:center;}
  .gfinhero h4{margin:0; font-size:16px; color:#F6EFDC;}
  .gfinhero p{margin:6px auto 0; font-size:11.5px; line-height:1.55; color:#C7D2E2; max-width:270px;}
  .gflow{display:flex; align-items:center; justify-content:center; gap:6px; margin:16px 12px 4px;}
  .gflow .gfnode{flex:1; max-width:96px; background:rgba(255,253,246,.06); border:1px solid rgba(245,231,184,.3); border-radius:12px; padding:9px 5px; text-align:center;}
  .gflow .gfnode b{display:block; font-size:14px; font-weight:800; color:#F5E7B8; font-variant-numeric:tabular-nums;}
  .gflow .gfnode small{display:block; font-size:7.5px; text-transform:uppercase; letter-spacing:.06em; color:#9FB2CC; margin-top:2px; line-height:1.35;}
  .gflow .gfarr{flex:none; color:#F5E7B8; font-size:13px; animation:gfpulse 1.6s ease-in-out infinite;}
  @keyframes gfpulse{0%,100%{opacity:.35; transform:translateX(0);}50%{opacity:1; transform:translateX(3px);}}
  .gfinbtns{padding:14px 14px 18px; display:flex; flex-direction:column; gap:8px;}
  .gfinbtns .b1{font:inherit; font-size:12.5px; font-weight:800; padding:13px; border-radius:12px; border:none; background:#2F9E5F; color:#fff; cursor:pointer;}
  .gfinbtns .b2{font:inherit; font-size:11.5px; font-weight:800; padding:11px; border-radius:11px; border:1.5px solid rgba(245,231,184,.5); background:none; color:#F5E7B8; cursor:pointer;}
  .gfinbtns .b3{font:inherit; font-size:10.5px; font-weight:700; padding:7px; border:none; background:none; color:#9FB2CC; cursor:pointer;}
  /* share sheet */
  .gsheet{position:absolute; left:0; right:0; bottom:0; z-index:60; background:#fff; border-radius:18px 18px 0 0; padding:14px 14px 18px; box-shadow:0 -12px 34px rgba(0,0,0,.25);}
  .gsheet h5{margin:0 0 4px; font-size:13.5px; font-weight:800; color:#2A2A26;}
  .gsheet .glink{display:flex; gap:7px; margin:9px 0;}
  .gsheet .glink code{flex:1; background:#F7F4E9; border:1.2px dashed #D9CFA9; border-radius:9px; padding:9px 10px; font-size:10.5px; color:#6B6754; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .gsheet .glink button{flex:none; font:inherit; font-size:10.5px; font-weight:800; padding:9px 13px; border-radius:9px; border:none; background:#2F9E5F; color:#fff; cursor:pointer;}
  .gprev{background:#EAE6F2; border-radius:11px; padding:9px; display:flex; gap:9px; align-items:center;}
  .gprev .gpimg{flex:none; width:52px; height:52px; border-radius:8px; background-size:cover; background-position:center;}
  .gprev b{display:block; font-size:11px; color:#2A2A26;}
  .gprev small{display:block; font-size:9.5px; color:#6B6754; line-height:1.4;}
  .gprev .gpurl{font-size:8.5px; color:#8C8A80; text-transform:uppercase; margin-top:2px;}
  .gsheetnote{font-size:9.5px; color:#8C8A80; line-height:1.5; margin-top:8px;}
  /* wizard */
  .gwiz{padding:0 15px 16px; flex:1; display:flex; flex-direction:column;}
  .gwdots{display:flex; gap:5px; margin:2px 0 14px;}
  .gwdots i{flex:1; height:4px; border-radius:999px; background:#EDE7D5;}
  .gwdots i.on{background:#2F9E5F;}
  .gwiz h4{margin:0 0 6px; font-size:17px; font-weight:800; line-height:1.2;}
  .gwiz .gwsub{font-size:11px; color:#8C8A80; line-height:1.5; margin:0 0 14px;}
  .gwopt{display:flex; align-items:center; gap:11px; width:100%; text-align:left; font:inherit; background:#fff; border:1.5px solid #E8E3D5; border-radius:13px; padding:12px; margin-bottom:9px; cursor:pointer;}
  .gwopt.on{border-color:#2F9E5F; background:#F0FAF4;}
  .gwopt .gwic{flex:none; width:36px; height:36px; border-radius:50%; background:#E9F7EF; display:flex; align-items:center; justify-content:center; font-size:16px;}
  .gwopt b{display:block; font-size:12.5px; font-weight:800;}
  .gwopt small{display:block; font-size:10px; color:#8C8A80; margin-top:1px; line-height:1.4;}
  .gwfield{margin-bottom:10px;}
  .gwfield label{display:block; font-size:9.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#B4862E; margin-bottom:5px;}
  .gwfield .gwval{background:#fff; border:1.2px solid #E8E3D5; border-radius:10px; padding:10px 12px; font-size:12px; color:#2A2A26;}
  .gwfield .gwval.ph{color:#B5AD97;}
  .gwchips{display:flex; flex-wrap:wrap; gap:6px;}
  .gwchips button{font:inherit; font-size:10.5px; font-weight:700; padding:7px 12px; border-radius:999px; border:1.2px solid #E8E3D5; background:#fff; cursor:pointer;}
  .gwchips button.on{background:#2F9E5F; border-color:#2F9E5F; color:#fff;}
  .gwchar{display:flex; align-items:center; gap:10px; background:#fff; border:1.5px solid #E8E3D5; border-radius:12px; padding:10px 12px; margin-bottom:8px; cursor:pointer;}
  .gwchar.on{border-color:#2F9E5F; background:#F0FAF4;}
  .gwchar .gwcl{flex:none; width:34px; height:34px; border-radius:9px; background:#F7F4E9; display:flex; align-items:center; justify-content:center; font-size:15px;}
  .gwchar b{display:block; font-size:11.5px; font-weight:800;}
  .gwchar small{display:block; font-size:9.5px; color:#8C8A80;}
  .gwchar .gwver{margin-left:auto; flex:none; font-size:8.5px; font-weight:800; color:#1F7A47;}
  .gwnav{margin-top:auto; display:flex; gap:8px; padding-top:12px;}
  .gwback{flex:none; font:inherit; font-size:11.5px; font-weight:800; padding:12px 16px; border-radius:11px; background:#F1EDE0; border:none; color:#6B6754; cursor:pointer;}
  .gwnext{flex:1; font:inherit; font-size:12.5px; font-weight:800; padding:12px; border-radius:11px; border:none; background:#2F9E5F; color:#fff; cursor:pointer;}
  .gwprev-note{font-size:9px; color:#8C8A80; text-align:center; margin-top:8px;}
  .pagetab{font:inherit; text-align:left; cursor:pointer; border:1.5px solid var(--line-w); background:var(--card); color:var(--ink); border-radius:12px; padding:9px 14px 8px; flex:1 1 150px; max-width:250px; transition:border-color .15s, background .15s;}
  .pagetab small{display:block; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2); font-weight:700; margin-bottom:2px;}
  .pagetab b{font-size:13px; font-weight:700; line-height:1.25; display:block;}
  .pagetab:hover{border-color:var(--accent);}
  .pagetab[aria-pressed="true"]{border-color:var(--accent); background:var(--accent);}
  .pagetab[aria-pressed="true"] small{color:#EAF7EF;}
  .pagetab[aria-pressed="true"] b{color:#fff;}
  @media (max-width:700px){ .pagetab{flex:1 1 46%; max-width:none; padding:7px 10px;} }