@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
:root{
  --b900:#0A1F3F;--b800:#0D2B52;--b700:#0A2463;--b600:#1251A3;--b500:#1565C0;--b400:#1976D2;--b300:#42A5F5;--b200:#90CAF9;--b100:#BBDEFB;--b50:#E3F2FD;--b25:#F0F7FF;
  --white:#FFFFFF;--g50:#F8FAFC;--g100:#F1F5F9;--g200:#E2E8F0;--g300:#CBD5E1;--g400:#94A3B8;--g500:#64748B;--g600:#475569;--g700:#334155;--g800:#1E293B;
  --green:#16A34A;--greenL:#DCFCE7;--amber:#D97706;--amberL:#FEF3C7;--red:#DC2626;--redL:#FEE2E2;--purple:#7C3AED;--purpleL:#F5F3FF;
  --gold:#F59E0B;--goldL:#FFFBEB;
  --r24:24px;--r16:16px;--r12:12px;--r8:8px;--r6:6px;--r4:4px;
  --sh1:0 1px 3px rgba(0,0,0,.07),0 1px 2px rgba(0,0,0,.05);
  --sh2:0 4px 14px rgba(13,43,82,.10),0 2px 6px rgba(0,0,0,.06);
  --sh3:0 8px 32px rgba(13,43,82,.14),0 4px 12px rgba(0,0,0,.08);
}
html{scroll-behavior:smooth}
body{font-family:'Open Sans',sans-serif;background:#EEF2F8;color:var(--g800);min-height:100vh}

/* ── MOBILE APP SHELL ── */
#app{width:100%;max-width:420px;min-height:100vh;background:var(--white);position:relative;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 0 80px rgba(13,43,82,.16);margin:0 auto}

/* ── HEADER ── */
.app-header{background:linear-gradient(160deg,var(--b800) 0%,var(--b500) 100%);position:sticky;top:0;z-index:100}
.header-top{display:flex;align-items:center;justify-content:space-between;padding:16px 18px 14px}
.h-brand{display:flex;align-items:center;gap:10px}
.h-brand .b-icon{width:36px;height:36px;background:rgba(255,255,255,.15);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px}
.h-brand .b-info h2{color:var(--white);font-size:15px;font-weight:800;line-height:1.1}
.h-brand .b-info span{color:rgba(255,255,255,.55);font-size:10.5px;font-weight:500}
.h-actions{display:flex;gap:8px}
.h-btn{width:36px;height:36px;background:rgba(255,255,255,.13);border:none;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:16px;cursor:pointer;color:var(--white);transition:.2s}
.h-btn:hover{background:rgba(255,255,255,.22)}

/* ── DEATH BANNER ── */
.death-banner{background:var(--b800);padding:12px 18px;display:flex;align-items:center;gap:10px;cursor:pointer;border-bottom:1px solid rgba(255,255,255,.08)}
.death-banner .icon{font-size:20px;opacity:.85}
.death-banner .text{flex:1}
.death-banner .text .q{font-size:11px;color:rgba(255,255,255,.5);text-transform:uppercase;letter-spacing:.5px;font-weight:600}
.death-banner .text .quote{font-size:12px;color:rgba(255,255,255,.8);font-style:italic;line-height:1.4;margin-top:2px}
.death-banner .arrow{font-size:14px;color:rgba(255,255,255,.35)}

/* ── BOTTOM NAV ── */
.bnav{display:flex;background:var(--white);border-top:1px solid var(--g200);padding:6px 0 max(env(safe-area-inset-bottom,6px),6px);position:sticky;bottom:0;z-index:100}
.bn-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:5px 4px;cursor:pointer;color:var(--g400);border:none;background:none;font-family:'Open Sans',sans-serif;transition:.2s;text-decoration:none}
.bn-item .bi{font-size:22px;transition:.2s}
.bn-item .bl{font-size:10.5px;font-weight:600}
.bn-item.active,.bn-item:focus{color:var(--b500)}
.bn-item.active .bi{transform:scale(1.15)}

