:root{
    --sky:#EAF3FA; --sky-2:#DCEBF7; --card:#FFFFFF;
    --line:#D3E4F1; --line-soft:#E5F0F8;
    --ink:#12354F; --body:#41637D; --muted:#7FA0B8;
    --blue:#2E86C8; --blue-hi:#5FB0E8; --blue-deep:#1B5E8F;
    --wash:#F3F9FD; --gold:#C79A3E; --rose:#C0736B; --green:#3E8F73;
    --tint:#E7F3FC; --tint-line:#B9DAF2; --tint-deep:#CFE6F8;
    --r:16px; --nav:124px;
  }
  *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
  html,body{margin:0;padding:0}
  body{
    background:radial-gradient(130% 55% at 50% 0%, #FFF 0%, rgba(255,255,255,0) 55%),
               linear-gradient(180deg,var(--sky) 0%, var(--sky-2) 100%);
    color:var(--body);
    font-family:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
    font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;min-height:100dvh
  }
  .wrap{zoom:var(--zoom,1);max-width:520px;margin:0 auto;
        padding:calc(24px + env(safe-area-inset-top)) 18px calc(var(--nav) + 34px + env(safe-area-inset-bottom))}

  .eyebrow{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.22em;
           text-transform:uppercase;color:var(--blue);margin:0 0 16px;text-align:center}

  /* hero */
  .hero{text-align:center;padding:2px 0 16px}
  .streak-num{font-family:"Amiri",Georgia,serif;font-weight:700;font-size:clamp(58px,20vw,88px);
              line-height:.9;color:var(--blue-deep);letter-spacing:-.02em;display:block}
  .streak-num .of{font-size:.34em;color:var(--muted);font-weight:400;letter-spacing:0}
  .streak-lbl{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.18em;
              text-transform:uppercase;color:var(--muted);margin-top:10px}
  .hero-meta{display:flex;justify-content:center;gap:24px;margin-top:14px;font-size:12px;color:var(--muted)}
  .hero-meta b{color:var(--ink);font-weight:500;font-family:"IBM Plex Mono",monospace}

  /* tasbih */
  .tasbih{margin:4px 0 0;padding:14px 4px 10px}
  .tasbih-row{display:flex;align-items:center;justify-content:center;margin:0 0 13px}
  .tasbih-row:last-child{margin-bottom:0}
  .seg{flex:1 1 auto;height:1.5px;background:#CFE2F0;min-width:5px;border-radius:2px;transition:background .45s}
  .seg.lit{background:linear-gradient(90deg,var(--blue-hi),var(--blue),var(--blue-hi))}
  .bead{flex:0 0 auto;width:30px;height:30px;border-radius:50%;border:1.5px solid #CFE2F0;background:#FFF;
        display:grid;place-items:center;font-family:"IBM Plex Mono",monospace;font-size:10px;color:#9DBBD1;
        transition:transform .3s cubic-bezier(.34,1.56,.64,1),background .4s,border-color .4s,color .4s,box-shadow .4s}
  .bead.done{background:#FFF;border-color:var(--tint-line);color:var(--muted);font-weight:400;box-shadow:inset 0 0 0 3.5px var(--tint)}
  .bead.full{background:radial-gradient(circle at 32% 28%, var(--blue-hi), var(--blue) 58%, var(--blue-deep) 100%);border-color:var(--blue);color:#FFF;font-weight:500;box-shadow:0 0 0 3px rgba(0,0,0,.06),0 2px 9px rgba(0,0,0,.18)}
  /* zikir: 10x lengkap = hijau, 100x lengkap = merah */
  .bead.full10{background:radial-gradient(circle at 32% 28%,#7FD3A4,#3FA76E 58%,#1E7248 100%);
               border-color:#3FA76E;color:#FFF;font-weight:500;
               box-shadow:0 0 0 3px rgba(63,167,110,.16),0 2px 9px rgba(30,114,72,.28)}
  .bead.full100{background:radial-gradient(circle at 32% 28%,#E58B7C,#C4503C 58%,#8E3226 100%);
                border-color:#C4503C;color:#FFF;font-weight:500;
                box-shadow:0 0 0 3px rgba(196,80,60,.16),0 2px 9px rgba(142,50,38,.28)}
  .seg.lit.hijau{background:linear-gradient(90deg,#7FD3A4,#3FA76E,#7FD3A4)}
  .seg.lit.merah{background:linear-gradient(90deg,#E58B7C,#C4503C,#E58B7C)}
  .legend i.g{background:#3FA76E}
  .legend i.m{background:#C4503C}
  .bead.today{border-color:var(--blue);border-style:dashed;color:var(--blue);background:#FFF;
              animation:breathe 2.6s ease-in-out infinite}
  .bead.pop{animation:pop .5s cubic-bezier(.34,1.56,.64,1)}
  @keyframes breathe{0%,100%{box-shadow:0 0 0 0 rgba(46,134,200,.22)}50%{box-shadow:0 0 0 7px rgba(46,134,200,0)}}
  @keyframes pop{0%{transform:scale(1)}45%{transform:scale(1.35)}100%{transform:scale(1)}}
  .legend{display:flex;justify-content:center;gap:16px;font-size:11px;color:var(--muted);margin:14px 0 0;
          font-family:"IBM Plex Mono",monospace}
  .legend i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:5px;vertical-align:middle}
  .legend .p{background:#7CBCE8} .legend .f{background:var(--blue-deep)}
  .tasbih-note{text-align:center;font-size:12px;color:var(--muted);margin:14px 0 18px;line-height:1.6;padding:0 10px}

  .banner{border-radius:var(--r);padding:14px 16px;margin:0 0 16px;font-size:13.5px;line-height:1.55;
          border:1px solid var(--line);background:var(--card)}
  .banner.win{border-color:#E2CE96;background:linear-gradient(180deg,#FEFAF0,#FFF)} .banner.win b{color:var(--gold)}
  .banner.broke{border-color:#EBCFCB;background:#FEF7F6} .banner.broke b{color:var(--rose)}

  /* cards */
  .card{background:var(--card);border:1px solid var(--line-soft);border-radius:var(--r);
        padding:16px;margin:0 0 14px;box-shadow:0 1px 2px rgba(18,53,79,.04)}
  .card-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
  .card-title{font-family:"Amiri",serif;font-size:21px;font-weight:700;margin:0;color:var(--ink)}
  .card-sub{font-size:12px;color:var(--muted);margin:3px 0 13px}
  .count{font-family:"IBM Plex Mono",monospace;font-size:13px;color:var(--blue);white-space:nowrap}
  .stamp{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;
         color:var(--blue);background:var(--wash);border:1px solid var(--line-soft);padding:4px 9px;border-radius:999px}
  .bar{height:3px;background:#E3EFF8;border-radius:2px;overflow:hidden;margin:12px 0 13px}
  .segbar{display:grid;grid-template-columns:repeat(8,1fr);gap:6px;margin:12px 0 14px}
  .segbar i{height:10px;border-radius:999px;background:var(--line-soft);display:block;
            border:1px solid var(--line)}
  .segbar i.on{background:#C4503C;border-color:#C4503C}
  .segbar i.all{background:#3FA76E;border-color:#3FA76E}
  .bar > i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--blue-hi),var(--blue-deep));
           border-radius:2px;transition:width .5s}

  ul.list{list-style:none;margin:0;padding:0}
  ul.list li{margin:0 0 7px} ul.list li:last-child{margin-bottom:0}
  .item{display:flex;align-items:center;gap:13px;width:100%;text-align:left;background:var(--wash);
        border:1px solid #E9F3FA;border-radius:12px;padding:13px;color:var(--ink);font:inherit;font-size:15px;
        cursor:pointer;transition:background .2s,border-color .2s}
  .item:hover{border-color:var(--line)}
  .item:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
  .tick{flex:0 0 auto;width:22px;height:22px;border-radius:50%;border:1.5px solid #B6D3E7;background:#FFF;
        display:grid;place-items:center;transition:background .25s,border-color .25s}
  .tick svg{width:12px;height:12px;stroke:#FFF;stroke-width:2.6;fill:none;stroke-linecap:round;stroke-linejoin:round;
            stroke-dasharray:16;stroke-dashoffset:16;transition:stroke-dashoffset .3s ease .05s}
  .item.on{background:#E7F3FC;border-color:#B9DAF2}
  .item.on .lbl{color:var(--blue-deep)}
  .item.on .tick{background:var(--blue);border-color:var(--blue)}
  .item.on .tick svg{stroke-dashoffset:0}
  .lbl{flex:1 1 auto}
  .lbl small{display:block;font-size:11.5px;color:var(--muted);margin-top:2px;font-weight:400}
  .item.small{font-size:14px;padding:10px 12px;background:#FFF}

  /* zikir */
  .zk{display:flex;gap:12px;align-items:flex-start;background:var(--wash);border:1px solid #E9F3FA;
      border-radius:14px;padding:13px;margin:0 0 9px}
  .zk.on{background:#E7F3FC;border-color:#B9DAF2}
  .zk-no{flex:0 0 auto;width:24px;height:24px;border-radius:50%;background:var(--blue-deep);color:#FFF;
         font-family:"IBM Plex Mono",monospace;font-size:11px;display:grid;place-items:center;margin-top:2px}
  .zk-body{flex:1 1 auto;min-width:0}
  .zk-ar{font-family:"Amiri",serif;font-size:21px;line-height:1.9;color:var(--ink);direction:rtl;text-align:right;
         margin:0 0 4px;word-spacing:2px}
  .zk-tr{font-size:14px;color:var(--ink);font-weight:500;margin:0}
  .zk-mean{font-size:11.5px;color:var(--muted);margin:2px 0 0;line-height:1.5}
  .zk-foot{display:flex;align-items:center;gap:8px;margin-top:10px}
  .zk-target{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--blue);background:#FFF;
             border:1px solid var(--line);border-radius:999px;padding:3px 9px}
  .zk-prog{flex:1 1 auto;height:3px;background:#DCEBF7;border-radius:2px;overflow:hidden}
  .zk-prog i{display:block;height:100%;background:var(--blue);width:0;transition:width .3s}
  /* kiraan capai 10 -> hijau, capai 100 -> merah */
  .zk-foot .zk-target.capai10{color:#1B6242;background:#E2F4EA;border-color:#7FC5A0;font-weight:600;
                              box-shadow:0 0 0 3px rgba(46,145,99,.14)}
  .zk-foot .zk-target.capai100{color:#9C2F26;background:#FBEAE7;border-color:#E3A79E;font-weight:600;
                               box-shadow:0 0 0 3px rgba(176,60,48,.14)}
  .zk-foot .zk-prog.capai10{background:#D9EFE3}
  .zk-foot .zk-prog.capai10 i{background:#2E9163}
  .zk-foot .zk-prog.capai100{background:#F6DCD8}
  .zk-foot .zk-prog.capai100 i{background:#B03C30}
  .zk-btn{border:1px solid var(--line);background:#FFF;color:var(--blue-deep);border-radius:10px;
          padding:7px 12px;font:inherit;font-size:12.5px;cursor:pointer;white-space:nowrap}
  .zk-btn:hover{border-color:var(--blue)}
  .zk-btn.done{background:var(--blue);border-color:var(--blue);color:#FFF}

  .segctl{display:grid;grid-template-columns:1fr 1fr;gap:4px;background:var(--wash);border:1px solid var(--line-soft);
          border-radius:12px;padding:4px;margin:0 0 14px}
  .segctl button{border:0;background:transparent;border-radius:9px;padding:10px 6px;font:inherit;font-size:13.5px;
                 color:var(--muted);cursor:pointer;transition:background .2s,color .2s}
  .segctl button.on{background:var(--blue);color:#FFF;font-weight:600;box-shadow:0 1px 4px rgba(46,134,200,.3)}
  .zk-alt{font-family:"IBM Plex Mono",monospace;font-size:10.5px;color:var(--muted);margin-top:8px}
  .zk-alt b{color:var(--blue-deep);font-weight:500}
  .zk-fad{margin:10px 0 0;border-top:1px solid var(--line-soft);padding-top:10px}
  .zk-fad summary{list-style:none;cursor:pointer;font-size:12.5px;color:var(--blue-deep);font-weight:500}
  .zk-fad summary::-webkit-details-marker{display:none}
  .zk-fad ol{margin:9px 0 0;padding-left:18px;font-size:12.5px;color:var(--body);line-height:1.65}
  .zk-fad li{margin-bottom:4px}
  .zk-nota{font-size:11.5px;color:var(--gold);margin:8px 0 0}
  .fad-teks{margin:9px 0 0;font-size:12.5px;line-height:1.7;color:var(--body)}
  .item-fad{margin:5px 0 10px}
  .fad-senarai{margin:8px 0 0;padding-left:18px;font-size:12.5px;line-height:1.7;color:var(--body)}
  .fad-senarai li{margin-bottom:4px}

  /* teks Arab: Amiri Quran mengendalikan tanda baca al-Quran dengan lebih tepat */
  .hz-ar, .wr-ar, .doa-ar, .qp-ar, .zk-ar, .l2-ar, .life-ar, .c-ar{
    font-family:"Amiri Quran","Amiri",serif;
    font-feature-settings:"liga" 1,"calt" 1,"ccmp" 1,"mark" 1,"mkmk" 1;
    text-rendering:optimizeLegibility;
    -webkit-font-smoothing:antialiased;
  }

  /* wirid */
  [hidden]{display:none !important}
  .wr-head{display:flex;align-items:baseline;gap:10px;margin:22px 0 10px;padding:0 2px}
  .wr-head b{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;
             color:#FFF;background:var(--blue-deep);border-radius:999px;padding:4px 10px;flex:0 0 auto}
  .wr-head.t1 b{background:#2E8B57}
  .wr-head.t2 b{background:#2E6FC8}
  .wr-head.t3 b{background:#C8792E}
  .wr-head.t4 b{background:#7B4FC0}
  .wr-head.t5 b{background:#157F72}
  .wr-head.t6 b{background:#8A5A2B}
  .wr-card[data-t="1"]{border-left:4px solid #2E8B57}
  .wr-card[data-t="2"]{border-left:4px solid #2E6FC8}
  .wr-card[data-t="3"]{border-left:4px solid #C8792E}
  .wr-card[data-t="4"]{border-left:4px solid #7B4FC0}
  .wr-card[data-t="5"]{border-left:4px solid #157F72}
  .wr-card[data-t="6"]{border-left:4px solid #8A5A2B}
  .wr-card[data-t="1"] .wr-no{background:#2E8B57}
  .wr-card[data-t="2"] .wr-no{background:#2E6FC8}
  .wr-card[data-t="3"] .wr-no{background:#C8792E}
  .wr-card[data-t="4"] .wr-no{background:#7B4FC0}
  .wr-card[data-t="5"] .wr-no{background:#157F72}
  .wr-card[data-t="6"] .wr-no{background:#8A5A2B}
  .wr-card[data-t="1"] .wr-kali:not(.one){background:#2E8B57}
  .wr-card[data-t="2"] .wr-kali:not(.one){background:#2E6FC8}
  .wr-card[data-t="3"] .wr-kali:not(.one){background:#C8792E}
  .wr-card[data-t="4"] .wr-kali:not(.one){background:#7B4FC0}
  .wr-card[data-t="5"] .wr-kali:not(.one){background:#157F72}
  .wr-card[data-t="6"] .wr-kali:not(.one){background:#8A5A2B}
  .wr-card[data-t="1"] .wr-fad b{color:#2E8B57}
  .wr-card[data-t="2"] .wr-fad b{color:#2E6FC8}
  .wr-card[data-t="3"] .wr-fad b{color:#C8792E}
  .wr-card[data-t="4"] .wr-fad b{color:#7B4FC0}
  .wr-card[data-t="5"] .wr-fad b{color:#157F72}
  .wr-card[data-t="6"] .wr-fad b{color:#8A5A2B}
  .wr-head span{font-family:"Amiri",serif;font-size:19px;font-weight:700;color:var(--ink)}
  .wr-sub{font-size:12px;color:var(--muted);margin:0 2px 12px;line-height:1.55}
  .wr-card{background:var(--card);border:1px solid var(--line-soft);border-radius:var(--r);padding:16px;
           margin:0 0 12px;box-shadow:0 1px 2px rgba(18,53,79,.04)}
  .wr-card.on{border-color:#B9DAF2;background:linear-gradient(180deg,#F5FAFE,#FFF)}
  .wr-top{display:flex;align-items:flex-start;gap:11px;margin-bottom:11px}
  .wr-no{flex:0 0 auto;width:24px;height:24px;border-radius:50%;background:var(--blue-deep);color:#FFF;
         font-family:"IBM Plex Mono",monospace;font-size:11px;display:grid;place-items:center;margin-top:2px}
  .wr-title{flex:1 1 auto;font-family:"Amiri",serif;font-size:19px;font-weight:700;color:var(--ink);margin:0;line-height:1.3}
  .wr-kali{flex:0 0 auto;font-family:"IBM Plex Mono",monospace;font-size:11px;color:#FFF;background:var(--blue);
           border-radius:999px;padding:4px 11px;margin-top:2px}
  .wr-kali.one{background:var(--wash);color:var(--muted);border:1px solid var(--line-soft)}
  .wr-ar{font-family:"Amiri",serif;font-size:21px;line-height:2.05;color:var(--ink);direction:rtl;text-align:right;margin:0}
  .wr-rumi{font-size:12.5px;color:var(--blue-deep);font-style:italic;margin:10px 0 0;line-height:1.6}
  .wr-ms{font-size:13px;color:var(--body);line-height:1.65;margin:11px 0 0;padding-top:11px;border-top:1px solid var(--line-soft)}
  .wr-fad{background:var(--wash);border-radius:11px;padding:11px 12px;margin:11px 0 0;font-size:12.5px;
          color:var(--body);line-height:1.6}
  .wr-fad b{display:block;font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.14em;
            text-transform:uppercase;color:var(--blue);margin-bottom:5px;font-weight:500}
  .wr-dalil{font-family:"IBM Plex Mono",monospace;font-size:10.5px;color:var(--muted);margin:9px 0 0;line-height:1.5}
  .wr-nota{font-size:12px;color:#8A6B22;background:#FFF8E8;border:1px solid #EBD9A8;border-radius:10px;
           padding:10px 11px;margin:10px 0 0;line-height:1.55}
  .wr-amaran{font-size:12px;color:#8A4A44;background:#FEF6F5;border:1px solid #EBCFCB;border-radius:10px;
             padding:10px 11px;margin:10px 0 0;line-height:1.55}
  .wr-semak{font-size:12px;color:#3A5A6E;background:#F2F8FB;border:1px solid #CFE0EA;border-radius:10px;
            padding:10px 11px;margin:9px 0 0;line-height:1.55}
  .wr-semak b{display:block;font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.14em;
              text-transform:uppercase;margin-bottom:4px;color:#5C87A0}
  .wr-amaran b{display:block;font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.14em;
               text-transform:uppercase;margin-bottom:4px;color:var(--rose)}

  /* penanda bilangan berdalil */
  .zk-target.sunnah{color:#1B6242;background:#E2F4EA;border-color:#8CCBA9;font-weight:600;
                    box-shadow:0 0 0 3px rgba(46,145,99,.12)}
  .zk-alt b.sunnah{color:#1B6242}
  .zk-dalil{margin:9px 0 0;padding:9px 11px;background:#F1FAF5;border:1px solid #CFE9DC;
            border-radius:10px;font-size:11.5px;line-height:1.6;color:#2F5F49}
  .zk-dalil b{display:block;font-family:"IBM Plex Mono",monospace;font-size:9px;letter-spacing:.14em;
              text-transform:uppercase;color:#2E9163;margin-bottom:4px;font-weight:600}
  .zk-target.khilaf{color:#8A6B22;background:#FFF8E8;border-color:#E0C88A;font-weight:600;
                    box-shadow:0 0 0 3px rgba(199,154,62,.13)}
  .zk-alt b.khilaf{color:#8A6B22}
  .zk-dalil.khilaf{background:#FFFBF0;border-color:#EBD9A8;color:#7A5F1E}
  .zk-dalil.khilaf b{color:#B08327}
  .zk-khilaf{margin:7px 0 0;padding:9px 11px;background:#FFF8E8;border:1px solid #EBD9A8;
             border-radius:10px;font-size:11.5px;line-height:1.6;color:#7A5F1E}
  .zk-khilaf b{display:block;font-family:"IBM Plex Mono",monospace;font-size:9px;letter-spacing:.14em;
               text-transform:uppercase;color:#B08327;margin-bottom:4px;font-weight:600}
  .zk-legend i.k{background:#FFF8E8;border-color:#E0C88A}
  .zk-legend{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--muted);
             margin:0 0 13px;line-height:1.5}
  .zk-legend i{flex:0 0 auto;display:inline-block;width:26px;height:16px;border-radius:999px;
               background:#E2F4EA;border:1px solid #8CCBA9}
  .c-target-sunnah{font-size:11px;color:#2E9163;font-family:"IBM Plex Mono",monospace;
                   letter-spacing:.1em;text-transform:uppercase;margin-top:6px}

  .zk-legend3{display:flex;justify-content:center;gap:14px;font-size:10.5px;color:var(--muted);
              margin:14px 0 0;font-family:"IBM Plex Mono",monospace;flex-wrap:wrap}
  .zk-legend3 i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:5px;vertical-align:middle}
  .zk-legend3 .a{background:var(--tint-line)}
  .zk-legend3 .b{background:#3FA76E}
  .zk-legend3 .c{background:#C4503C}
  #zkChain .seg.lit.penuh{background:linear-gradient(90deg,#7FD3A4,#3FA76E,#7FD3A4)}

  /* kumpulan keutamaan zikir */
  .zk-grup{border-radius:16px;padding:14px 12px 6px;margin:0 0 16px}
  .zk-grup.utama{background:#EFF6F1;border:1px solid #BFDCC9}
  .zk-grup.lain{background:#F3F0FA;border:1px solid #D3C9EC}
  .zk-grup-head{display:flex;align-items:baseline;gap:10px;margin:0 2px 12px}
  .zk-grup-head b{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.16em;
                  text-transform:uppercase;color:#FFF;border-radius:999px;padding:4px 11px;flex:0 0 auto}
  .zk-grup.utama .zk-grup-head b{background:#2E8B57}
  .zk-grup.lain  .zk-grup-head b{background:#7B4FC0}
  .zk-grup-head span{font-size:12px;line-height:1.4}
  .zk-grup.utama .zk-grup-head span{color:#2F6B4A}
  .zk-grup.lain  .zk-grup-head span{color:#5B4A85}
  .zk-grup .zk{background:#FFF}
  .zk-grup .zk.on{background:var(--tint-deep)}

  /* level zikir */
  .life{background:var(--card);border:1px solid var(--line-soft);border-radius:var(--r);padding:17px;
        margin:0 0 12px;box-shadow:0 1px 2px rgba(18,53,79,.04)}
  .life-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
  .life-name{font-family:"Amiri",serif;font-size:20px;font-weight:700;color:var(--ink);margin:0}
  .life-name small{display:block;font-family:"IBM Plex Sans",sans-serif;font-size:11.5px;
                   color:var(--muted);font-weight:400;margin-top:2px;font-style:italic}
  .life-pct{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--blue);white-space:nowrap;margin-top:4px}
  .life-ar{font-family:"Amiri",serif;font-size:20px;color:var(--ink);direction:rtl;text-align:right;margin:12px 0 0}
  .life-num{font-family:"Amiri",serif;font-weight:700;font-size:clamp(34px,10vw,44px);line-height:1;
            color:var(--blue-deep);margin:14px 0 2px;letter-spacing:-.01em}
  .life-num span{font-size:.4em;color:var(--muted);font-weight:400;letter-spacing:0}
  .life-bd{font-family:"IBM Plex Mono",monospace;font-size:10.5px;color:var(--muted);margin:0 0 12px}
  .life-add{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:12px}
  .life-add button{border:1px solid var(--line);background:var(--wash);color:var(--blue-deep);
                   border-radius:10px;padding:9px 2px;font:inherit;font-size:12.5px;cursor:pointer;
                   font-family:"IBM Plex Mono",monospace}
  .life-add button:hover{border-color:var(--blue);background:var(--card)}
  .life-row{display:flex;gap:8px;margin-top:8px}
  .life-row input{flex:1 1 auto;min-width:0}
  .l2{background:var(--card);border:1px solid var(--line-soft);border-radius:var(--r);padding:16px;
      margin:0 0 12px;box-shadow:0 1px 2px rgba(18,53,79,.04)}
  .l2.on{border-color:var(--tint-line);background:linear-gradient(180deg,var(--tint),var(--card))}
  .l2-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
  .l2-name{font-family:"Amiri",serif;font-size:20px;font-weight:700;color:var(--ink);margin:0}
  .l2-count{font-family:"IBM Plex Mono",monospace;font-size:13px;color:var(--blue)}
  .l2-ar{font-family:"Amiri",serif;font-size:21px;line-height:1.9;color:var(--ink);
         direction:rtl;text-align:right;margin:10px 0 0}
  .l2-tr{font-size:12.5px;color:var(--blue-deep);font-style:italic;margin:8px 0 0}
  .l2-btns{display:flex;gap:8px;margin-top:13px}
  .l2-btns .btn{flex:1 1 auto}

  /* kaunter */
  .counter{position:fixed;inset:0;z-index:100;background:linear-gradient(180deg,#F7FBFE,#DCEBF7);
           display:none;flex-direction:column;padding:calc(18px + env(safe-area-inset-top)) 18px calc(18px + env(safe-area-inset-bottom))}
  .counter.show{display:flex}
  .c-top{display:flex;justify-content:space-between;align-items:center;gap:12px}
  .c-close{border:0;background:#FFF;border:1px solid var(--line);color:var(--ink);width:38px;height:38px;
           border-radius:50%;font-size:18px;cursor:pointer;line-height:1}
  .c-reset{border:1px solid var(--line);background:#FFF;color:var(--body);border-radius:10px;padding:8px 14px;
           font:inherit;font-size:13px;cursor:pointer}
  .c-mid{flex:1 1 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;
         gap:6px;cursor:pointer;user-select:none;-webkit-user-select:none;text-align:center}
  .c-ar{font-family:"Amiri",serif;font-size:30px;line-height:1.9;color:var(--ink);direction:rtl;max-width:460px}
  .c-tr{font-size:14px;color:var(--body);max-width:420px;font-weight:500}
  .c-mean{font-size:13px;color:var(--muted);max-width:400px;line-height:1.6;margin-top:4px;
          padding:0 4px;font-style:italic}
  .c-num{font-family:"Amiri",serif;font-weight:700;font-size:clamp(84px,30vw,132px);line-height:1;
         color:var(--blue-deep);margin:8px 0 0}
  .c-num small{font-size:.26em;color:var(--muted);font-weight:400}
  .c-hint{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
          color:var(--muted);margin-top:14px}
  .c-ring{width:100%;max-width:320px;height:6px;background:var(--line);border-radius:4px;
          overflow:hidden;margin-top:16px;flex:0 0 auto}
  /* semua elemen tetap dalam kaunter tidak boleh dihimpit */
  .c-ar,.c-tr,.c-mean,.c-num,.c-jumlah,.c-hint,.c-target-sunnah,.c-blok{flex:0 0 auto}
  .c-ring i{display:block;height:100%;background:var(--blue);width:0;transition:width .2s}
  .c-blok{display:flex;gap:5px;width:100%;max-width:320px;margin-top:18px}
  .c-blok i{flex:1 1 0;height:7px;border-radius:4px;background:rgba(0,0,0,.09);position:relative;overflow:hidden}
  .c-blok i.isi{background:var(--aksenBlok, var(--blue))}
  .c-blok i.separa::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--isi,0%);
                          background:var(--aksenBlok, var(--blue));border-radius:4px}
  .c-blok i{flex:1 1 0;height:9px;border-radius:5px;background:var(--line);
            transition:background .35s ease, transform .35s ease}
  .c-blok i.isi{background:var(--blue);transform:scaleY(1.25)}
  .c-blok i.separa{background:linear-gradient(90deg,var(--blue) var(--isi,0%),var(--line) var(--isi,0%))}
  .counter{transition:background .5s ease}
  .counter{transition:background .5s ease}
  .c-jumlah{font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--muted);
            margin-top:14px;letter-spacing:.04em}
  .c-jumlah b{color:var(--blue-deep);font-weight:500}
  .c-fad{max-width:440px;margin:16px auto 0;padding:13px 15px;background:var(--wash);
         border:1px solid var(--line-soft);border-radius:12px;font-size:12.5px;line-height:1.7;
         color:var(--body);text-align:left}
  .c-fad b{display:block;font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.14em;
           text-transform:uppercase;color:var(--blue);margin-bottom:5px;font-weight:600}
  .c-fad ol{margin:7px 0 0;padding-left:17px}
  .c-fad li{margin-bottom:3px}
  .c-fad .wr-dalil{margin-top:8px}
  .c-mid{overflow-y:auto}
  .c-mid:active .c-num{transform:scale(.97)}
  .c-num{transition:transform .12s}

  /* qada */
  .qw{background:var(--card);border:1px solid var(--line-soft);border-radius:var(--r);padding:14px;margin:0 0 11px;
      box-shadow:0 1px 2px rgba(18,53,79,.04)}
  .qw-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
  .qw-name{font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
  .qw-baki{font-size:12px;color:var(--muted)}
  .qw-baki b{font-family:"Amiri",serif;font-size:22px;color:var(--blue-deep);font-weight:700;vertical-align:-2px;margin-right:3px}
  .qw-baki b.zero{color:var(--green)}
  .dots{display:grid;grid-template-columns:repeat(10,1fr);gap:4px;margin:12px 0 11px}
  .dots button{aspect-ratio:1;border-radius:8px;border:1.5px solid #CFE2F0;background:#FFF;padding:0;cursor:pointer;
               font-family:"IBM Plex Mono",monospace;font-size:11px;color:#8FADC5;
               display:grid;place-items:center;transition:background .2s,border-color .2s,color .2s}
  .dots button.on{background:var(--blue);border-color:var(--blue);color:#FFF}
  .qw-ctrl{display:flex;align-items:center;gap:8px}
  .qw-ctrl button{flex:0 0 auto;width:40px;height:36px;border-radius:10px;border:1px solid var(--line);background:#FFF;
                  color:var(--blue-deep);font-size:17px;cursor:pointer;line-height:1}
  .qw-ctrl button:hover{border-color:var(--blue)}
  .qw-ctrl span{flex:1 1 auto;font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--muted);text-align:center}
  .niat{background:var(--wash);border:1px solid var(--line-soft);border-radius:12px;padding:12px;margin:0 0 9px}
  .niat h4{margin:0 0 4px;font-size:13px;color:var(--ink);font-weight:600}
  .niat p{margin:0;font-size:13px;color:var(--ink);line-height:1.6}
  .niat em{display:block;font-size:12px;color:var(--muted);font-style:normal;margin-top:3px}

  /* input */
  textarea,input[type=text],input[type=date],input[type=number]{
    width:100%;background:var(--wash);border:1px solid var(--line);border-radius:12px;color:var(--ink);
    font:inherit;font-size:14.5px;padding:11px 13px}
  textarea{resize:vertical;min-height:78px}
  textarea::placeholder,input::placeholder{color:#9DBBD1}
  textarea:focus,input:focus{outline:none;border-color:var(--blue);background:#FFF}
  .row{display:flex;gap:9px} .row > *{min-width:0}
  .row input{flex:1 1 auto}
  .btn{border:0;border-radius:12px;padding:12px 18px;font:inherit;font-weight:600;font-size:14px;
       background:var(--blue);color:#FFF;cursor:pointer;white-space:nowrap}
  .btn:active{transform:translateY(1px)}
  .btn.ghost{background:#FFF;color:var(--blue-deep);border:1px solid var(--line);font-weight:500}
  .btn.ghost:hover{border-color:var(--blue)}
  .filebtn{display:block;text-align:center;background:var(--wash);border:1px dashed var(--line);
           border-radius:12px;padding:14px;color:var(--blue-deep);font-size:14px;cursor:pointer}
  .filebtn:hover{border-color:var(--blue);background:#FFF}
  .bkinfo{background:var(--wash);border:1px solid var(--line-soft);border-radius:12px;padding:13px;margin-top:12px}
  .bkinfo p{margin:0 0 10px;font-size:13px;color:var(--ink);line-height:1.6}

  details{border:1px solid var(--line-soft);border-radius:var(--r);background:var(--card);margin:0 0 14px;
          box-shadow:0 1px 2px rgba(18,53,79,.04)}
  details > summary{list-style:none;cursor:pointer;padding:15px 16px;display:flex;justify-content:space-between;
    align-items:center;gap:10px;font-family:"Amiri",serif;font-size:19px;font-weight:700;color:var(--ink)}
  details > summary::-webkit-details-marker{display:none}
  summary .chev{font-family:"IBM Plex Mono",monospace;font-size:13px;color:var(--muted);font-weight:400}
  details[open] summary .chev{color:var(--blue)}
  .details-body{padding:0 16px 16px}
  .toggle-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 0;
              border-bottom:1px solid var(--line-soft);font-size:14px;color:var(--ink)}
  .toggle-row:last-child{border-bottom:0}
  .mini{border:1px solid var(--line);background:#FFF;color:var(--body);border-radius:10px;padding:6px 12px;
        font:inherit;font-size:12.5px;cursor:pointer;white-space:nowrap}
  .mini:hover{border-color:var(--rose);color:var(--rose)}
  .mini.is-on{color:var(--blue-deep);border-color:var(--blue);background:#EFF7FD}

  .hist{font-family:"IBM Plex Mono",monospace;font-size:12.5px;color:var(--muted);display:flex;
        justify-content:space-between;align-items:center;padding:10px 2px;border-bottom:1px solid var(--line-soft);
        width:100%;background:transparent;border-left:0;border-right:0;border-top:0;cursor:pointer;text-align:left}
  .hist:last-child{border-bottom:0}
  .hist:hover,.hist[aria-expanded="true"]{color:var(--blue)}
  .hist.belum{background:#FFFCF4}
  .rekod-bhg{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.14em;
             text-transform:uppercase;color:var(--blue);margin:12px 0 7px}
  .rekod-grid{display:flex;flex-wrap:wrap;gap:6px}
  .rekod-chip{border:1px solid var(--line);background:#FFF;color:var(--body);border-radius:9px;
              padding:7px 10px;font:inherit;font-size:12px;cursor:pointer;line-height:1.3;text-align:left}
  .rekod-chip:hover{border-color:var(--blue)}
  .rekod-chip.on{background:var(--blue);border-color:var(--blue);color:#FFF;font-weight:500}
  .rekod-chip.separa{background:#D98A27;border-color:#D98A27;color:#FFF;font-weight:600}
  .rekod-chip.penuh{background:var(--green);border-color:var(--green);color:#FFF;font-weight:600}
  .chip-n{display:inline-block;margin-left:6px;padding:1px 5px;border-radius:5px;
          font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.04em;
          background:rgba(255,255,255,.24);color:#FFF}
  .rekod-chip:not(.on) .chip-n{background:var(--wash);color:var(--muted)}
  .pips i.separa{background:var(--tint-line)}
  .qada-nota{font-size:12px;color:#8A6B22;background:#FFF8E8;border:1px solid #EBD9A8;
             border-radius:10px;padding:9px 11px;margin:0 0 10px;line-height:1.55}
  .edit-panel{background:var(--wash);border:1px solid var(--line-soft);border-radius:12px;padding:12px;margin:2px 0 10px}
  .pips{display:flex;gap:3px}
  .pips i{width:6px;height:6px;border-radius:50%;background:#DCEBF7;display:block}
  .pips i.on{background:var(--blue)}

  .install ol{margin:6px 0 0;padding-left:20px;font-size:13.5px;line-height:1.75}
  .install code{background:var(--wash);border:1px solid var(--line-soft);border-radius:5px;padding:1px 5px;font-size:12.5px}
  .foot{text-align:center;font-size:11.5px;color:var(--muted);margin-top:24px;line-height:1.7}

  /* nav */
  .nav{position:fixed!important;left:0!important;right:0!important;bottom:0!important;z-index:40;
       width:100%;margin:0;background:#FFF;border-top:1px solid var(--line-soft);
       padding-bottom:env(safe-area-inset-bottom);transform:none!important;will-change:auto;
       isolation:isolate}
  .nav-in{max-width:520px;margin:0 auto;display:grid;grid-template-columns:repeat(6,1fr)}

  /* taraf dalil */
  .taraf{display:inline-block;vertical-align:middle;border-radius:999px;padding:2px 8px;
          font:600 10px/1.5 "IBM Plex Sans",sans-serif;letter-spacing:.03em;white-space:nowrap}
  .taraf.quran {background:#E8F3EC;color:#1E6B47;border:1px solid #BFDCCB}
  .taraf.sahih {background:#E9F2EA;color:#2C6B3A;border:1px solid #C3DDC8}
  .taraf.hasan {background:#F2F0E3;color:#6B6224;border:1px solid #DDD7B6}
  .taraf.hadith{background:#EDF1F6;color:#3A5670;border:1px solid #C9D6E3}
  .taraf.khilaf{background:#FBF0E6;color:#8A5A22;border:1px solid #E8D2B4}
  .taraf.ulama {background:#F2EEF7;color:#5B4780;border:1px solid #D8CDE8}
  .taraf-baris{margin:0 0 8px}

  /* ringkasan Amalan Hari Ini */
  .ringkas{margin:0 0 12px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--card)}
  .ringkas b{display:block;font:600 15px/1.4 "IBM Plex Sans",sans-serif;color:var(--ink)}
  .ringkas span{display:block;margin-top:3px;font-size:12.5px;color:var(--muted)}
  .ringkas-btn{width:100%;margin-top:11px;border:0;border-radius:12px;padding:11px 12px;
          background:#17634F;color:#FFF;font:600 13.5px/1.3 "IBM Plex Sans",sans-serif;cursor:pointer}
  .ringkas-btn[hidden]{display:none}
  .pick .taraf{margin-left:6px}
  .pick-txt b{display:inline}
  .nav button{background:transparent;border:0;padding:6px 0 7px;font-size:9px;cursor:pointer;color:var(--muted);
              display:flex;flex-direction:column;align-items:center;gap:3px;font:inherit;font-size:8px;letter-spacing:-.03em}
  .nav button svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

  /* doa selepas solat */
  .segctl.four{grid-template-columns:repeat(4,1fr)}
  .segctl.four button{font-size:13px;padding:11px 2px}
  .segctl.five{grid-template-columns:repeat(5,1fr)}
  .segctl.five button{font-size:11.5px;padding:9px 2px}
  .matrix{display:grid;gap:6px}
  .mx-row{display:flex;align-items:center;gap:9px}
  .mx-name{flex:0 0 58px;font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.08em;
           text-transform:uppercase;color:var(--muted)}
  .mx-row.now .mx-name{color:var(--blue-deep);font-weight:500}
  .mx-dots{flex:1 1 auto;display:grid;grid-template-columns:repeat(8,1fr);gap:4px;align-items:center}
  .mx-dots i{height:9px;border-radius:50%;background:var(--line);display:block}
  .mx-dots i.on{background:var(--blue)}
  .doa-card{background:var(--card);border:1px solid var(--line-soft);border-radius:var(--r);padding:16px;
            margin:0 0 12px;box-shadow:0 1px 2px rgba(18,53,79,.04)}
  .doa-card.on{border-color:#B9DAF2;background:linear-gradient(180deg,#F5FAFE,#FFF)}
  .doa-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:10px}
  .doa-no{flex:0 0 auto;width:24px;height:24px;border-radius:50%;background:var(--blue-deep);color:#FFF;
          font-family:"IBM Plex Mono",monospace;font-size:11px;display:grid;place-items:center}
  .doa-title{flex:1 1 auto;font-family:"Amiri",serif;font-size:19px;font-weight:700;color:var(--ink);margin:0;line-height:1.3}
  .doa-title small{display:block;font-family:"IBM Plex Sans",sans-serif;font-size:11.5px;color:var(--muted);
                   font-weight:400;margin-top:3px}
  .doa-ar{font-family:"Amiri",serif;font-size:21px;line-height:2.05;color:var(--ink);direction:rtl;text-align:right;margin:0}
  .doa-rumi{font-size:13px;color:var(--blue-deep);font-style:italic;margin:10px 0 0;line-height:1.6}
  .doa-ms{font-size:13px;color:var(--body);line-height:1.65;margin:11px 0 0;padding-top:11px;border-top:1px solid var(--line-soft)}
  .doa-ref{display:block;font-family:"IBM Plex Mono",monospace;font-size:10.5px;color:var(--muted);margin-top:6px}
  .doa-mark{width:100%;margin-top:13px;display:flex;align-items:center;justify-content:center;gap:9px;
            border:1px solid var(--line);background:var(--wash);border-radius:12px;padding:12px;
            font:inherit;font-size:14px;color:var(--ink);cursor:pointer;transition:background .2s,border-color .2s}
  .doa-mark:hover{border-color:var(--blue)}
  .doa-card.on .doa-mark{background:var(--blue);border-color:var(--blue);color:#FFF;font-weight:600}

  /* hizib */
  .hz{background:var(--card);border:1px solid var(--line-soft);border-radius:var(--r);padding:16px;margin:0 0 11px;
      box-shadow:0 1px 2px rgba(18,53,79,.04)}
  .hz-ar{font-family:"Amiri",serif;font-size:var(--hzsize,23px);line-height:2.15;color:var(--ink);
         direction:rtl;text-align:right;margin:0}
  .hz-kali{display:inline-block;font-family:"IBM Plex Mono",monospace;font-size:11px;color:#FFF;background:var(--blue);
           border-radius:999px;padding:3px 10px;margin:0 0 10px}
  .hz-ms{font-size:13.5px;color:var(--body);line-height:1.7;margin:12px 0 0;
         padding-top:12px;border-top:1px solid var(--line-soft)}
  .hz-ref{display:block;font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--muted);margin-top:6px}
  .hz-hajat{margin:11px 0 0;padding:9px 11px;background:#FFF8E8;border:1px solid #EBD9A8;border-radius:10px;
            font-size:12px;color:#8A6B22;line-height:1.5}
  .nav button.on{color:var(--blue-deep);font-weight:600}
  .nav button.on svg{stroke:var(--blue)}
  .nav .dot{width:4px;height:4px;border-radius:50%;background:var(--blue);opacity:0;margin-top:-2px}
  .nav button.on .dot{opacity:1}

  /* butang kongsi terapung — ada pada setiap tab */
  .fab{position:fixed;z-index:45;top:calc(14px + env(safe-area-inset-top));right:14px;
       width:46px;height:46px;border-radius:50%;border:1px solid #2F7D50;
       background:#3B9A63;color:#FFF;cursor:pointer;padding:0;
       display:flex;align-items:center;justify-content:center;
       box-shadow:0 4px 14px rgba(24,80,50,.28)}
  .fab svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.9;
           stroke-linecap:round;stroke-linejoin:round}
  .fab:active{transform:scale(.94)}
  @media (min-width:560px){ .fab{right:calc(50vw - 260px + 14px)} }

  .toast{position:fixed;left:50%;bottom:calc(var(--nav) + 20px + env(safe-area-inset-bottom));transform:translate(-50%,20px);
    background:var(--ink);color:#EAF6FF;padding:11px 18px;border-radius:999px;font-size:13.5px;opacity:0;
    pointer-events:none;transition:opacity .3s,transform .3s;z-index:110;max-width:90vw;text-align:center;
    box-shadow:0 6px 20px rgba(18,53,79,.22)}
  .toast.show{opacity:1;transform:translate(-50%,0)}

  /* popup peringatan */
  .splash{position:fixed;inset:0;z-index:200;background:rgba(10,26,35,.72);
          -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
          display:flex;align-items:center;justify-content:center;
          padding:calc(16px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom));
          animation:fadein .35s ease}
  .splash[hidden]{display:none}
  .splash-in{width:100%;max-width:430px;max-height:100%;display:flex;flex-direction:column;gap:12px}
  .splash-in picture{width:100%;flex:0 1 auto;min-height:0;display:flex}
  .splash-in img{width:100%;height:auto;flex:0 1 auto;min-height:0;object-fit:contain;border-radius:16px;
                 box-shadow:0 18px 50px rgba(6,20,30,.45);background:#F3EDE0}
  .splash-act{flex:0 0 auto}
  .splash-act .btn{width:100%;padding:14px;font-size:15px;background:#FFF;color:var(--blue-deep)}
  @keyframes fadein{from{opacity:0}to{opacity:1}}
  .splash.out{animation:fadeout .3s ease forwards}
  @keyframes fadeout{to{opacity:0}}

  /* ===== tema warna setiap tab ===== */
  body[data-theme="quran"]{
    --tint-deep:#C3E4CE;
    --tint:#DFF2E6; --tint-line:#A6D3B6; --sky:#EDF8F1; --sky-2:#DBEFE2; --wash:#F4FBF7;
    --line:#CEE7D7; --line-soft:#E3F2E9; --ink:#123D26; --body:#2E6B45; --muted:#7FAA90;
    --blue:#2E8050; --blue-hi:#57A97A; --blue-deep:#1B5A37;
  }
  body[data-theme="video"]{
    --tint-deep:#F3CFCF;
    --tint:#FBE4E4; --tint-line:#EBB6B6; --sky:#FDF0F0; --sky-2:#F8DEDE; --wash:#FEF7F7;
    --line:#F0D5D5; --line-soft:#F8E7E7; --ink:#5C1F1F; --body:#8C3B3B; --muted:#C08A8A;
    --blue:#B33A3A; --blue-hi:#D96A6A; --blue-deep:#8A2626;
  }
  body[data-theme="maklum"]{
    --tint-deep:#C4E2D6;
    --tint:#DFF1E8; --tint-line:#A6D3BE; --sky:#EDF7F2; --sky-2:#DAEDE3; --wash:#F4FAF7;
    --line:#CFE6DA; --line-soft:#E4F2EA; --ink:#123D2C; --body:#2F6A50; --muted:#7FAA95;
    --blue:#2E8060; --blue-hi:#57A985; --blue-deep:#1B5A42;
  }
  body[data-theme="masurat"]{
    --tint-deep:#DCD3F2;
    --tint:#EEE9FA; --tint-line:#C7BAEA;
    --sky:#F3F0FC; --sky-2:#E6DFF8; --wash:#F8F6FD; --line:#DFD7F1; --line-soft:#EDE8F9;
    --ink:#33235C; --body:#5B4790; --muted:#9A8CBE;
    --blue:#6B52B5; --blue-hi:#9280D6; --blue-deep:#463084;
  }
  body[data-theme="solat"]{
    --tint-deep:#CFE6F8;
    --tint:#E7F1FC; --tint-line:#B5CFEE;
    --sky:#EEF3FC; --sky-2:#DEE7F7; --wash:#F5F8FD; --line:#D3DEF0; --line-soft:#E6EDF8;
    --ink:#1B2F55; --body:#44578A; --muted:#8695B8;
    --blue:#3D62B8; --blue-hi:#6E8FDD; --blue-deep:#26417F;
  }
  body[data-theme="sedekah"]{
    --tint-deep:#C6DEF2;
    --tint:#E3F0FB; --tint-line:#A9CBE9;
    --sky:#EDF5FC; --sky-2:#DAE9F7; --wash:#F4F9FD; --line:#CFE0F0; --line-soft:#E4EFF9;
    --ink:#123A5C; --body:#33638C; --muted:#7FA0BE;
    --blue:#2E6FA8; --blue-hi:#5C9BD1; --blue-deep:#1B4A75;
  }
  body[data-theme="hajat"]{
    --tint:#FBE7F0; --tint-line:#EFBBD3; --tint-deep:#F6D4E4;
    --sky:#FCEFF5; --sky-2:#F7DEEA; --wash:#FEF6FA; --line:#F0D3E0; --line-soft:#F8E7EF;
    --ink:#4C1F35; --body:#7D4260; --muted:#B58AA0;
    --blue:#B5548A; --blue-hi:#DC85B4; --blue-deep:#8A3567;
  }
  body[data-theme="doa"]{
    --tint-deep:#C7E8D6;
    --tint:#E2F4EA; --tint-line:#A9D8BF;
    --sky:#EAF6EF; --sky-2:#D9EDE1; --wash:#F2FAF5; --line:#CFE5D8; --line-soft:#E3F2E9;
    --ink:#12402C; --body:#3E6B54; --muted:#7BA391;
    --blue:#2E9163; --blue-hi:#5DBB8B; --blue-deep:#1B6242;
  }
  body[data-theme="wirid"]{
    --tint-deep:#DCCFF3;
    --tint:#EDE6FA; --tint-line:#C9B8EC;
    --sky:#F1EDFA; --sky-2:#E4DCF4; --wash:#F7F4FC; --line:#DDD3EE; --line-soft:#EBE4F6;
    --ink:#2C1F4F; --body:#56497A; --muted:#9A8FB8;
    --blue:#6C4FC0; --blue-hi:#9B7FE0; --blue-deep:#4A3390;
  }
  body[data-theme="zikir"]{
    --tint-deep:#F2E2C0;
    --tint:#FBF1DC; --tint-line:#E3CB94;
    --sky:#FAF4E8; --sky-2:#F3E8D3; --wash:#FDF9F1; --line:#EADCC2; --line-soft:#F4EADA;
    --ink:#4A3714; --body:#7A6338; --muted:#B0A181;
    --blue:#B08327; --blue-hi:#D9AC55; --blue-deep:#7E5C14;
  }
  body[data-theme="hizib"]{
    --tint-deep:#C2E5E5;
    --tint:#DCF1F1; --tint-line:#A5D5D6;
    --sky:#E8F5F5; --sky-2:#D5EBEB; --wash:#F1FAFA; --line:#C8E2E2; --line-soft:#DEF0F0;
    --ink:#0F3D3F; --body:#376A6C; --muted:#79A3A5;
    --blue:#1F8A8C; --blue-hi:#4FB5B7; --blue-deep:#145F61;
  }
  body[data-theme="malam"]{
    --tint-deep:#CDD5F3;
    --tint:#E5E9FA; --tint-line:#B6BFEB;
    --sky:#EDF0FA; --sky-2:#DEE3F4; --wash:#F5F7FD; --line:#D3DAF0; --line-soft:#E6EAF7;
    --ink:#1C2456; --body:#454E85; --muted:#8B93BE;
    --blue:#4A57B8; --blue-hi:#7B87DC; --blue-deep:#303A85;
  }
  body[data-theme="qada"]{
    --tint-deep:#F1CDC2;
    --tint:#FAE7E1; --tint-line:#E5BCAF;
    --sky:#FBEFEC; --sky-2:#F5E1DC; --wash:#FDF6F4; --line:#EED6CF; --line-soft:#F6E7E2;
    --ink:#4E241B; --body:#7D4A3E; --muted:#B58F84;
    --blue:#B25A42; --blue-hi:#D98770; --blue-deep:#823A26;
  }
  /* elemen yang guna warna tetap perlu ikut tema */
  .bead{background:var(--card);border-color:var(--line)}
  /* sebahagian amalan sahaja — tona pudar */
  .bead.done{background:#FFF;border-color:var(--tint-line);color:var(--muted);font-weight:400;box-shadow:inset 0 0 0 3.5px var(--tint)}
  /* semua amalan tab itu genap — tona penuh */
  .bead.full{background:radial-gradient(circle at 32% 28%, var(--blue-hi), var(--blue) 58%, var(--blue-deep) 100%);border-color:var(--blue);color:#FFF;font-weight:500;box-shadow:0 0 0 3px rgba(0,0,0,.06),0 2px 9px rgba(0,0,0,.18)}
  .seg{background:var(--line)}
  .seg.lit{background:var(--tint-line)}
  .seg.lit.penuh{background:linear-gradient(90deg,var(--blue-hi),var(--blue),var(--blue-hi))}
  .bar{background:var(--line-soft)}
  .tick{border-color:var(--line)}
  .item.on{background:var(--tint);border-color:var(--tint-line)}

  /* kad yang sudah ditanda: tona lebih gelap */
  .zk.on{background:var(--tint-deep);border-color:var(--blue)}
  .doa-card.on,.wr-card.on{border-color:var(--blue);
    background:linear-gradient(180deg,var(--tint-deep),var(--tint))}
  .doa-card.on .doa-ar,.wr-card.on .wr-ar,.zk.on .zk-ar{opacity:.72}
  .doa-card.on .doa-ms,.wr-card.on .wr-ms,.zk.on .zk-mean{opacity:.75}
  .doa-card.on .doa-title,.wr-card.on .wr-title{color:var(--blue-deep)}
  .wr-card.on .wr-no,.doa-card.on .doa-no,.zk.on .zk-no{background:var(--blue)}
  .wr-card.on .wr-fad,.zk.on .zk-foot{opacity:.8}
  .doa-card.on .doa-mark{background:var(--blue);border-color:var(--blue);color:#FFF}
  .segctl button.on{background:var(--blue);box-shadow:0 1px 4px rgba(0,0,0,.12)}
  .legend .p{background:var(--blue-hi)}
  .legend .f{background:var(--blue-deep)}
  .banner{background:var(--card);border-color:var(--line)}
  body{transition:background-color .45s ease}
  .dots button{border-color:var(--line);color:var(--muted)}
  .mx-dots i{background:var(--line)}
  .mx-dots i.on{background:var(--blue)}
  .pips i{background:var(--line)}
  .pips i.on{background:var(--blue)}
  .zk-prog{background:var(--line-soft)}
  .zk-prog i{background:var(--blue)}
  .c-ring{background:var(--line)}
  .c-ring i{background:var(--blue)}
  .counter{background:linear-gradient(180deg, var(--wash), var(--sky-2))}
  .wr-head.t3 b{background:var(--blue)}

  /* poster peringatan qada */
  .qposter{position:fixed;inset:0;z-index:210;background:rgba(58,26,18,.55);
           -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
           display:flex;align-items:center;justify-content:center;overflow-y:auto;
           padding:calc(18px + env(safe-area-inset-top)) 16px calc(18px + env(safe-area-inset-bottom));
           animation:fadein .35s ease}
  .qposter[hidden]{display:none}
  .qposter.out{animation:fadeout .3s ease forwards}
  .qp-card{width:100%;max-width:430px;margin:auto;background:
             radial-gradient(120% 60% at 50% 0%, #FFFCF8 0%, rgba(255,252,248,0) 55%), #FDF6F1;
           border:1px solid #E0B79F;border-radius:20px;
           box-shadow:0 22px 60px rgba(58,26,18,.4), inset 0 0 0 6px rgba(178,90,66,.07);
           padding:20px 18px 18px;text-align:center;position:relative}
  .qp-card::before,.qp-card::after{content:"";position:absolute;width:34px;height:34px;
           border:2px solid #C98B6E;opacity:.55}
  .qp-card::before{top:11px;left:11px;border-right:0;border-bottom:0;border-radius:8px 0 0 0}
  .qp-card::after{bottom:11px;right:11px;border-left:0;border-top:0;border-radius:0 0 8px 0}
  .qp-orn{font-size:15px;color:#C98B6E;line-height:1;margin-bottom:12px}
  .qp-eyebrow{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.26em;
              text-transform:uppercase;color:#B25A42;margin:0 0 12px}
  .qp-title{font-family:"Amiri",serif;font-size:clamp(21px,5.8vw,26px);line-height:1.3;
            color:#4E241B;margin:0;font-weight:700}
  .qp-title em{font-style:italic;color:#B25A42}
  .qp-rule{display:flex;align-items:center;gap:11px;margin:20px 0}
  .qp-rule::before,.qp-rule::after{content:"";flex:1 1 auto;height:1px;background:#E3C4B2}
  .qp-rule span{color:#C98B6E;font-size:12px;line-height:1}
  .qp-ar{font-family:"Amiri",serif;font-size:23px;line-height:1.85;color:#4E241B;
         direction:rtl;margin:0 0 10px}
  .qp-ar.sm{font-size:18px;line-height:1.95}
  .qp-rumi{font-size:13px;color:#A0674F;font-style:italic;margin:0 0 9px}
  .qp-ms{font-size:13px;line-height:1.55;color:#5C3327;margin:0}
  .qp-kisah{font-size:11.5px;line-height:1.6;color:#7D4A3E;background:#FAEDE6;
            border:1px solid #EED6CF;border-radius:12px;padding:11px 12px;margin:12px 0 8px;text-align:left}
  .qp-kisah em{font-style:italic;color:#5C3327}
  .qp-kisah .saw{font-family:"Amiri",serif;font-size:15px}
  .qp-src{font-family:"IBM Plex Mono",monospace;font-size:10.5px;color:#B58F84;margin:9px 0 0;
          letter-spacing:.04em}
  .qp-foot{font-size:13px;line-height:1.65;color:#4E241B;background:#F4E2D9;
           border-radius:13px;padding:14px;margin:22px 0 16px}
  .qp-card .btn{width:100%;background:#B25A42;color:#FFF;padding:14px;font-size:15px}

  /* ===== sub-tab dalam tab Doa ===== */
  .subnav{display:flex;gap:7px;overflow-x:auto;padding:2px 0 10px;margin:0 0 4px;
          -webkit-overflow-scrolling:touch;scrollbar-width:none}
  .subnav::-webkit-scrollbar{display:none}
  .subnav button{flex:0 0 auto;background:var(--card);border:1px solid var(--line);color:var(--body);
          border-radius:999px;padding:8px 15px;font:inherit;font-size:13px;cursor:pointer;white-space:nowrap}
  .subnav button.on{background:var(--blue);border-color:var(--blue);color:#FFF;font-weight:600}
  .subpane[hidden]{display:none}
  .subpane > section{display:block !important}

  /* ===== butang tambah (+) pada senarai zikir ===== */
  .pick{display:flex;align-items:flex-start;gap:11px;background:var(--card);border:1px solid var(--line);
        border-radius:13px;padding:11px 12px;margin:0 0 8px}
  .pick-txt{flex:1 1 auto;min-width:0}
  .pick-txt b{display:block;color:var(--ink);font-size:14px;font-weight:600;line-height:1.35}
  .pick-txt span{display:block;color:var(--muted);font-size:11.5px;margin-top:3px;line-height:1.5;
        display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .pick-btn{flex:0 0 auto;margin-top:1px;width:34px;height:34px;border-radius:50%;border:1px solid var(--tint-line);
        background:var(--tint);color:var(--blue-deep);font-size:19px;line-height:1;cursor:pointer;
        display:flex;align-items:center;justify-content:center;padding:0}
  .pick-btn.on{background:var(--blue);border-color:var(--blue);color:#FFF}
  .pick-no{flex:0 0 auto;width:20px;margin-top:3px;color:var(--muted);font-size:11.5px;
        font-family:"IBM Plex Mono",monospace;text-align:center}

  /* ===== tiga kumpulan doa, tiga warna ===== */
  .grp1 .pick{background:#F2F8F3;border-color:#C6E0CC}
  .grp1 .pick-btn{background:#DFEFE4;border-color:#A9D2B5;color:#1F5C36}
  .grp1 .pick-no{color:#5E8B6C}
  .grp2 .pick{background:#FBF4EC;border-color:#EAD6BC}
  .grp2 .pick-btn{background:#F5E6D2;border-color:#DCBF98;color:#7A5220}
  .grp2 .pick-no{color:#A98457}
  .grp3 .pick{background:#F3F1FA;border-color:#D3CBEA}
  .grp3 .pick-btn{background:#E6E0F5;border-color:#BFB2E0;color:#493184}
  .grp3 .pick-no{color:#8579B4}
  .wr-head.h1 b{background:#1F5C36;color:#FFF}
  .wr-head.h2 b{background:#7A5220;color:#FFF}
  .wr-head.h3 b{background:#493184;color:#FFF}
  .doa-card.g1{border-left:4px solid #6FAE84}
  .doa-card.g2{border-left:4px solid #C79A5C}
  .doa-card.g3{border-left:4px solid #8E7CC8}

  /* ===== sedekah ===== */
  .sd-poster{background:linear-gradient(160deg,#12395B,#2E6FA8 55%,#5C9BD1);
        border-radius:var(--r);padding:24px 20px;color:#FFF6EA;margin:0 0 16px;text-align:center}
  .sd-poster h2{margin:0 0 6px;font-size:21px;line-height:1.3;color:#FFF;font-weight:600}
  .sd-poster .sd-ar{font-family:"Amiri",serif;font-size:23px;line-height:2;direction:rtl;margin:12px 0 8px}
  .sd-poster p{margin:0;font-size:13.5px;line-height:1.65;opacity:.95}
  .sd-poster .sd-src{font-family:"IBM Plex Mono",monospace;font-size:10.5px;opacity:.8;margin-top:9px}
  .sd-list{list-style:none;margin:14px 0 0;padding:0;text-align:left}
  .sd-list li{position:relative;padding:0 0 0 22px;margin:0 0 9px;font-size:13.5px;line-height:1.55}
  .sd-list li::before{content:"\2726";position:absolute;left:0;top:0;opacity:.8}
  .sd-100{background:#E9F7EF;border:1px solid #B9E3CB;border-radius:13px;padding:14px;margin:0 0 16px;
        color:#1B6242;font-size:13.5px;line-height:1.6;text-align:center}
  .sd-100 b{display:block;font-size:15px;margin-bottom:4px}
  .sd-amt{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
  .sd-amt button{flex:1 1 auto;min-width:66px;background:var(--tint);border:1px solid var(--tint-line);
        color:var(--blue-deep);border-radius:11px;padding:11px 6px;font:inherit;font-size:14px;
        font-weight:600;cursor:pointer}
  .sd-amt button.on{background:var(--blue);border-color:var(--blue);color:#FFF}
  .sd-cat{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:15px;margin:0 0 12px}
  .sd-cat h3{margin:0 0 4px;font-size:15.5px;color:var(--ink);font-weight:600}
  .sd-cat p{margin:0;font-size:12.5px;color:var(--muted);line-height:1.55}
  .sd-slot{border:1px dashed var(--tint-line);border-radius:11px;padding:12px;margin:10px 0 0;
        font-size:12.5px;color:var(--muted);line-height:1.6;background:var(--wash)}
  .sd-slot b{color:var(--body);display:block;margin-bottom:3px;font-size:13px}
  .sd-link{display:block;text-align:center;background:var(--blue);color:#FFF;border-radius:13px;
        padding:14px;margin:12px 0 0;text-decoration:none;font-size:14.5px;font-weight:600}

  /* ===== kongsi ===== */
  .share-hero{background:linear-gradient(150deg,#103F35,#2C8A6B);border-radius:var(--r);
        padding:18px;margin:0 0 12px;color:#FFF}
  .share-hero b{display:block;font-size:15.5px;margin-bottom:5px}
  .share-hero p{margin:0;font-size:13px;line-height:1.6;opacity:.92}
  .share-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:14px}
  .share-grid button{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);
        color:#FFF;border-radius:11px;padding:12px 8px;font:inherit;font-size:13.5px;
        font-weight:600;cursor:pointer}
  .share-grid button.wide{grid-column:1 / -1;background:#FFF;color:var(--blue-deep);border-color:#FFF}

  /* ===== peringatan harian ===== */
  .rem-times{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
  .rem-times button{flex:1 1 auto;min-width:74px;background:var(--tint);border:1px solid var(--tint-line);
        color:var(--blue-deep);border-radius:11px;padding:10px 6px;font:inherit;font-size:13.5px;cursor:pointer}
  .rem-times button.on{background:var(--blue);border-color:var(--blue);color:#FFF;font-weight:600}

  /* ===== notis percuma ===== */
  .notis{background:var(--wash);border:1px solid var(--line);border-radius:var(--r);
         padding:18px;margin:0 0 16px}
  .notis h3{margin:0 0 4px;font-family:"Amiri",serif;font-size:18px;color:var(--ink);font-weight:600}
  .notis .sub{margin:0 0 12px;font-size:12.5px;color:var(--muted);line-height:1.55}
  .notis ul{list-style:none;margin:0;padding:0}
  .notis li{position:relative;padding:0 0 0 20px;margin:0 0 9px;font-size:13px;
            line-height:1.6;color:var(--body)}
  .notis li::before{content:"\2022";position:absolute;left:5px;top:-1px;color:var(--blue)}
  .notis li b{color:var(--ink)}
  .notis .amaran{margin:12px 0 0;padding:11px 12px;background:#FFF4EC;border:1px solid #F0D3BC;
            border-radius:11px;font-size:12.5px;line-height:1.6;color:#8A4A22}

  .rekod-lagi{width:100%;margin-top:9px;background:var(--tint);border:1px solid var(--tint-line);
        color:var(--blue-deep);border-radius:11px;padding:11px;font:inherit;font-size:13px;cursor:pointer}

  /* ===== notis penggunaan ===== */
  .notis{background:var(--wash);border:1px solid var(--line);border-left:4px solid var(--blue);
         border-radius:13px;padding:15px 16px;margin:0 0 14px}
  .notis b{display:block;font-size:14px;color:var(--ink);font-weight:600;margin-bottom:7px}
  .notis p{margin:0 0 8px;font-size:12.8px;line-height:1.65;color:var(--body)}
  .notis p:last-child{margin-bottom:0}
  .notis ul{margin:0;padding-left:18px}
  .notis li{font-size:12.8px;line-height:1.65;color:var(--body);margin-bottom:5px}
  .notis li:last-child{margin-bottom:0}
  .notis .kecil{font-size:11.5px;color:var(--muted);margin-top:10px;line-height:1.6}

  /* ===== rating & ulasan ===== */
  .rt{display:flex;gap:6px;justify-content:center;margin:14px 0 4px}
  .rt button{background:none;border:0;padding:2px;cursor:pointer;font-size:31px;line-height:1;
        color:var(--line);transition:color .12s}
  .rt button.on{color:#E0A93C}
  .rt-lbl{text-align:center;font-size:12.5px;color:var(--muted);margin:0 0 4px;min-height:18px}
  .ul-purata{display:flex;align-items:baseline;gap:10px;justify-content:center;margin:2px 0 4px}
  .ul-purata b{font-family:"IBM Plex Mono",monospace;font-size:30px;color:var(--ink)}
  .ul-purata span{font-size:12.5px;color:var(--muted)}
  .ul{background:var(--card);border:1px solid var(--line);border-radius:13px;padding:13px 14px;margin:0 0 9px}
  .ul-atas{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:5px}
  .ul-atas b{font-size:13.5px;color:var(--ink);font-weight:600}
  .ul-atas span{font-size:11px;color:#E0A93C;letter-spacing:1px}
  .ul p{margin:0;font-size:13px;line-height:1.6;color:var(--body)}
  .ul-tarikh{font-size:10.5px;color:var(--muted);margin-top:6px;font-family:"IBM Plex Mono",monospace}

  /* ===== borang kenalan & salam ===== */
  .ob label{display:block;font-size:12px;color:var(--muted);margin:12px 0 5px;
        letter-spacing:.05em;text-transform:uppercase;font-family:"IBM Plex Mono",monospace}
  .ob input{width:100%;padding:12px 13px;border:1px solid var(--line);border-radius:11px;
        font:inherit;font-size:15px;background:var(--card);color:var(--ink)}
  .salam{background:linear-gradient(150deg,var(--blue-deep),var(--blue));border-radius:var(--r);
        padding:20px;margin:0 0 16px;color:#FFF}
  .salam b{display:block;font-size:19px;line-height:1.3;margin-bottom:6px;font-family:"Amiri",serif}
  .salam p{margin:0;font-size:13.5px;line-height:1.65;opacity:.94}
  .salam .info{margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,.25);
        font-size:12.5px;line-height:1.6;opacity:.9}

  /* ===== kotak waqaf ===== */
  .wq{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
      overflow:hidden;margin:0 0 14px}
  .wq-1{padding:15px 16px 12px;border-bottom:1px solid var(--line-soft)}
  .wq-1 b{display:block;font-size:16px;color:var(--ink);font-weight:600;line-height:1.35}
  .wq-1 span{display:block;font-size:12px;color:var(--muted);margin-top:4px}
  .wq-sec{padding:14px 16px;border-bottom:1px solid var(--line-soft)}
  .wq-sec:last-child{border-bottom:0}
  .wq-lbl{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
          margin:0 0 9px;font-family:"IBM Plex Mono",monospace}
  .wq-qr{display:flex;gap:13px;align-items:flex-start}
  .wq-qr img{width:104px;height:104px;flex:0 0 auto;border-radius:11px;border:1px solid var(--line);
             object-fit:contain;background:#FFF}
  .wq-qr-kosong{width:104px;height:104px;flex:0 0 auto;border-radius:11px;
             border:1px dashed var(--tint-line);background:var(--wash);display:flex;
             align-items:center;justify-content:center;text-align:center;
             font-size:10.5px;color:var(--muted);padding:8px;line-height:1.4}
  .wq-akaun{flex:1 1 auto;min-width:0}
  .wq-akaun .bank{font-size:12.5px;color:var(--body);margin:0 0 3px}
  .wq-akaun .no{font-family:"IBM Plex Mono",monospace;font-size:15px;color:var(--ink);
             font-weight:600;letter-spacing:.5px;word-break:break-all}
  .wq-akaun .atas{font-size:11.5px;color:var(--muted);margin-top:4px;line-height:1.45}
  .wq-salin{margin-top:9px;background:var(--tint);border:1px solid var(--tint-line);
            color:var(--blue-deep);border-radius:9px;padding:7px 13px;font:inherit;
            font-size:12.5px;cursor:pointer}
  .wq-info{font-size:13px;color:var(--body);line-height:1.6;margin:0}
  .wq-info b{color:var(--ink)}
  .wq-bukti{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
  .wq-bukti img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:9px;border:1px solid var(--line)}
  .wq-prog{height:6px;background:var(--line-soft);border-radius:99px;overflow:hidden;margin:9px 0 6px}
  .wq-prog i{display:block;height:100%;background:var(--blue);border-radius:99px}
  .wq-rasmi{display:inline-block;margin-top:9px;font-size:12px;color:var(--blue-deep);
            text-decoration:underline}
  .wq-tunggu{border:1px dashed var(--tint-line);border-radius:12px;padding:16px;
             font-size:13px;color:var(--muted);line-height:1.6;background:var(--wash)}
  .wq-tunggu b{display:block;color:var(--body);margin-bottom:4px;font-size:13.5px}

  /* ===== amalan utama ===== */
  .au{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
      padding:16px;margin:0 0 12px}
  .au-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:3px}
  .au-top b{font-size:15.5px;color:var(--ink);font-weight:600}
  .au-top span{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--muted)}
  .au-ar{font-family:"Amiri",serif;font-size:19px;line-height:1.9;direction:rtl;text-align:right;
         color:var(--ink);margin:6px 0 10px}
  .au-num{font-family:"IBM Plex Mono",monospace;font-size:26px;color:var(--blue-deep);
          font-weight:600;letter-spacing:-.5px}
  .au-num small{font-size:13px;color:var(--muted);font-weight:400;margin-left:5px}
  .au-pick{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0 0}
  .au-pick button{flex:1 1 auto;min-width:56px;background:var(--wash);border:1px solid var(--line);
        color:var(--body);border-radius:9px;padding:8px 4px;font:inherit;font-size:11.5px;cursor:pointer;
        font-family:"IBM Plex Mono",monospace}
  .au-pick button.on{background:var(--blue);border-color:var(--blue);color:#FFF;font-weight:600}
  .au-lbl{font-size:11px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase;margin:14px 0 6px}

  /* ===== waktu solat ===== */
  .wt-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line-soft)}
  .wt-row:last-child{border-bottom:0}
  .wt-nama{flex:0 0 78px;font-size:13.5px;color:var(--ink);font-weight:600}
  .wt-row input{flex:1 1 auto;min-width:0;padding:9px 10px;border:1px solid var(--line);
        border-radius:10px;font:inherit;font-size:14px;background:var(--card);color:var(--ink)}
  .wt-sisa{flex:0 0 auto;font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--muted)}
  .wt-sisa.hot{color:#B5452F;font-weight:600}
  .wt-sisa.done{color:var(--green)}

  .vid-tt{width:100%;aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;
          background:linear-gradient(135deg,#0f0f14,#25252e);color:#FFF;font-weight:700;
          letter-spacing:.14em;font-size:15px}

  /* ===== video ===== */
  .vid{display:block;background:var(--card);border:1px solid var(--line);border-radius:var(--r);
       overflow:hidden;margin:0 0 12px;text-decoration:none;color:inherit}
  .vid img{width:100%;display:block;aspect-ratio:16/9;object-fit:cover;background:var(--wash)}
  .vid-b{padding:13px 14px}
  .vid-b b{display:block;font-size:14.5px;color:var(--ink);font-weight:600;line-height:1.4}
  .vid-b span{display:block;font-size:11.5px;color:var(--muted);margin-top:4px}
  .vid-x{display:flex;justify-content:flex-end;padding:0 14px 12px}
  .vid-x button{background:none;border:0;color:var(--muted);font:inherit;font-size:12px;
                cursor:pointer;padding:4px 0;text-decoration:underline}

  /* ===== pemilih bahasa ===== */
  .bhs{display:flex;gap:7px;justify-content:center;margin:0 0 14px}
  .bhs button{display:flex;align-items:center;gap:6px;background:var(--card);
        border:1px solid var(--line);color:var(--body);border-radius:999px;
        padding:7px 13px;font:inherit;font-size:12.5px;cursor:pointer}
  .bhs button.on{background:var(--blue);border-color:var(--blue);color:#FFF;font-weight:600}
  .bhs button:disabled{opacity:.45;cursor:not-allowed}
  .bhs .bendera{font-size:14px;line-height:1}

  /* ===== Kempen 1 Juta Istiqamah ===== */
  .kempen{position:relative;overflow:hidden;background:linear-gradient(155deg,#103F35 0%,#17634F 58%,#2C8A6B 100%);
          border-radius:22px;padding:24px 18px 20px;margin:0 0 22px;color:#FFF;text-align:center;
          box-shadow:0 12px 30px rgba(16,63,53,.18)}
  .kempen::after{content:"";position:absolute;width:190px;height:190px;border-radius:50%;
          right:-105px;top:-95px;border:34px solid rgba(255,255,255,.06);pointer-events:none}
  .kempen-tag{display:inline-block;border:1px solid rgba(255,255,255,.34);border-radius:999px;
          padding:5px 11px;font:500 9.5px/1.2 "IBM Plex Mono",monospace;letter-spacing:.15em;
          text-transform:uppercase;background:rgba(255,255,255,.08)}
  .kempen h1{font-family:"Amiri",serif;font-size:32px;line-height:1.05;margin:14px 0 4px;color:#FFF}
  .kempen-moto{margin:0;font-size:13px;font-weight:600;letter-spacing:.03em;color:#E7F7F0}
  .kempen-percuma{margin:6px 0 0;font:600 11.5px/1.5 "IBM Plex Mono",monospace;
        letter-spacing:.09em;color:#F0C76A}
  .kempen-counter{margin:19px 0 3px;display:flex;align-items:baseline;justify-content:center;gap:7px;
          font-family:"IBM Plex Mono",monospace;white-space:nowrap}
  .kempen-counter b{font-size:clamp(30px,10vw,43px);line-height:1;font-weight:600;color:#FFF}
  .kempen-counter span{font-size:13px;color:#BFE2D5}
  .kempen-label{margin:7px 0 0;font:500 10px/1.4 "IBM Plex Mono",monospace;letter-spacing:.13em;
          text-transform:uppercase;color:#CDEADF}
  .kempen-progress{height:5px;background:rgba(255,255,255,.16);border-radius:99px;overflow:hidden;margin:14px 4px 18px}
  .kempen-progress i{display:block;width:0;height:100%;border-radius:99px;background:#F0C76A;transition:width .6s ease}
  .kempen-copy{font-size:13.5px;line-height:1.65;margin:0 auto 16px;max-width:390px;color:#F1FAF6}
  .kempen-copy b{color:#FFF}
  .kempen-langkah{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:0 0 14px}
  .kempen-langkah span{padding:8px 4px;border:1px solid rgba(255,255,255,.2);border-radius:9px;
          background:rgba(255,255,255,.07);font-size:10.5px;line-height:1.35;color:#E7F7F0}
  .kempen-langkah b{display:block;color:#F0C76A;font:600 10px/1.2 "IBM Plex Mono",monospace;margin-bottom:3px}
  .kempen-btn{width:100%;border:0;border-radius:13px;padding:14px 12px;background:#FFF;color:#14523F;
          font:600 14px/1.35 "IBM Plex Sans",sans-serif;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.12)}
  .kempen-btn:disabled{opacity:.7;cursor:wait}
  .kempen-joined{margin-top:14px;padding:13px;border:1px solid rgba(255,255,255,.28);border-radius:13px;
          background:rgba(255,255,255,.1)}
  .kempen-joined b{display:block;font-family:"IBM Plex Mono",monospace;font-size:14px;color:#FFF;margin-bottom:8px}
  .kempen-share{border:1px solid rgba(255,255,255,.4);background:transparent;color:#FFF;border-radius:10px;
          padding:9px 13px;font:600 12.5px/1.3 "IBM Plex Sans",sans-serif;cursor:pointer}
  .kempen-note{font-size:10.5px;line-height:1.55;color:#BFE2D5;margin:11px 4px 0}

  .kempen-modal{position:fixed;inset:0;z-index:9998;display:flex;align-items:center;justify-content:center;
          padding:22px;background:rgba(10,34,29,.58);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
  .kempen-modal[hidden]{display:none}
  .kempen-modal-box{width:min(100%,430px);background:#FFF;border:1px solid var(--line);border-radius:22px;
          padding:24px 20px 18px;text-align:center;box-shadow:0 24px 70px rgba(12,50,42,.28)}
  .kempen-modal-icon{width:54px;height:54px;margin:0 auto 13px;border-radius:50%;display:grid;place-items:center;
          background:#EAF7F1;color:#17634F;font-size:27px;font-weight:700}
  .kempen-modal-box h2{margin:0 0 9px;font-family:"Amiri",serif;font-size:27px;line-height:1.2;color:#174C3D}
  .kempen-modal-box p{margin:0;color:var(--body);font-size:13.5px;line-height:1.7}
  .kempen-modal-box p + p{margin-top:9px}
  .kempen-modal-no{font:600 12px/1.5 "IBM Plex Mono",monospace;color:#2C8A6B !important}
  .kempen-modal-close{width:100%;margin-top:18px;border:0;border-radius:12px;padding:12px 14px;
          background:#17634F;color:#FFF;font:600 14px/1.35 "IBM Plex Sans",sans-serif;cursor:pointer}

  /* ===== kaunter pelawat ===== */
  .kira{text-align:center;padding:0 20px calc(96px + env(safe-area-inset-bottom));margin:-8px 0 0}
  .kira[hidden]{display:none}
  .kira b{display:block;font-family:"IBM Plex Mono",monospace;font-size:22px;color:var(--ink);
        letter-spacing:.5px;font-weight:600}
  .kira span{display:block;font-size:11.5px;color:var(--muted);margin-top:3px;letter-spacing:.06em;
        text-transform:uppercase}

  @media (prefers-reduced-motion: reduce){*{animation:none !important;transition-duration:.01ms !important}}

  /* Mobile: pastikan butang zikir termasuk "Simpan" kekal di dalam kad */
  @media (max-width:520px){
    .zk-foot{
      display:grid;
      grid-template-columns:repeat(4,minmax(0,1fr));
      gap:6px;
      align-items:center;
    }
    .zk-foot .zk-target{
      grid-column:1 / 2;
      min-width:0;
      text-align:center;
      padding-left:5px;
      padding-right:5px;
    }
    .zk-foot .zk-prog{
      grid-column:2 / 5;
      width:100%;
      min-width:0;
    }
    .zk-foot .zk-btn{
      min-width:0;
      width:100%;
      padding:7px 4px;
      font-size:11px;
      text-align:center;
      overflow:hidden;
      text-overflow:ellipsis;
    }
  }


  .cycle-modal{position:fixed;inset:0;z-index:2600;background:rgba(18,45,64,.46);
    display:flex;align-items:center;justify-content:center;padding:18px}
  .cycle-modal[hidden]{display:none}
  .cycle-box{width:min(100%,430px);max-height:92vh;overflow:auto;border-radius:26px;
    background:linear-gradient(180deg,#EAFDFF,#DDF9FB 50%,#F9FEFF);
    border:2px solid #78D5DC;box-shadow:0 24px 70px rgba(7,85,105,.28);
    padding:22px 18px 18px;text-align:center;color:#07546B}
  .cycle-box h2{font-family:"Amiri",Georgia,serif;font-size:34px;line-height:1.12;color:#087E93;margin:2px 0 4px}
  .cycle-kicker{font-family:"IBM Plex Mono",monospace;text-transform:uppercase;letter-spacing:.13em;font-size:10px;color:#55A9B4;margin-bottom:14px}
  .cycle-msg{background:rgba(255,255,255,.8);border:1px solid #B7E8EC;border-radius:17px;
    padding:14px 13px;margin:12px 0;font-size:13.5px;line-height:1.65;color:#235B67}
  .cycle-warn{background:#FFF9E6;border-color:#F1D582;color:#6B5B24}
  .cycle-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0}
  .cycle-stat{background:#FFF;border:1px solid #CFEDEF;border-radius:14px;padding:10px 5px}
  .cycle-stat b{display:block;font-size:21px;color:#087E93}
  .cycle-stat span{font-size:9px;color:#7AAAB0;text-transform:uppercase;letter-spacing:.06em}
  .cycle-actions{display:grid;gap:9px;margin-top:14px}
  .cycle-actions button{border:0;border-radius:13px;padding:12px 10px;font:inherit;font-weight:700;cursor:pointer}
  .cycle-continue{background:linear-gradient(135deg,#10AFC0,#087F9C);color:#FFF}
  .cycle-reset{background:#FFF7D8;color:#6A5417;border:1px solid #EED57E!important}
  .admin-modal{position:fixed;inset:0;z-index:2700;background:rgba(15,31,46,.58);
    display:flex;align-items:center;justify-content:center;padding:16px}
  .admin-modal[hidden]{display:none}
  .admin-box{width:min(100%,620px);max-height:92vh;overflow:auto;background:#FFF;border-radius:20px;
    padding:18px;box-shadow:0 24px 70px rgba(0,0,0,.25)}
  .admin-row{display:flex;gap:8px;align-items:center;margin:10px 0}
  .admin-row input{flex:1;min-width:0;padding:11px;border:1px solid var(--line);border-radius:10px;font:inherit}
  .admin-ulasan{border:1px solid var(--line);border-radius:14px;padding:12px;margin:10px 0;background:var(--wash)}
  .admin-ulasan.pending{border-color:#E7C66B;background:#FFF9E9}
  .admin-actions{display:flex;gap:7px;flex-wrap:wrap}
  .admin-actions button{border:1px solid var(--line);background:#FFF;border-radius:9px;padding:7px 10px;font:inherit;font-size:12px}


:focus-visible{outline:3px solid #1B5E8F;outline-offset:3px}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.storage-status{font-size:12px;text-align:center;padding:8px;color:#41637D}