/* Qurio member area — mobile-first */
body{background:var(--paper)}
.app{max-width:480px;margin:0 auto;min-height:100dvh;background:var(--cream);position:relative;display:flex;flex-direction:column}
@media (min-width:520px){.app{box-shadow:0 0 0 1px var(--line),0 30px 60px -30px rgba(15,61,46,.25)}}
main.view{flex:1;padding:12px 18px calc(110px + env(safe-area-inset-bottom));animation:vin .28s var(--ease)}
.has-cta main.view{padding-bottom:calc(180px + env(safe-area-inset-bottom))}
@keyframes vin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:480px;z-index:40;
  background:rgba(255,253,248,.96);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid var(--line);
  display:grid;grid-template-columns:repeat(4,1fr);padding:6px 6px calc(8px + env(safe-area-inset-bottom))}
.nav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:52px;font-size:11.5px;font-weight:500;color:var(--ink3);text-decoration:none;border-radius:12px}
.nav a.on{color:var(--green);font-weight:700}
.nav a.on svg{stroke-width:2.3}
.top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:6px 0 14px;min-height:48px}
.top .mid{text-align:center;flex:1;min-width:0}
.top .mid b{font-size:15px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.icon-btn{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;border:1px solid var(--line);background:var(--card);flex:none;color:var(--ink);text-decoration:none;
  transition-property:transform,background-color;transition-duration:150ms}
.icon-btn:active{transform:scale(.94)}
.icon-btn.plain{border:0;background:none}
.hello small{display:block;font-size:13px;color:var(--ink2)}
.hello h1{font-family:var(--f-head);font-size:25px;color:var(--green);line-height:1.15}
.h-page{font-family:var(--f-head);font-size:27px;color:var(--green);line-height:1.15}
.stack>*+*{margin-top:10px}
.section-t{font-size:13px;font-weight:700;color:var(--ink2);margin:22px 2px 8px;display:flex;justify-content:space-between;align-items:center}

/* login */
.login{padding:30px 24px 32px;display:flex;flex-direction:column;min-height:100dvh}
.logo{display:flex;align-items:center;gap:10px}
.logo .q{width:40px;height:40px;border-radius:50%;background:var(--green);color:#fff;font-family:var(--f-head);display:grid;place-items:center;font-size:22px}
.logo span{font-family:var(--f-head);font-size:26px;color:var(--green)}
.login h1{font-family:var(--f-head);font-size:34px;line-height:1.1;color:var(--green);margin:40px 0 10px}
.login h1 em{color:var(--emerald)}
.login .btn{margin-top:22px;min-height:52px;font-size:16px}
.login .foot{margin-top:auto;padding-top:28px;text-align:center;font-size:13px;color:var(--ink2)}
.login .foot a{color:var(--emerald);font-weight:600}
.bism{font-family:var(--f-ar);direction:rtl;color:var(--gold);font-size:22px;line-height:2.2}

/* ayat card */
.ayat-card{border-radius:22px;background:linear-gradient(165deg,var(--green-2),var(--green-deep) 75%);color:#fff;padding:18px 18px 16px;position:relative;overflow:hidden}
.ayat-card .row{display:flex;justify-content:space-between;align-items:center;gap:8px}
.ayat-card .tag{font-size:11.5px;font-weight:600;color:var(--gold-l);background:rgba(255,255,255,.08);padding:4px 10px;border-radius:999px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ayat-card .ar{font-size:28px;text-align:right;margin:10px 0 4px;color:#fff}
.ayat-card p{font-size:14.5px;line-height:1.5;color:rgba(255,255,255,.9);font-style:italic}
.ayat-card .src{font-size:12.5px;color:var(--gold);font-weight:600;margin-top:8px}
.ayat-card .btn{margin-top:14px;width:100%}
.ayat-card .done{display:flex;align-items:center;gap:8px;margin-top:14px;padding:11px 12px;border-radius:12px;background:rgba(255,255,255,.08);font-size:13.5px;color:var(--gold-l)}

/* tasbih */
.tasbih{padding:14px 16px}
.tasbih .row{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.tasbih .big{font-family:var(--f-head);font-size:30px;color:var(--green);line-height:1}
.tasbih .big small{font-family:var(--f-body);font-size:13px;color:var(--ink2);margin-left:5px}
.beads{display:grid;grid-template-columns:repeat(17,1fr);gap:5px;margin-top:12px}
.beads i{aspect-ratio:1;border-radius:50%;background:#EDE6D5;box-shadow:inset 0 -1px 0 rgba(0,0,0,.06);transition-property:background-color,transform;transition-duration:300ms}
.beads i.on{background:radial-gradient(circle at 35% 30%,#3FA27C,var(--emerald) 60%,var(--green));box-shadow:none}
.beads i.today{background:radial-gradient(circle at 35% 30%,#F1D778,var(--gold) 65%);outline:2px solid var(--gold-l);animation:bead .7s var(--ease)}
.beads i.next{outline:1.5px dashed var(--gold);outline-offset:1px}
@keyframes bead{0%{transform:scale(.3)}60%{transform:scale(1.25)}100%{transform:scale(1)}}
.tasbih .note{font-size:12.5px;color:var(--ink2);margin-top:9px}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.stat{padding:12px 14px}
.stat b{font-size:22px;font-weight:700;color:var(--green)}
.stat span{display:block;font-size:12px;color:var(--ink2)}
.row-card{display:flex;gap:12px;align-items:center;padding:13px 14px;text-decoration:none;color:inherit;width:100%;text-align:left}
.row-card .ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--mint);color:var(--emerald);flex:none}
.row-card .ic.gold{background:var(--gold-l);color:var(--gold-ink)}
.row-card b{font-size:14.5px;display:block}
.row-card small{font-size:12.5px;color:var(--ink2);display:block;line-height:1.4}
.row-card .chev{margin-left:auto;color:var(--ink3)}
.check{width:28px;height:28px;border-radius:9px;border:2px solid var(--mint-line);flex:none;display:grid;place-items:center;background:#fff;color:#fff;
  transition-property:background-color,border-color;transition-duration:150ms}
.check.on{background:var(--emerald);border-color:var(--emerald)}
.check svg{width:16px;height:16px;stroke-width:3}

/* ayat steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;background:var(--paper);border-radius:14px;padding:4px;margin-bottom:14px;position:sticky;top:0;z-index:5}
.steps button{font-size:13px;font-weight:600;padding:10px 0;border-radius:10px;color:var(--ink2);min-height:40px}
.steps button.done{color:var(--emerald)}
.steps button.on{background:var(--card);color:var(--green);box-shadow:var(--shadow-sm)}
.read-ar{font-size:30px;text-align:right;color:var(--green);padding:6px 2px}
.read-ar .vn{font-size:.72em;color:var(--gold-ink)}
.tr{font-size:15.5px;line-height:1.6;color:var(--ink)}
.tr sup{font-size:11px;color:var(--gold-ink);font-weight:700;margin-right:3px}
.audio-row{display:flex;gap:8px;align-items:center;margin:12px 0}
.words{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:7px;direction:rtl}
.words[style*="display:none"]{display:none}
.w{direction:ltr;min-width:0;padding:3px 6px 9px;border-radius:14px;border:1.5px solid var(--line);background:var(--card);text-align:center;
  transition-property:border-color,background-color,box-shadow,transform;transition-duration:150ms}
.w:active{transform:scale(.96)}
.w .ar{font-size:24px;line-height:2.1;display:block}
.w span{display:block;font-size:11.5px;line-height:1.25;font-weight:600;color:var(--emerald)}
.w.on{border-color:var(--gold);background:var(--gold-soft);box-shadow:0 0 0 4px rgba(201,162,39,.16)}
.w.on span{color:var(--gold-ink)}
.w.key::after{content:"";display:block;width:6px;height:6px;border-radius:50%;background:var(--gold);margin:4px auto 0}
.vsep{grid-column:1/-1;direction:ltr;width:100%;display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink3);font-weight:600;margin:6px 0 2px}
.vsep::before,.vsep::after{content:"";flex:1;height:1px;background:var(--line)}
.def{padding:14px 15px}
.def .h{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.def .h .ar{font-size:28px;line-height:1.9}
.def .h b{font-size:15.5px}
.def p{font-size:14px;color:var(--ink2);line-height:1.55;margin-top:6px}
.def .note{margin-top:10px;padding:10px 12px;border-radius:12px;background:var(--gold-soft);color:var(--ink);font-size:14px;line-height:1.55}
.also .ar{font-size:21px;text-align:right;line-height:2.1}
.also p{font-size:13px;color:var(--ink2)}
.also .item+.item{border-top:1px dashed var(--line);margin-top:8px;padding-top:6px}
.blk{border-radius:16px;padding:14px 15px}
.blk .eyebrow{margin-bottom:5px}
.blk p{font-size:15px;line-height:1.6}
.blk.m{background:var(--mint)}
.blk.g{background:var(--gold-soft);border:1px solid var(--gold-l)}
.blk.g .eyebrow{color:var(--gold-ink)}
.ref{display:flex;gap:6px;align-items:center;font-size:12.5px;color:var(--ink2)}
.ref svg{width:15px;height:15px}
.saved{font-size:12px;color:var(--ink3);margin-top:6px;min-height:18px}
.cta-bar{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(66px + env(safe-area-inset-bottom));width:100%;max-width:480px;padding:12px 18px;
  background:linear-gradient(to top,var(--cream) 72%,rgba(251,247,238,0));z-index:30}
.cta-bar .btn{width:100%;min-height:52px}

/* celebration */
.celebrate{position:fixed;inset:0;z-index:80;background:rgba(11,46,34,.55);display:grid;place-items:center;padding:24px;animation:vin .25s var(--ease)}
.celebrate .box{background:var(--cream);border-radius:24px;padding:26px 22px;text-align:center;max-width:360px;width:100%}
.celebrate h2{font-family:var(--f-head);font-size:26px;color:var(--green);margin:10px 0 6px}
.celebrate p{color:var(--ink2);font-size:15px}
.celebrate .beads{margin:16px 0 18px}

/* curhat */
.chat-h{display:flex;align-items:center;gap:10px;margin:0 -18px;padding:6px 18px 12px;border-bottom:1px solid var(--line)}
.chat-h .q{width:42px;height:42px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center;font-family:var(--f-head);font-size:20px;flex:none}
.chat-h b{font-size:16px;display:block}
.chat-h small{display:block;font-size:12px;color:var(--ink2)}
.msgs{padding:14px 0 150px;display:flex;flex-direction:column;gap:10px}
.me-msg{align-self:flex-end;max-width:82%;background:var(--green);color:#fff;border-radius:18px 18px 4px 18px;padding:11px 14px;font-size:15px;line-height:1.45;white-space:pre-wrap}
.bot{align-self:flex-start;max-width:94%;background:var(--card);border:1px solid var(--line);border-radius:18px 18px 18px 4px;padding:12px 14px;font-size:15px;line-height:1.5}
.bot .quote{margin:10px 0;border-radius:12px;background:var(--mint);padding:10px 12px}
.bot .quote .ar{font-size:22px;text-align:right}
.bot .quote p{font-size:14px;font-style:italic}
.bot .quote small{display:block;font-size:12px;font-weight:700;color:var(--emerald);margin-top:4px}
.bot .step b{color:var(--gold-ink)}
.bot.warn{border-color:#F1C9C4;background:#FFF8F6}
.bot .meta{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:10px;padding-top:8px;border-top:1px dashed var(--line);font-size:12px;color:var(--ink2)}
.bot .meta>span:last-child{display:flex;gap:2px}
.bot .meta button{display:inline-flex;align-items:center;gap:4px;font-size:12.5px;font-weight:600;color:var(--ink2);padding:8px 8px;border-radius:9px;min-height:36px}
.bot .meta button svg{width:15px;height:15px}
.typing{display:inline-flex;gap:4px;padding:14px}
.typing i{width:7px;height:7px;border-radius:50%;background:var(--ink3);animation:ty 1s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes ty{0%,100%{opacity:.3;transform:none}50%{opacity:1;transform:translateY(-3px)}}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chips button{font-size:13px;font-weight:600;padding:9px 13px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--green);min-height:40px}
.composer{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(66px + env(safe-area-inset-bottom));width:100%;max-width:480px;padding:10px 14px 8px;background:var(--cream);border-top:1px solid var(--line);z-index:30}
.composer form{display:flex;align-items:flex-end;gap:8px;background:var(--card);border:1.5px solid var(--line);border-radius:16px;padding:6px 6px 6px 14px}
.composer textarea{flex:1;border:0;background:none;resize:none;font-size:16px;line-height:1.4;max-height:120px;padding:8px 0;outline:none}
.composer .send{width:42px;height:42px;border-radius:12px;background:var(--green);color:#fff;display:grid;place-items:center;flex:none}
.composer .send[disabled]{opacity:.5}
.composer small{display:block;text-align:center;font-size:11px;color:var(--ink3);margin-top:5px}
.empty-chat{text-align:center;padding:26px 8px 10px;color:var(--ink2);font-size:14.5px}
.empty-chat h2{font-family:var(--f-head);color:var(--green);font-size:23px;margin-bottom:6px}

/* belajar */
.path{position:relative}
.path::before{content:"";position:absolute;left:19px;top:26px;bottom:26px;width:2px;background:repeating-linear-gradient(to bottom,var(--line) 0 5px,transparent 5px 9px)}
.stage{display:flex;gap:12px;align-items:center;padding:9px 0;position:relative;width:100%;text-align:left;min-height:56px}
.stage .dot{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;flex:none;background:#EDE6D5;color:var(--ink3);z-index:1}
.stage.done .dot{background:var(--emerald);color:#fff}
.stage.cur .dot{background:var(--gold);color:var(--green-deep);box-shadow:0 0 0 5px var(--gold-l)}
.stage b{font-size:15px;display:block}
.stage small{font-size:12.5px;color:var(--ink2)}
.stage.lock b{color:var(--ink3)}
.letters{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px;direction:rtl}
.letter{border-radius:14px;background:var(--card);border:1px solid var(--line);text-align:center;padding:4px 0 8px;direction:ltr;
  transition-property:transform,border-color;transition-duration:150ms}
.letter:active{transform:scale(.96)}
.letter .ar{font-size:40px;line-height:2;color:var(--green);display:block;padding-bottom:4px}
.letter span{display:inline-flex;align-items:center;gap:4px;font-size:13px;font-weight:600;color:var(--emerald)}
.letter span svg{width:15px;height:15px}
.letter.play{border-color:var(--gold);background:var(--gold-soft)}
.tip{display:flex;gap:8px;font-size:14px;line-height:1.5;color:var(--ink2);background:var(--gold-soft);border-radius:12px;padding:11px 12px}
.tip svg{color:var(--gold-ink);width:18px;height:18px;margin-top:2px}
.quiz .qa{font-size:64px;text-align:center;color:var(--green);line-height:1.9;margin:6px 0 16px}
.quiz .opts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.quiz .opts button{min-height:52px;border-radius:13px;border:1.5px solid var(--line);background:var(--card);font-weight:600;font-size:16px}
.quiz .opts button.right{border-color:var(--emerald);background:var(--mint);color:var(--emerald)}
.quiz .opts button.wrong{border-color:var(--red);background:var(--red-soft);color:var(--red)}
.progress-bar{height:7px;border-radius:9px;background:var(--paper);overflow:hidden}
.progress-bar i{display:block;height:100%;background:var(--emerald);border-radius:9px;transition:width .4s var(--ease)}
.seg{display:flex;background:var(--paper);border-radius:13px;padding:4px;gap:4px}
.seg button{flex:1;min-height:40px;border-radius:10px;font-weight:600;font-size:14px;color:var(--ink2)}
.seg button.on{background:var(--card);color:var(--green);box-shadow:var(--shadow-sm)}

/* quran reader */
.surah-list .row-card{padding:11px 14px}
.surah-list .no{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:var(--paper);font-weight:700;font-size:13px;color:var(--green);flex:none}
.surah-list .arn{margin-left:auto;font-family:var(--f-ar);font-size:22px;color:var(--green);direction:rtl}
.search{display:flex;align-items:center;gap:8px;border:1.5px solid var(--line);background:var(--card);border-radius:13px;padding:0 12px;min-height:48px}
.search input{flex:1;border:0;background:none;outline:none;font-size:16px}
.verse{padding:14px 0;border-bottom:1px solid var(--line)}
.verse .vh{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.verse .vh b{font-size:12.5px;color:var(--gold-ink);background:var(--gold-soft);border-radius:999px;padding:3px 10px}

/* sheet */
.sheet-bg{position:fixed;inset:0;background:rgba(11,46,34,.4);z-index:70;animation:fade .2s}
@keyframes fade{from{opacity:0}}
.sheet{position:fixed;left:50%;bottom:0;transform:translateX(-50%);width:100%;max-width:480px;background:var(--cream);border-radius:22px 22px 0 0;z-index:71;
  padding:10px 18px calc(22px + env(safe-area-inset-bottom));max-height:86dvh;overflow:auto;animation:up .28s var(--ease)}
@keyframes up{from{transform:translate(-50%,40px);opacity:.4}}
.sheet .grab{width:40px;height:5px;border-radius:9px;background:var(--line);margin:0 auto 12px}
.sheet h3{font-family:var(--f-head);font-size:22px;color:var(--green);margin-bottom:4px}
.install{background:var(--green);color:#fff;border:0}
.install .ic{background:rgba(255,255,255,.1)!important;color:var(--gold)!important}
.install small{color:rgba(255,255,255,.75)!important}
.skeleton{background:linear-gradient(90deg,#EFE8D8,#F7F2E6,#EFE8D8);background-size:200% 100%;animation:sk 1.2s infinite;border-radius:14px}
@keyframes sk{to{background-position:-200% 0}}