/* ── SCROLL AREA ── */
.scroll-area{flex:1;overflow-y:auto;padding:16px 15px 24px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.scroll-area::-webkit-scrollbar{display:none}

/* ── HERO CARD ── */
.hero-card{background:linear-gradient(160deg,var(--b800),var(--b500));border-radius:var(--r24);padding:20px 20px 18px;color:var(--white);margin-bottom:16px;position:relative;overflow:hidden;box-shadow:var(--sh3)}
.hero-card::after{content:'☪️';position:absolute;right:14px;top:10px;font-size:60px;opacity:.10;pointer-events:none}
.hero-card .greeting{font-size:12px;font-weight:500;opacity:.65;margin-bottom:2px}
.hero-card .uname{font-size:21px;font-weight:800;margin-bottom:14px}
.hero-pills{display:flex;gap:8px}
.h-pill{background:rgba(255,255,255,.13);border-radius:12px;padding:10px 12px;flex:1;text-align:center}
.h-pill .pv{font-size:20px;font-weight:800;line-height:1}
.h-pill .pl{font-size:10px;opacity:.65;font-weight:600;margin-top:2px;text-transform:uppercase;letter-spacing:.3px}
.points-badge{position:absolute;right:18px;bottom:18px;background:rgba(245,158,11,.9);border-radius:12px;padding:8px 12px;text-align:center;backdrop-filter:blur(6px)}
.points-badge .pv{font-size:18px;font-weight:800;color:var(--white);line-height:1}
.points-badge .pl{font-size:9px;color:rgba(255,255,255,.85);font-weight:600;text-transform:uppercase}

/* ── PROGRESS RING ── */
.ring-section{text-align:center;margin:0 0 16px}
.ring-wrap{position:relative;width:110px;height:110px;margin:0 auto 8px}
.ring-wrap svg{transform:rotate(-90deg)}
.rg-bg{fill:none;stroke:var(--g200);stroke-width:9}
.rg-fill{fill:none;stroke:url(#rGrad);stroke-width:9;stroke-linecap:round;stroke-dasharray:289;stroke-dashoffset:289;transition:stroke-dashoffset .9s cubic-bezier(.4,0,.2,1)}
.ring-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center}
.ring-center .rpct{font-size:22px;font-weight:800;color:var(--b700);line-height:1}
.ring-center .rlbl{font-size:9px;color:var(--g400);font-weight:700;text-transform:uppercase;letter-spacing:.3px}

/* ── SECTION HEADER ── */
.sec-head{display:flex;align-items:center;justify-content:space-between;margin:4px 0 10px}
.sec-head h3{font-size:15px;font-weight:800;color:var(--b800);display:flex;align-items:center;gap:6px}
.sec-badge{font-size:11px;font-weight:700;background:var(--b50);color:var(--b500);padding:3px 9px;border-radius:20px}

/* ── CATEGORY BLOCK ── */
.cat-block{background:var(--white);border-radius:var(--r16);box-shadow:var(--sh1);margin-bottom:12px;overflow:hidden;border:1px solid var(--g200)}
.cat-head{display:flex;align-items:center;gap:11px;padding:13px 15px;cursor:pointer;transition:.15s;user-select:none}
.cat-head:hover{background:var(--b25)}
.cat-ico{width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
.cat-info{flex:1;min-width:0}
.cat-info .cn{font-size:14px;font-weight:700;color:var(--b800)}
.cat-info .cs{font-size:11.5px;color:var(--g400);font-weight:500;margin-top:1px}
.cat-right{display:flex;flex-direction:column;align-items:flex-end;gap:3px}
.mini-bar{width:56px;height:4px;background:var(--g200);border-radius:99px;overflow:hidden}
.mini-fill{height:100%;border-radius:99px;background:linear-gradient(90deg,var(--b500),var(--b300));transition:width .5s ease}
.cat-pct{font-size:11.5px;font-weight:800;color:var(--b500)}
.chevron{font-size:13px;color:var(--g400);margin-left:5px;transition:.25s;display:inline-block}
.cat-block.open .chevron{transform:rotate(180deg)}
.items-wrap{max-height:0;overflow:hidden;transition:max-height .35s ease}
.cat-block.open .items-wrap{max-height:1400px}

/* ── IBADAH ITEM ── */
.ib-item{display:flex;align-items:center;gap:11px;padding:11px 15px;border-top:1px solid var(--g200);transition:.15s}
.ib-item:hover{background:var(--g50)}
.ib-item.done{background:var(--b25)}
.chk-btn{width:34px;height:34px;border-radius:50%;border:2.5px solid var(--g300);background:var(--white);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.2s;flex-shrink:0;font-size:15px;color:transparent}
.chk-btn.done{background:var(--green);border-color:var(--green);color:var(--white);box-shadow:0 2px 8px rgba(22,163,74,.28)}
.ib-info{flex:1;min-width:0}
.ib-info .in{font-size:13.5px;font-weight:600;color:var(--g800);transition:.2s}
.ib-info .in.done{color:var(--g400);text-decoration:line-through}
.ib-info .is{font-size:11px;color:var(--g400);margin-top:1px;display:flex;align-items:center;gap:6px}
.pts-badge{background:var(--goldL);color:var(--amber);font-size:10px;font-weight:700;padding:2px 6px;border-radius:6px}
.counter-w{display:flex;align-items:center;gap:5px;flex-shrink:0}
.cnt-btn{width:28px;height:28px;border-radius:50%;border:1.5px solid var(--g200);background:var(--white);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;color:var(--b500);transition:.15s}
.cnt-btn:hover{background:var(--b50);border-color:var(--b200)}
.cnt-val{font-size:13px;font-weight:800;color:var(--b700);min-width:22px;text-align:center}

/* ── HIKMAH ── */
.btn-hikmah{width:100%;padding:14px 16px;background:linear-gradient(135deg,var(--b600),var(--b400));border:none;border-radius:var(--r12);font-family:'Open Sans',sans-serif;font-size:14px;font-weight:700;color:var(--white);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:.2s;margin-bottom:14px;box-shadow:0 4px 14px rgba(21,101,192,.22)}
.hikmah-card{background:var(--amberL);border-radius:var(--r12);padding:14px 15px;border:1.5px solid #FDE68A;margin-bottom:14px}
.hikmah-card .hh{font-size:12px;font-weight:700;color:var(--amber);margin-bottom:6px}
.hikmah-card .ht{font-size:13px;color:var(--g800);line-height:1.6;white-space:pre-wrap}

/* ── AI CARD ── */
.ai-card{background:linear-gradient(135deg,var(--b800),var(--purple));border-radius:var(--r16);padding:18px 18px 16px;color:var(--white);margin-bottom:14px;position:relative;overflow:hidden;box-shadow:var(--sh2)}
.ai-card .ai-head{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;opacity:.6;margin-bottom:6px}
.ai-card .ai-name{font-size:14px;font-weight:800;margin-bottom:10px}
.ai-card .ai-text{font-size:13px;line-height:1.7;opacity:.9}
.ai-card .ai-btn{margin-top:14px;background:rgba(255,255,255,.18);border:1.5px solid rgba(255,255,255,.25);border-radius:var(--r8);padding:10px 16px;font-family:'Open Sans',sans-serif;font-size:13px;font-weight:700;color:var(--white);cursor:pointer;transition:.2s;width:100%}

/* ── STREAK ── */
.streak-card{background:linear-gradient(135deg,#F59E0B,#F97316);border-radius:var(--r16);padding:16px 18px;color:var(--white);display:flex;align-items:center;gap:14px;margin-bottom:14px;box-shadow:0 4px 18px rgba(245,158,11,.25)}
.streak-card .sv{margin-left:auto;font-size:34px;font-weight:800;line-height:1}

/* ── CALENDAR ── */
.month-cal-wrap{background:var(--white);border-radius:var(--r16);border:1px solid var(--g200);padding:14px;margin-bottom:14px;box-shadow:var(--sh1)}
.cal-day-names{display:grid;grid-template-columns:repeat(7,1fr);margin-bottom:8px}
.cal-day-names span{text-align:center;font-size:10px;font-weight:700;color:var(--g400);text-transform:uppercase;padding:4px 0}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.cal-cell{aspect-ratio:1;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:700}
.cal-cell.future{background:var(--g100);color:var(--g300)}
.cal-cell.no-data{background:var(--g100);color:var(--g500)}
.cal-cell.ok{background:var(--amberL);color:var(--amber)}
.cal-cell.good{background:var(--b50);color:var(--b600)}
.cal-cell.great{background:var(--greenL);color:var(--green)}
.cal-cell.today{outline:2.5px solid var(--b500);outline-offset:-2px}
.cal-cell.empty{background:transparent}
.cal-legend{display:flex;gap:12px;justify-content:center;margin-top:10px;flex-wrap:wrap}
.cl-item{display:flex;align-items:center;gap:4px;font-size:10.5px;color:var(--g500);font-weight:600}
.cl-dot{width:8px;height:8px;border-radius:50%;display:inline-block}
.month-nav-btn{background:rgba(255,255,255,.2);border:1.5px solid rgba(255,255,255,.25);border-radius:6px;color:var(--white);font-size:16px;font-weight:700;padding:2px 8px;cursor:pointer}

/* ── STAT GRID ── */
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.stat-card{background:var(--white);border-radius:var(--r16);padding:16px;box-shadow:var(--sh1);border:1px solid var(--g200);text-align:center}
.stat-card .si2{font-size:26px;margin-bottom:5px}
.stat-card .sv2{font-size:24px;font-weight:800;color:var(--b800);line-height:1}
.stat-card .sl2{font-size:11.5px;color:var(--g400);font-weight:600;margin-top:4px}

/* ── CHALLENGE CARDS ── */
.ch-card{background:var(--white);border-radius:var(--r16);border:1px solid var(--g200);margin-bottom:10px;overflow:hidden;box-shadow:var(--sh1);cursor:pointer;transition:.15s}
.ch-card:hover{box-shadow:var(--sh2);transform:translateY(-1px)}
.ch-head{display:flex;align-items:center;gap:11px;padding:13px 15px}
.ch-ico{width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
.ch-info{flex:1;min-width:0}
.ch-name{font-size:13.5px;font-weight:700;color:var(--b800)}
.ch-sub{font-size:11.5px;color:var(--g500);margin-top:2px}
.ch-badge{font-size:11.5px;font-weight:800;padding:5px 10px;border-radius:8px;flex-shrink:0}
.ch-progress{padding:0 15px 12px}
.ch-bar-track{height:5px;background:var(--g200);border-radius:99px;overflow:hidden}
.ch-bar-fill{height:100%;border-radius:99px;transition:width .6s ease}

/* ── LEADERBOARD ── */
.leaderboard-card{background:var(--white);border-radius:var(--r16);border:1px solid var(--g200);overflow:hidden;box-shadow:var(--sh1);margin-bottom:14px}
.lb-row{display:flex;align-items:center;gap:11px;padding:12px 15px;border-bottom:1px solid var(--g200)}
.lb-row:last-child{border-bottom:none}
.lb-rank{font-size:13px;font-weight:800;color:var(--g400);width:20px;flex-shrink:0;text-align:center}
.lb-rank.gold{color:#F59E0B}
.lb-rank.silver{color:var(--g400)}
.lb-rank.bronze{color:#CD7C2F}
.lb-avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--b500),var(--b300));display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;color:var(--white);flex-shrink:0}
.lb-info{flex:1}
.lb-info .ln{font-size:13.5px;font-weight:700;color:var(--g800)}
.lb-info .ls{font-size:11px;color:var(--g400);margin-top:1px}
.lb-pts{font-size:14px;font-weight:800;color:var(--b500)}
.lb-hidden-hero{background:var(--b50);padding:12px 15px;text-align:center;font-size:12px;color:var(--b500);font-weight:600;border-top:1px solid var(--b100)}
.antiriya-notice{background:var(--b50);border:1.5px solid var(--b100);border-radius:var(--r12);padding:14px 15px;margin-bottom:14px}

/* ── MATERI ── */
.materi-hero{background:linear-gradient(160deg,var(--b800),var(--b500));border-radius:var(--r24);padding:22px 20px 20px;color:var(--white);margin-bottom:18px;position:relative;overflow:hidden;box-shadow:var(--sh3)}
.materi-hero::after{content:'🕌';position:absolute;right:14px;top:10px;font-size:64px;opacity:.10;pointer-events:none}
.materi-hero h2{font-size:20px;font-weight:800;margin-bottom:4px}
.materi-topics{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:18px}
.topic-card{background:var(--white);border-radius:var(--r16);border:1px solid var(--g200);padding:14px 13px;cursor:pointer;transition:.2s;box-shadow:var(--sh1);position:relative;overflow:hidden;text-decoration:none;display:block}
.topic-card:hover{box-shadow:var(--sh2);transform:translateY(-2px)}
.topic-card .tc-icon{font-size:26px;margin-bottom:8px;display:block}
.topic-card .tc-name{font-size:12.5px;font-weight:800;color:var(--b800);line-height:1.3;margin-bottom:3px}
.topic-card .tc-count{font-size:11px;color:var(--g400);font-weight:600}
.topic-card .tc-bar{position:absolute;bottom:0;left:0;right:0;height:3px;border-radius:0 0 var(--r16) var(--r16)}
.materi-progress{background:var(--white);border-radius:var(--r12);border:1px solid var(--g200);padding:14px 16px;margin-bottom:16px;box-shadow:var(--sh1)}
.mp-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.mp-head span{font-size:13px;font-weight:700;color:var(--b800)}
.mp-head .mp-pct{font-size:13px;font-weight:800;color:var(--b500)}
.mp-bar{height:7px;background:var(--g200);border-radius:99px;overflow:hidden}
.mp-fill{height:100%;border-radius:99px;background:linear-gradient(90deg,var(--b500),var(--b300));transition:width .6s ease}
.materi-detail{background:var(--white);border-radius:var(--r16);border:1px solid var(--g200);overflow:hidden;box-shadow:var(--sh1);margin-bottom:16px}
.md-header{padding:16px 16px 12px;background:linear-gradient(135deg,var(--b800),var(--b600));color:var(--white);display:flex;align-items:center;gap:12px}
.acc-item{border-bottom:1px solid var(--g200)}
.acc-item:last-child{border-bottom:none}
.acc-head{display:flex;align-items:center;gap:12px;padding:14px 16px;cursor:pointer;transition:.15s;user-select:none}
.acc-head:hover{background:var(--b25)}
.acc-num{width:28px;height:28px;border-radius:50%;background:var(--b500);color:var(--white);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;flex-shrink:0}
.acc-title{font-size:14px;font-weight:700;color:var(--b800)}
.acc-subtitle{font-size:11.5px;color:var(--g400);margin-top:1px}
.acc-arrow{font-size:14px;color:var(--g400);transition:.25s;flex-shrink:0}
.acc-item.open .acc-arrow{transform:rotate(180deg)}
.acc-body{max-height:0;overflow:hidden;transition:max-height .4s cubic-bezier(.4,0,.2,1)}
.acc-item.open .acc-body{max-height:2000px}
.acc-content{padding:0 16px 18px 56px}
.arabic-block{background:linear-gradient(135deg,var(--b900),var(--b800));border-radius:var(--r12);padding:18px 16px;margin-bottom:12px;text-align:center}
.arabic-block .ar-text{font-size:22px;color:var(--b200);font-weight:600;line-height:1.9;direction:rtl;margin-bottom:10px}
.arabic-block .ar-latin{font-size:12.5px;color:rgba(255,255,255,.65);font-style:italic;line-height:1.6;margin-bottom:8px}
.arabic-block .ar-terjemah{font-size:12.5px;color:rgba(255,255,255,.85);font-weight:600;line-height:1.6;background:rgba(255,255,255,.08);padding:10px 12px;border-radius:8px;border-left:3px solid var(--b300)}
.makna-block{background:var(--b50);border-radius:var(--r12);padding:14px 15px;margin-bottom:10px;border-left:4px solid var(--b400)}
.makna-block .mb-title{font-size:12px;font-weight:700;color:var(--b600);text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px}
.makna-block .mb-text{font-size:13px;color:var(--g700);line-height:1.7}
.hikmah-materi{background:var(--amberL);border-radius:var(--r12);padding:13px 14px;border:1.5px solid #FDE68A;margin-bottom:10px}
.hikmah-materi .hm-title{font-size:11.5px;font-weight:700;color:var(--amber);margin-bottom:6px}
.hikmah-materi .hm-text{font-size:13px;color:var(--g800);line-height:1.7}
.read-badge{font-size:10px;font-weight:700;padding:2px 7px;border-radius:5px;margin-left:auto;flex-shrink:0}
.read-badge.done{background:var(--greenL);color:var(--green)}
.read-badge.todo{background:var(--g100);color:var(--g400)}
.btn-main{width:100%;padding:15px;background:linear-gradient(135deg,var(--b600),var(--b300));color:var(--white);border:none;border-radius:var(--r12);font-family:'Open Sans',sans-serif;font-size:15px;font-weight:700;cursor:pointer;transition:.2s;box-shadow:0 4px 18px rgba(21,101,192,.30);margin-top:6px}
.btn-main:hover{transform:translateY(-1px);box-shadow:0 6px 24px rgba(21,101,192,.38)}
.btn-main:active{transform:scale(.98)}


/* ── PROFIL ── */
.profil-hero{text-align:center;padding:24px 0 18px}
.pav{width:84px;height:84px;border-radius:50%;background:linear-gradient(135deg,var(--b600),var(--b300));display:flex;align-items:center;justify-content:center;font-size:34px;font-weight:800;color:var(--white);margin:0 auto 12px;box-shadow:0 4px 20px rgba(21,101,192,.25)}
.profil-hero .pname{font-size:19px;font-weight:800;color:var(--b800)}
.profil-hero .psince{font-size:12px;color:var(--g400);margin-top:3px}
.pstat-row{display:flex;gap:8px;margin:0 0 18px}
.ps-pill{flex:1;background:var(--b50);border-radius:var(--r12);padding:12px 8px;text-align:center;border:1px solid var(--b100)}
.ps-pill .psv{font-size:20px;font-weight:800;color:var(--b700);line-height:1}
.ps-pill .psl{font-size:10px;color:var(--g500);font-weight:600;margin-top:3px;text-transform:uppercase;letter-spacing:.3px}
.menu-block{background:var(--white);border-radius:var(--r16);border:1px solid var(--g200);overflow:hidden;margin-bottom:12px}
.m-item{display:flex;align-items:center;gap:12px;padding:14px 15px;border-bottom:1px solid var(--g200);cursor:pointer;transition:.15s;text-decoration:none;color:inherit}
.m-item:last-child{border-bottom:none}
.m-item:hover{background:var(--g50)}
.m-ico{width:36px;height:36px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0}
.m-item .mt{flex:1}
.m-item .mt .mn{font-size:13.5px;font-weight:600;color:var(--g800)}
.m-item .mt .ms{font-size:11px;color:var(--g400);margin-top:1px}
.m-item .ma{font-size:14px;color:var(--g300)}
.btn-logout{width:100%;padding:14px;background:var(--redL);border:1.5px solid #FECACA;border-radius:var(--r12);font-family:'Open Sans',sans-serif;font-size:14px;font-weight:700;color:var(--red);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:7px;transition:.2s;margin:4px 0 24px}
.btn-logout:hover{background:#FEE2E2}

/* ── MODALS ── */
.overlay{position:fixed;inset:0;background:rgba(10,31,63,.5);backdrop-filter:blur(5px);z-index:999;display:none;align-items:flex-end;justify-content:center}
.overlay.show{display:flex}
.modal{background:var(--white);border-radius:28px 28px 0 0;padding:22px 22px 36px;width:100%;max-width:420px}
.modal-handle{width:38px;height:4px;background:var(--g200);border-radius:99px;margin:0 auto 18px}
.modal h3{font-size:17px;font-weight:800;color:var(--b800);margin-bottom:14px}
.modal input,.modal select,.modal textarea{width:100%;padding:12px 13px;border:1.5px solid var(--g200);border-radius:var(--r12);font-family:'Open Sans',sans-serif;font-size:14.5px;color:var(--g800);background:var(--g50);outline:none;margin-bottom:10px}
.modal-acts{display:flex;gap:8px;margin-top:4px}
.btn-cancel{flex:1;padding:13px;border:1.5px solid var(--g200);border-radius:var(--r8);font-family:'Open Sans',sans-serif;font-size:14px;font-weight:600;color:var(--g500);background:var(--white);cursor:pointer;transition:.15s}
.btn-save{flex:2;padding:13px;background:linear-gradient(135deg,var(--b500),var(--b300));border:none;border-radius:var(--r8);font-family:'Open Sans',sans-serif;font-size:14px;font-weight:700;color:var(--white);cursor:pointer;box-shadow:0 4px 16px rgba(21,101,192,.25);transition:.2s}

/* ── TOAST ── */
.toast{position:fixed;top:20px;left:50%;transform:translateX(-50%) translateY(-80px);background:var(--b800);color:var(--white);padding:11px 18px;border-radius:30px;font-size:13px;font-weight:600;z-index:9999;transition:.3s cubic-bezier(.4,0,.2,1);white-space:nowrap;box-shadow:0 4px 20px rgba(0,0,0,.22);display:flex;align-items:center;gap:6px;max-width:90%}
.toast.show{transform:translateX(-50%) translateY(0)}

/* ── REKAP HEADER ── */
.rekap-top{background:linear-gradient(160deg,var(--b800),var(--b500));border-radius:var(--r16);padding:18px 18px 16px;color:var(--white);margin-bottom:16px;box-shadow:var(--sh2)}
.rekap-top h2{font-size:17px;font-weight:800;margin-bottom:2px}

/* ── NIAT MODAL ── */
.overlay-death{position:fixed;inset:0;background:#000;z-index:999;display:none;flex-direction:column;overflow-y:auto}
.overlay-death.show{display:flex}

/* ── ANIMATIONS ── */
@keyframes fadeUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeDown{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes chkBounce{0%{transform:scale(.5)}60%{transform:scale(1.2)}100%{transform:scale(1.04)}}
.chk-btn.done{animation:chkBounce .28s ease both}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.page.active{animation:fadeIn .25s ease both}

/* ── AUTH ── */
body.auth-bg{display:flex;align-items:center;justify-content:center;padding:24px;min-height:100vh;background:linear-gradient(160deg,var(--b900) 0%,var(--b700) 55%,var(--b500) 100%)}
.auth-box{width:100%;max-width:420px}
.auth-brand{text-align:center;margin-bottom:28px}
.auth-brand .ab-icon{width:72px;height:72px;background:rgba(255,255,255,.12);border:1.5px solid rgba(255,255,255,.2);border-radius:20px;display:flex;align-items:center;justify-content:center;font-size:32px;margin:0 auto 14px}
.auth-brand h1{color:var(--white);font-size:26px;font-weight:800}
.auth-brand p{color:rgba(255,255,255,.55);font-size:13px;margin-top:4px}
.auth-card{background:var(--white);border-radius:20px;padding:28px;box-shadow:var(--sh3)}
.auth-card h2{font-size:19px;font-weight:800;color:var(--b800);margin-bottom:4px}
.auth-card .sub{font-size:13px;color:var(--g500);margin-bottom:20px}
.form-field{margin-bottom:14px}
.form-field label{display:block;font-size:12.5px;font-weight:700;color:var(--g700);margin-bottom:6px;text-transform:uppercase;letter-spacing:.4px}
.form-field .iw{position:relative;display:flex;align-items:center}
.form-field .iw .ico{position:absolute;left:13px;font-size:17px;pointer-events:none;color:var(--g400)}
.form-field input{width:100%;padding:12px 12px 12px 40px;border:1.5px solid var(--g200);border-radius:var(--r12);font-family:'Open Sans',sans-serif;font-size:14.5px;color:var(--g800);background:var(--g50);outline:none;transition:.2s}
.form-field input:focus{border-color:var(--b400);background:var(--white);box-shadow:0 0 0 3px rgba(21,101,192,.10)}
.btn-auth{width:100%;padding:14px;background:linear-gradient(135deg,var(--b600),var(--b300));color:var(--white);border:none;border-radius:var(--r12);font-family:'Open Sans',sans-serif;font-size:15px;font-weight:700;cursor:pointer;transition:.2s;box-shadow:0 4px 18px rgba(21,101,192,.30);margin-top:6px}
.btn-auth:hover{transform:translateY(-1px)}
.auth-switch{text-align:center;margin-top:16px;font-size:13px;color:var(--g500)}
.auth-switch a{color:var(--b500);font-weight:700;text-decoration:none}
.err-msg{background:var(--redL);color:var(--red);font-size:13px;padding:10px 14px;border-radius:var(--r8);margin-bottom:14px;font-weight:600}

/* ═══════════════════════════════════
   MATERI PAGE
═══════════════════════════════════ */
.materi-block{background:var(--white);border-radius:var(--r16);box-shadow:var(--sh1);margin-bottom:12px;overflow:hidden;border:1px solid var(--g200)}
.materi-head{display:flex;align-items:center;gap:11px;padding:13px 15px;cursor:pointer;transition:.15s;user-select:none}
.materi-head:hover{background:var(--b25)}
.materi-ico{width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
.materi-info{flex:1;min-width:0}
.materi-title{font-size:14px;font-weight:700;color:var(--b800)}
.materi-sub{font-size:11.5px;color:var(--g400);font-weight:500;margin-top:1px}
.materi-body{max-height:0;overflow:hidden;transition:max-height .4s ease}
.iftitah-version-badge{font-size:11px;font-weight:700;background:var(--b50);color:var(--b600);padding:5px 10px;border-radius:6px;display:inline-block;margin-bottom:6px}
.materi-block.open .materi-body{max-height:5000px}
.materi-block.open .chevron{transform:rotate(180deg)}
.materi-content{padding:14px 15px 18px;border-top:1px solid var(--g100)}
.materi-section-title{font-size:13px;font-weight:800;color:var(--b700);margin:14px 0 8px;display:flex;align-items:center;gap:6px}
.materi-section-title:first-child{margin-top:0}
.materi-text{font-size:13px;color:var(--g700);line-height:1.7;margin-bottom:10px}
.materi-card{background:var(--g50);border-radius:var(--r12);padding:0;margin-bottom:10px;border-left:3px solid var(--b400);overflow:hidden}
.mc-toggle-header{display:flex;align-items:center;justify-content:space-between;padding:13px 14px;cursor:pointer;user-select:none;transition:.15s;gap:8px}
.mc-toggle-header:hover{background:rgba(0,0,0,.03)}
.mc-header-left{flex:1;min-width:0}
.mc-toggle-arrow{font-size:12px;color:var(--g400);transition:.25s;flex-shrink:0;font-style:normal}
.materi-card.mc-open .mc-toggle-arrow{transform:rotate(180deg)}
.mc-toggle-body{max-height:0;overflow:hidden;transition:max-height .35s ease}
.materi-card.mc-open .mc-toggle-body{max-height:2000px}
.mc-toggle-body-inner{padding:0 14px 14px}
.mc-arab{font-size:19px;color:var(--b800);font-weight:600;line-height:1.8;direction:rtl;text-align:right;margin-bottom:6px}
.mc-latin{font-size:11.5px;color:var(--g500);font-style:italic;margin-bottom:8px;line-height:1.5}
.mc-head{font-size:13px;font-weight:800;margin-bottom:0}
.mc-head-preview{font-size:13px;font-weight:800;margin-bottom:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mc-arab-preview{font-size:15px;color:var(--b800);font-weight:600;direction:rtl;text-align:right;line-height:1.6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}
.mc-makna{font-size:12.5px;color:var(--g700);line-height:1.75}
.materi-insight{background:linear-gradient(135deg,var(--b800),var(--b600));border-radius:var(--r12);padding:14px 15px;display:flex;gap:10px;align-items:flex-start;margin-top:14px}
.mi-icon{font-size:20px;flex-shrink:0;margin-top:1px}
.mi-text{font-size:12.5px;color:rgba(255,255,255,.9);line-height:1.7;font-style:italic}

/* ═══════════════════════════════════
   QOTD CARD (on Materi page)
═══════════════════════════════════ */
.qotd-card{background:linear-gradient(135deg,var(--b900,#0A1F3F),#1a237e);border-radius:var(--r16);padding:20px 20px 18px;margin-bottom:14px;cursor:pointer;position:relative;overflow:hidden;box-shadow:var(--sh3);transition:.2s}
.qotd-card:hover{transform:translateY(-2px);box-shadow:var(--sh4)}
.qotd-card:active{transform:scale(.98)}
.qotd-bg-text{position:absolute;right:-10px;top:-14px;font-size:80px;opacity:.07;font-weight:900;color:white;pointer-events:none;user-select:none}
.qotd-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:rgba(255,255,255,.55);margin-bottom:6px}
.qotd-sub{font-size:14.5px;font-weight:700;color:var(--white);margin-bottom:12px;line-height:1.4}
.qotd-cta{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.2);border-radius:30px;padding:8px 15px;font-size:13px;font-weight:700;color:var(--white)}

/* ═══════════════════════════════════
   QOTD MODAL
═══════════════════════════════════ */
.qotd-modal-header{background:linear-gradient(135deg,#0A1F3F,#1a237e);padding:24px 20px 20px;text-align:center;position:relative}
.qotd-modal-icon{font-size:36px;margin-bottom:6px}
.qotd-modal-label{font-size:13px;font-weight:700;color:rgba(255,255,255,.7);text-transform:uppercase;letter-spacing:.6px}
.qotd-modal-body{padding:20px 20px 4px}
.qotd-ayat-arabic{font-size:22px;color:var(--b800);font-weight:700;direction:rtl;text-align:right;line-height:1.8;margin-bottom:12px;padding:16px;background:var(--b25);border-radius:var(--r12)}
.qotd-ayat-trans{font-size:13.5px;color:var(--g700);line-height:1.75;font-style:italic;margin-bottom:10px}
.qotd-ayat-ref{font-size:11.5px;font-weight:700;color:var(--b500);background:var(--b50);display:inline-block;padding:4px 10px;border-radius:20px;margin-bottom:12px}
.qotd-ayat-tafsir{font-size:12.5px;color:var(--g600);line-height:1.7;background:var(--goldL);border-radius:var(--r8);padding:12px 13px;border-left:3px solid var(--gold)}
.qotd-anim{animation:fadeUp .35s ease both}