:root{--bg:#f4f3ee;--surface:#faf9f5;--raised:#fff;--line:#e2dfd4;--text:#2b2a27;--muted:#76726a;--accent:#3f6b5a;--accent-soft:#e3ece7;--on-accent:#fff;--hover:#ebeae2;--danger:#a24a3d;--warn:#a57a2c;--r:6px;--side:248px;--sans:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;--arab:"Amiri","Noto Naskh Arabic","Scheherazade New",serif}
:root[data-theme=dark]{--bg:#1c1e1c;--surface:#222523;--raised:#292c2a;--line:#363a37;--text:#e7e5de;--muted:#9a978e;--accent:#79a592;--accent-soft:#2a3a33;--on-accent:#12201a;--hover:#2d312e;--danger:#cf7e70;--warn:#c9a05a}
*{box-sizing:border-box;margin:0}html,body{height:100%}
body{background:var(--bg);color:var(--text);font:15px/1.55 var(--sans);-webkit-font-smoothing:antialiased;overflow:hidden}
a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit;color:inherit}
.app{display:grid;grid-template-columns:var(--side) minmax(0,1fr);grid-template-areas:"side main";height:100%}.side{grid-area:side}#view{grid-area:main}.top{display:none}
.side{background:var(--surface);border-right:1px solid var(--line);display:flex;flex-direction:column;padding:14px 10px;gap:2px;min-height:0}
.brand{display:flex;align-items:center;gap:10px;padding:6px 10px 14px;font-weight:600;font-size:16px}.brand img{width:26px;height:26px;border-radius:var(--r)}
.nav{display:flex;flex-direction:column;gap:2px}
.nav a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r);color:var(--muted);transition:background .12s,color .12s}
.nav a:hover{background:var(--hover);color:var(--text)}.nav a.on{background:var(--hover);color:var(--text);font-weight:500}
.nav svg,.ic{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.side-foot{margin-top:auto;padding:10px;font-size:12px;color:var(--muted);border-top:1px solid var(--line)}
.sync{display:flex;align-items:center;gap:8px}.sync i{width:7px;height:7px;border-radius:50%;background:var(--muted)}
.sync[data-s=ok] i{background:var(--accent)}.sync[data-s=busy] i{background:var(--warn)}.sync[data-s=err] i{background:var(--danger)}
#view{overflow:auto;height:100%;--vpt:32px;padding:var(--vpt) clamp(16px,4vw,48px) 80px;}#view.in{animation:fi .16s ease}#view.busy{opacity:.55;transition:opacity .15s}@keyframes fi{from{opacity:0}to{opacity:1}}
.wrap{max-width:820px;margin:0 auto}
h1{font-size:25px;font-weight:600;letter-spacing:-.01em}h2{font-size:15px;font-weight:600}
.head{margin-bottom:22px}.head p,.muted{color:var(--muted)}.back{display:inline-flex;gap:6px;align-items:center;color:var(--muted);margin-bottom:10px;font-size:14px}.back:hover{color:var(--text)}
.card{background:var(--raised);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;margin-bottom:12px}
.card>h2{margin-bottom:8px}.grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}.grid .card{margin:0}
.two{display:grid;gap:12px;grid-template-columns:1fr 1fr;margin-bottom:12px}.two .card{margin:0}
a.card{display:block;transition:background .12s}a.card:hover{background:var(--hover)}a.card h2{margin-bottom:4px}a.card p{color:var(--muted);font-size:14px}
.btn{border:1px solid var(--line);background:var(--raised);padding:7px 13px;border-radius:var(--r);cursor:pointer;transition:background .12s;display:inline-flex;align-items:center;gap:6px;line-height:1.4}
.btn:hover{background:var(--hover)}.btn.primary{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}.btn.primary:hover{filter:brightness(1.06)}
.btn.danger{color:var(--danger)}.btn.sm{padding:4px 10px;font-size:13px}.btn[aria-pressed=true]{background:var(--accent-soft);border-color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.row.sp{justify-content:space-between}.mt{margin-top:12px}
.field{display:flex;flex-direction:column;gap:4px;margin-bottom:10px}.field label{font-size:13px;color:var(--muted)}
input[type=text],input[type=search],input[type=number],select,textarea{background:var(--raised);border:1px solid var(--line);border-radius:var(--r);padding:8px 10px;width:100%}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}.chip{border:1px solid var(--line);background:transparent;padding:4px 11px;border-radius:var(--r);cursor:pointer;font-size:13px;color:var(--muted)}.chip.on{background:var(--accent-soft);border-color:var(--accent);color:var(--text)}
.bar{height:6px;background:var(--hover);border-radius:3px;overflow:hidden}.bar>i{display:block;height:100%;background:var(--accent);transition:width .25s}
.stat{font-size:28px;font-weight:600;line-height:1.1}.stat small{font-size:13px;font-weight:400;color:var(--muted)}
.arab{font-family:var(--arab);font-size:var(--af,28px);line-height:2;direction:rtl;text-align:right}
.latin{color:var(--accent);font-size:14px;font-style:italic}.src{color:var(--muted);font-size:13px;margin-top:6px}
.item{padding:14px 0;border-top:1px solid var(--line)}.item:first-child{border-top:0;padding-top:0}
.ayah{display:grid;grid-template-columns:34px 1fr;gap:10px}.num{color:var(--muted);font-size:13px;padding-top:6px}
.ibadah{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0;border-top:1px solid var(--line)}.ibadah:first-child{border-top:0}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}.seg button{border:0;background:transparent;padding:5px 12px;cursor:pointer}.seg button+button{border-left:1px solid var(--line)}
.seg button.ok.on{background:var(--accent);color:var(--on-accent)}.seg button.no.on{background:var(--danger);color:#fff}
.times{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px}.t{border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;background:var(--raised)}.t b{display:block;font-size:19px;font-variant-numeric:tabular-nums}.t.next{border-color:var(--accent);background:var(--accent-soft)}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}.cal .dh{font-size:12px;color:var(--muted);text-align:center;padding:4px 0}
.d{aspect-ratio:1/.9;border:1px solid var(--line);border-radius:var(--r);background:var(--raised);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;position:relative}
.d:hover{background:var(--hover)}.d small{font-size:10.5px;color:var(--muted)}.d.today{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}.d.sel{background:var(--accent-soft)}.d.off{opacity:.35;cursor:default}
.d i{position:absolute;bottom:4px;width:5px;height:5px;border-radius:50%;background:var(--accent)}.d i.p{background:var(--warn)}
.tasbih{width:min(260px,70vw);aspect-ratio:1;border-radius:50%;border:1px solid var(--line);background:var(--raised);font-size:64px;font-weight:600;cursor:pointer;margin:18px auto;display:block;transition:transform .06s,background .12s;user-select:none;-webkit-tap-highlight-color:transparent}.tasbih:active{transform:scale(.97);background:var(--accent-soft)}
.compass{width:150px;height:150px;border-radius:50%;border:1px solid var(--line);position:relative;margin:8px auto;background:var(--raised)}.compass i{position:absolute;left:50%;top:10px;width:2px;height:65px;background:var(--accent);transform-origin:50% 65px;border-radius:2px}.compass b{position:absolute;inset:0;display:grid;place-items:center;font-size:13px;color:var(--muted);padding-top:70px}
.empty{padding:30px 0;text-align:center;color:var(--muted)}.toast{position:fixed;left:50%;bottom:84px;transform:translateX(-50%);background:var(--text);color:var(--bg);padding:8px 14px;border-radius:var(--r);font-size:14px;z-index:9;opacity:0;transition:opacity .15s;pointer-events:none}.toast.on{opacity:1}
.skel{height:14px;background:var(--hover);border-radius:3px;margin:10px 0;animation:p 1.1s infinite alternate}@keyframes p{to{opacity:.4}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
[hidden]{display:none!important}
.playing{background:var(--accent-soft);border-radius:var(--r)}
/* --- Profil, avatar, WhatsApp, modal, ibadah (tambahan) --- */
input[type=tel],input[type=email],input[type=password]{background:var(--raised);border:1px solid var(--line);border-radius:var(--r);padding:8px 10px;width:100%}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;font-weight:600;overflow:hidden;flex:none}.avatar img{width:100%;height:100%;object-fit:cover}.avatar.lg{width:72px;height:72px;font-size:28px}
.me{display:flex;align-items:center;gap:10px;padding:6px 4px 10px;border-radius:var(--r);color:var(--text);min-width:0}.me:hover{background:var(--hover)}.me span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}
.ico{display:inline-block;width:1.7em}
.seg button.pr.on{background:var(--warn);color:#fff}.seg button.kh.on{background:var(--accent);color:var(--on-accent)}
.btn.wa{color:var(--accent);border-color:var(--accent)}.btn:disabled{opacity:.5;cursor:not-allowed}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.45);display:grid;place-items:center;z-index:20;padding:16px}.modal .box{background:var(--raised);border:1px solid var(--line);border-radius:var(--r);padding:18px;width:min(340px,100%)}.modal canvas{width:100%;aspect-ratio:1;border-radius:50%;touch-action:none;cursor:grab;background:var(--hover);display:block}
.fold{border-top:1px solid var(--line);padding:10px 0}.fold:first-of-type{border-top:0}.fold summary{cursor:pointer;font-weight:500;list-style:none}.fold summary::-webkit-details-marker{display:none}.fold summary::after{content:"›";float:right;color:var(--muted);transition:transform .15s}.fold[open] summary::after{transform:rotate(90deg)}
.creator p{margin-bottom:10px}.creator blockquote{border-left:2px solid var(--accent);padding-left:12px;margin:12px 0;color:var(--muted);font-style:italic}
textarea{resize:vertical}

/* --- Responsif: desktop = sidebar, ponsel = bar atas + bar bawah ala WhatsApp --- */
@media(max-width:760px){
 html,body{overflow:hidden}.app{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;grid-template-areas:"top" "main" "side";height:100dvh}
 .top{grid-area:top;display:flex;align-items:center;justify-content:space-between;padding:8px 14px;padding-top:max(8px,env(safe-area-inset-top));background:var(--surface);border-bottom:1px solid var(--line)}
 .top .brand{padding:0}.top .me{padding:0}.top .avatar{width:34px;height:34px}
 .side{flex-direction:row;border-right:0;border-top:1px solid var(--line);padding:4px 6px max(4px,env(safe-area-inset-bottom))}
 .brand.in-side,.side .brand,.side-foot{display:none}.nav{flex-direction:row;width:100%;justify-content:space-around}.nav a{flex-direction:column;gap:2px;font-size:11px;padding:6px 4px;flex:1;align-items:center;min-width:0}
 .nav a.on{background:transparent;color:var(--accent)}
 #view{padding:18px 14px 28px}.two{grid-template-columns:1fr}.arab{font-size:var(--af,25px)}.toast{bottom:78px}
 .grid{grid-template-columns:1fr 1fr}.row.sp.wrapm{flex-direction:column;align-items:stretch}
}
@media(max-width:380px){.grid{grid-template-columns:1fr}}
/* --- Dialog, izin, tombol --- */
.dlg-actions{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;margin-top:16px}.btn.ghost{background:transparent;border-color:transparent;color:var(--muted)}
.modal .box{max-height:90dvh;overflow:auto}.perm{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--line)}.perm small{display:block}
.badge{display:inline-block;font-size:12px;padding:1px 8px;border-radius:var(--r);background:var(--accent-soft);color:var(--accent);white-space:nowrap}.badge.warn{background:color-mix(in srgb,var(--warn) 18%,transparent);color:var(--warn)}
.save-bar{position:sticky;bottom:0;margin:12px -18px -16px;padding:12px 18px;background:var(--raised);border-top:1px solid var(--line);display:flex;gap:8px;align-items:center;justify-content:space-between;flex-wrap:wrap;border-radius:0 0 var(--r) var(--r)}
/* --- Rekap, catatan, tasbih ring, peta --- */
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.metric{border:1px solid var(--line);border-radius:var(--r);padding:10px;background:var(--raised)}.metric b{display:block;font-size:22px}.metric span{font-size:12px;color:var(--muted)}
@media(max-width:560px){.metrics{grid-template-columns:1fr 1fr}}
.rrow{padding:10px 0;border-top:1px solid var(--line)}.rrow:first-child{border-top:0}.rrow .row{margin-bottom:6px}
.insight{border-left:2px solid var(--accent);padding:6px 12px;margin-top:12px;color:var(--muted)}
.note{border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;margin-top:10px;background:var(--surface)}.note p{white-space:pre-wrap;margin:4px 0}
.ring{position:relative;width:min(260px,70vw);aspect-ratio:1;margin:12px auto}.ring svg{width:100%;height:100%;transform:rotate(-90deg)}.ring circle{fill:none;stroke-width:8}.ring .bg{stroke:var(--line)}.ring .fg{stroke:var(--accent);stroke-linecap:round;transition:stroke-dashoffset .2s}
.ring button{position:absolute;inset:14%;border-radius:50%;border:1px solid var(--line);background:var(--raised);font-size:56px;font-weight:600;cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent;transition:transform .06s}.ring button:active{transform:scale(.97)}
.map{height:260px;border-radius:var(--r);border:1px solid var(--line);margin:10px 0;position:relative;overflow:hidden;background:var(--hover)}.map .pin{position:absolute;left:50%;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border:3px solid var(--danger);border-radius:50%;background:rgba(255,255,255,.4);z-index:500;pointer-events:none}
.res{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r);margin-top:8px;overflow:hidden}.res button{text-align:left;background:var(--raised);border:0;border-top:1px solid var(--line);padding:8px 10px;cursor:pointer}.res button:first-child{border-top:0}.res button:hover{background:var(--hover)}.res small{display:block;color:var(--muted)}
.mtable{width:100%;border-collapse:collapse;font-size:13px;font-variant-numeric:tabular-nums}.mtable th,.mtable td{padding:6px 8px;border-bottom:1px solid var(--line);text-align:center;white-space:nowrap}.mtable td:first-child,.mtable th:first-child{text-align:left}.mtable tr.today{background:var(--accent-soft)}.xs{overflow-x:auto}
.read{color:var(--accent)}.ayah.mark{outline:1px solid var(--accent);border-radius:var(--r)}

/* --- Tambahan v3 --- */
.savebar{display:flex;gap:8px;align-items:center;justify-content:space-between;flex-wrap:wrap;background:var(--raised);border:1px solid var(--line);border-radius:var(--r);padding:10px 14px;margin-top:12px}
.savebar .muted{font-size:13px}.dirty{color:var(--warn)}
.d .ev{position:absolute;top:4px;right:5px;width:5px;height:5px;border-radius:50%;background:var(--danger)}
.chart{display:flex;align-items:flex-end;gap:3px;height:96px}.chart>div{flex:1;min-width:0;text-align:center}.chart .col{height:72px;display:flex;align-items:flex-end}.chart .col i{display:block;width:100%;border-radius:3px 3px 0 0;background:var(--accent);min-height:3px}.chart .col i.z{background:var(--line)}.chart small{display:block;font-size:10px;color:var(--muted);margin-top:2px;overflow:hidden}
.zero{font-variant-numeric:tabular-nums}.chips.nowrap{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px}.chips.nowrap .chip{flex:none}
.cnt{display:inline-block;font-size:12px;padding:1px 8px;border-radius:var(--r);background:var(--accent-soft);color:var(--accent);margin-left:6px;vertical-align:middle}
.pill{display:inline-flex;align-items:center;gap:6px}.sticky-tools{position:sticky;top:-1px;z-index:3;background:var(--bg);padding:6px 0}
.quote{font-size:17px;line-height:1.7}
@media(max-width:760px){.savebar{padding:8px 10px;gap:6px}.savebar>.muted{width:100%;font-size:12px}.savebar .row{width:100%;flex-wrap:nowrap}.savebar .btn{flex:1;justify-content:center;padding:8px 6px}}

/* ===================== v4 · Desain, header, transisi, komponen ===================== */
[hidden]{display:none!important}
:root{--r2:12px;--shadow:0 1px 2px rgba(40,38,30,.06),0 4px 14px -6px rgba(40,38,30,.10);--sl:30%}
:root[data-theme=dark]{--shadow:0 1px 2px rgba(0,0,0,.3),0 6px 18px -8px rgba(0,0,0,.5)}
::selection{background:var(--accent-soft)}
*{scrollbar-width:thin;scrollbar-color:var(--line) transparent}
h1{font-size:clamp(22px,4.6vw,28px);letter-spacing:-.02em;line-height:1.2}
.head{margin-bottom:18px}.head p{margin-top:4px;max-width:60ch}
.eyebrow{display:block;font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:4px}
.sec{font-size:13px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin:22px 2px 10px}
/* Kerangka & header */
.app{grid-template-rows:auto minmax(0,1fr);grid-template-areas:"side top" "side main"}
.top{grid-area:top;display:flex;align-items:center;gap:8px;min-height:56px;padding:8px max(16px,calc((100% - 820px)/2));background:var(--bg)}
.top[data-root="1"],.top .brand-m,.top .me{display:none}
.top .title{flex:1;min-width:0;font-weight:600;font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand-m{align-items:center;gap:8px;font-weight:600;font-size:16px;flex:1}.brand-m img{width:26px;height:26px;border-radius:var(--r)}
.icb{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;border:0;background:transparent;cursor:pointer;color:var(--text);flex:none;-webkit-tap-highlight-color:transparent;transition:background .12s}.icb:hover{background:var(--hover)}.icb:active{background:var(--accent-soft)}.icb .ic{width:22px;height:22px}
.pill-off{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:500;padding:3px 9px;border-radius:var(--r);background:color-mix(in srgb,var(--warn) 18%,transparent);color:var(--warn)}.pill-off .ic{width:14px;height:14px}
#view{background:var(--bg);--vpt:20px;padding-top:var(--vpt)}
.side{box-shadow:inset -1px 0 0 var(--line)}.nav a{min-height:40px;font-weight:450}.nav a.on{background:var(--accent-soft);color:var(--accent);font-weight:600}
/* Transisi halaman: slide ala WhatsApp/Instagram (View Transitions) + cadangan CSS */
/* Token gerak: semua animasi memakai tiga durasi dan satu kurva yang sama */
:root{--ease:cubic-bezier(.22,.8,.24,1);--dur-s:.16s;--dur-m:.26s;--dur-l:.36s}
#view{view-transition-name:page}#bar{view-transition-name:bar}#nav{view-transition-name:nav}
::view-transition-old(root),::view-transition-new(root),::view-transition-old(bar),::view-transition-new(bar),::view-transition-old(nav),::view-transition-new(nav){animation:none}
::view-transition-group(page){overflow:clip}
::view-transition-old(page),::view-transition-new(page){mix-blend-mode:normal;animation-duration:var(--dur-l);animation-timing-function:var(--ease);animation-fill-mode:both}
html[data-dir=fwd]::view-transition-new(page){animation-name:in-r}html[data-dir=fwd]::view-transition-old(page){animation-name:out-l}
html[data-dir=back]::view-transition-old(page){animation-name:out-r;z-index:2}html[data-dir=back]::view-transition-new(page){animation-name:in-l}
html[data-dir=next]::view-transition-new(page){animation-name:tab-in-r}html[data-dir=next]::view-transition-old(page){animation-name:tab-out-l}
html[data-dir=prev]::view-transition-new(page){animation-name:tab-in-l}html[data-dir=prev]::view-transition-old(page){animation-name:tab-out-r}
@keyframes in-r{from{transform:translateX(var(--sl))}}@keyframes out-l{to{transform:translateX(-22%);opacity:.55}}
@keyframes in-l{from{transform:translateX(-22%);opacity:.55}}@keyframes out-r{to{transform:translateX(var(--sl))}}
@keyframes tab-in-r{from{transform:translateX(12%);opacity:0}}@keyframes tab-out-l{to{transform:translateX(-12%);opacity:0}}
@keyframes tab-in-l{from{transform:translateX(-12%);opacity:0}}@keyframes tab-out-r{to{transform:translateX(12%);opacity:0}}
#view.in{animation:fi var(--dur-s) ease}#view.in[data-anim=fwd]{animation:in-r var(--dur-m) var(--ease)}#view.in[data-anim=back]{animation:in-l var(--dur-m) var(--ease)}#view.in[data-anim=next]{animation:tab-in-r .24s ease}#view.in[data-anim=prev]{animation:tab-in-l .24s ease}
/* Tombol */
.btn{min-height:38px;padding:8px 14px;font-weight:500;font-size:14px;-webkit-tap-highlight-color:transparent;user-select:none;justify-content:center;transition:background .12s,transform .08s,border-color .12s}
.btn:active{transform:scale(.97)}.btn.sm{min-height:32px;padding:5px 11px;font-size:13px}.btn .ic{width:16px;height:16px}.btn.block{width:100%}
.btn.primary{box-shadow:0 1px 0 rgba(0,0,0,.08)}.btn.danger{border-color:color-mix(in srgb,var(--danger) 35%,var(--line))}.btn.danger:hover{background:color-mix(in srgb,var(--danger) 10%,transparent)}
.btn.ghost{border-color:transparent;background:transparent;color:var(--muted)}
.btn:disabled,.btn[aria-disabled=true]{opacity:.5;cursor:not-allowed;transform:none}
.chip{min-height:32px;display:inline-flex;align-items:center;transition:background .12s,border-color .12s}.chip:hover{background:var(--hover)}.chip.on{font-weight:600}
.chips.nowrap{scrollbar-width:none;-webkit-overflow-scrolling:touch}.chips.nowrap::-webkit-scrollbar{display:none}
input[type=text],input[type=search],input[type=number],input[type=tel],input[type=email],input[type=password],input[type=date],select,textarea{min-height:40px;transition:border-color .12s,box-shadow .12s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.seg button{min-width:40px;height:36px;padding:0 12px;transition:background .12s}.seg button:active{background:var(--hover)}
/* Kartu & komponen */
.card{box-shadow:var(--shadow);padding:16px 18px}a.card:hover{transform:translateY(-1px)}a.card{transition:background .12s,transform .12s}
.qi{width:40px;height:40px;border-radius:var(--r);background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;flex:none}.qi .ic{width:20px;height:20px}
.ic.big{width:26px;height:26px}.ic.chev{width:16px;height:16px;color:var(--muted);flex:none}.flame{color:#c2703a}
.pill{display:inline-flex;align-items:center;gap:5px;font-size:12px;padding:3px 9px;border-radius:var(--r);background:color-mix(in srgb,var(--on-accent) 16%,transparent)}.pill .ic{width:13px;height:13px}
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:18px;align-items:center;background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cpath fill='none' stroke='%23fff' stroke-opacity='.10' d='M28 4l6 14 14-6-6 14 14 6-14 6 6 14-14-6-6 14-6-14-14 6 6-14-14-6 14-6-6-14 14 6z'/%3E%3C/svg%3E");color:var(--on-accent);border-radius:var(--r2);padding:20px;margin-bottom:12px;box-shadow:var(--shadow)}
.hero .eyebrow{color:inherit;opacity:.8}.hero-time{font-size:clamp(30px,6vw,40px);font-weight:700;letter-spacing:-.02em;line-height:1.1}.hero-cd{font-variant-numeric:tabular-nums;opacity:.9;margin:2px 0 10px}
.hero-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}.hero-days>div{text-align:center;padding:8px 2px;border-radius:var(--r);background:color-mix(in srgb,var(--on-accent) 12%,transparent);font-size:12px;min-width:0}.hero-days span{display:block;opacity:.85}.hero-days b{display:block;font-size:14px;font-variant-numeric:tabular-nums}.hero-days .on{background:var(--on-accent);color:var(--accent)}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:12px}
.tile{display:flex;align-items:center;gap:12px;padding:14px;background:var(--raised);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);transition:background .12s,transform .12s;min-width:0}.tile:hover{background:var(--hover);transform:translateY(-1px)}
.tile b{display:block;font-size:17px;line-height:1.2}.tile small{display:block;color:var(--muted);font-size:12px;line-height:1.3;overflow:hidden;text-overflow:ellipsis}.tile>div:last-child{min-width:0}
.mring{position:relative;width:46px;height:46px;flex:none}.mring svg{width:100%;height:100%;transform:rotate(-90deg)}.mring circle{fill:none;stroke-width:4}.mring .bg{stroke:var(--hover)}.mring .fg{stroke:var(--accent);stroke-linecap:round;transition:stroke-dashoffset .5s}.mring b{position:absolute;inset:0;display:grid;place-items:center;font-size:11px}
.hint{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid color-mix(in srgb,var(--warn) 40%,var(--line));background:color-mix(in srgb,var(--warn) 9%,var(--raised));border-radius:var(--r);margin-bottom:6px;transition:background .12s}.hint:hover{background:color-mix(in srgb,var(--warn) 15%,var(--raised))}.hint>div{flex:1;min-width:0}.hint b{display:block}.hint small{color:var(--muted)}
.quick{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px;margin-bottom:12px}
.qa{display:flex;flex-direction:column;gap:2px;padding:14px 12px;background:var(--raised);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);transition:background .12s,transform .12s;min-width:0}.qa:hover{background:var(--hover);transform:translateY(-1px)}.qa:active{transform:scale(.98)}.qa .qi{margin-bottom:8px}.qa b{font-size:14px}.qa small{color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.list-cards{display:flex;flex-direction:column;gap:10px}.lc{display:flex;align-items:center;gap:14px;padding:14px 16px;background:var(--raised);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);transition:background .12s,transform .12s}.lc:hover{background:var(--hover)}.lc:active{transform:scale(.99)}.lc>div{flex:1;min-width:0}.lc b{display:block}.lc small{color:var(--muted)}
.badges{display:grid;grid-template-columns:repeat(auto-fill,minmax(108px,1fr));gap:8px;margin-top:6px}.badge-i{padding:10px;border:1px dashed var(--line);border-radius:var(--r);text-align:center;color:var(--muted);opacity:.65}.badge-i .ic{display:block;margin:0 auto 4px;width:22px;height:22px}.badge-i b{display:block;font-size:13px}.badge-i small{font-size:11px}.badge-i.on{opacity:1;border-style:solid;border-color:var(--accent);background:var(--accent-soft);color:var(--text)}.badge-i.on .ic{color:#c2933a;fill:#e6c46a}
.rrow{padding:8px 0}.rrow .bar{margin-top:6px}
.ayah.mark,.ayah.playing{background:var(--accent-soft);border-radius:var(--r);padding-left:8px;padding-right:8px}
.num{width:30px;height:30px;border-radius:50%;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;font-size:12px;font-weight:600;padding:0}
.quote-card{margin-top:4px}.quote{font-size:17px;line-height:1.7}
/* Toast & dialog */
#toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,12px);opacity:0;pointer-events:none;background:var(--text);color:var(--bg);padding:10px 16px;border-radius:var(--r);font-size:14px;max-width:min(92vw,420px);z-index:60;box-shadow:0 8px 24px rgba(0,0,0,.28);transition:opacity .18s,transform .18s;text-align:center}#toast.on{opacity:1;transform:translate(-50%,0)}
.modal{backdrop-filter:blur(2px)}.modal .box{border-radius:var(--r2);box-shadow:0 18px 50px -12px rgba(0,0,0,.4);animation:pop var(--dur-s) ease}@keyframes pop{from{transform:scale(.96);opacity:0}}
/* Ponsel */
@media(max-width:760px){
 :root{--sl:100%}
 .app{grid-template-rows:auto minmax(0,1fr) auto;grid-template-areas:"top" "main" "side"}
 .top,.top[data-root="1"]{display:flex;position:relative;z-index:5;background:color-mix(in srgb,var(--surface) 94%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);padding:6px 10px 6px 14px;padding-top:max(6px,env(safe-area-inset-top));min-height:54px}
 .top[data-root="1"] .brand-m{display:flex}.top[data-root="0"]{padding-left:6px}.top .me{display:flex}.top .avatar{width:34px;height:34px}
 #view{--vpt:16px;padding-top:var(--vpt)}
 .nav a{font-size:11px;min-height:54px;gap:3px;color:var(--muted)}.nav a svg{box-sizing:content-box;width:20px;height:20px;padding:4px 18px;border-radius:999px;transition:background .2s}.nav a.on{background:transparent;color:var(--accent)}.nav a.on svg{background:var(--accent-soft)}
 .btn{min-height:42px}.btn.sm{min-height:36px}.chip{min-height:36px}.seg button{height:38px;min-width:42px}
 .hero{grid-template-columns:1fr;padding:18px}.tiles{grid-template-columns:1fr 1fr 1fr;gap:8px}.tile{flex-direction:column;align-items:flex-start;gap:8px;padding:12px}.tile b{font-size:16px}
 #toast{bottom:calc(76px + env(safe-area-inset-bottom))}
 .wrap>.back{display:none}
}
@media(max-width:560px){.modal{place-items:end center;padding:0}.modal .box{width:100%;max-width:none;border-radius:16px 16px 0 0;padding-bottom:max(18px,env(safe-area-inset-bottom));animation:sheet var(--dur-m) var(--ease)}@keyframes sheet{from{transform:translateY(100%)}}}
@media(max-width:380px){.tiles{grid-template-columns:1fr 1fr}.tiles .tile:last-child{grid-column:1/-1}}
@media print{.side,.top,#toast{display:none!important}body{overflow:visible}#view{overflow:visible}}
/* hero: warna tegas di kedua tema */
:root{--hero-bg:var(--accent);--hero-fg:#fff}:root[data-theme=dark]{--hero-bg:#2d5547;--hero-fg:#eef5f1}
.hero{background-color:var(--hero-bg);color:var(--hero-fg)}.pill{background:color-mix(in srgb,var(--hero-fg) 16%,transparent)}.hero-days>div{background:color-mix(in srgb,var(--hero-fg) 13%,transparent)}.hero-days .on{background:var(--hero-fg);color:var(--hero-bg)}

/* ===== v5 · Responsif hingga layar terkecil ===== */
.cal{grid-template-columns:repeat(7,minmax(0,1fr));gap:3px}
.cal .dh,.d{min-width:0}.cal .dh{overflow:hidden}
.d{padding:0;overflow:hidden;font-variant-numeric:tabular-nums}.d>span{font-size:15px;font-weight:600;line-height:1.1}
.card,.lc,.tile,.qa,.hint,.item,.t{overflow-wrap:anywhere}
.row>*{min-width:0}
@media(max-width:420px){
  .card{padding:14px}.cal{gap:2px}.d{aspect-ratio:1/1.05}.d small{font-size:9.5px}.cal .dh{font-size:11px;padding:3px 0}
  .head p{font-size:14px}.savebar .btn{font-size:13px}
}
@media(max-width:340px){
  #view{padding-left:12px;padding-right:12px}h1{font-size:21px}
  .card{padding:12px}.d>span{font-size:13px}.d small{font-size:9px}.cal{gap:1px}
  .hero{padding:14px}.hero-days{gap:3px}.hero-days>div{font-size:10px;padding:6px 0}.hero-days b{font-size:11.5px}
  .tiles{grid-template-columns:1fr}.quick{grid-template-columns:repeat(2,minmax(0,1fr))}.times{grid-template-columns:repeat(2,minmax(0,1fr))}
  .seg button{min-width:34px;padding:0 8px}.btn{padding-left:11px;padding-right:11px}.btn.sm{padding-left:9px;padding-right:9px}
  .nav a{font-size:10px}.nav a svg{padding:4px 12px}.top .title{font-size:15px}.metrics{grid-template-columns:1fr 1fr}
}
@media(max-width:260px){.nav a{font-size:9px}.nav a svg{padding:4px 8px}.quick{grid-template-columns:1fr}}
@media(max-height:480px) and (orientation:landscape){.top,.top[data-root="1"]{min-height:44px}.nav a{min-height:44px}#view{--vpt:10px;padding-top:var(--vpt)}}
/* v5 · header & navigasi tanggal di layar sempit */
.brand-m{white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis}.brand-m img{flex:none}
.datenav{flex-wrap:nowrap!important}.datenav>div{flex:1;text-align:center;min-width:0}.datenav .btn{flex:none}
@media(max-width:560px){.wrapm{flex-direction:column;align-items:stretch}.wrapm>.row{width:100%}.wrapm>.row:first-child{justify-content:space-between}.wrapm input[type=date]{flex:1;width:auto}}
@media(max-width:340px){.brand-m{font-size:14px;gap:6px}.brand-m img{width:22px;height:22px}.top,.top[data-root="1"]{padding-left:10px;padding-right:6px}}
/* v5 · input tanggal mengikuti tema, brand ringkas di layar mungil */
input[type=date]{background:var(--raised);color:var(--text);border:1px solid var(--line);border-radius:var(--r);padding:8px 10px;color-scheme:light}
:root[data-theme=dark]{color-scheme:dark}:root[data-theme=dark] input[type=date]{color-scheme:dark}
@media(max-width:300px){.brand-m{font-size:0;gap:0}.brand-m img{width:28px;height:28px}}
.fixbox{margin-top:10px;padding:12px 14px;border:1px solid color-mix(in srgb,var(--warn) 45%,var(--line));background:color-mix(in srgb,var(--warn) 9%,var(--raised));border-radius:var(--r);font-size:14px}.fixbox ol{margin:8px 0 10px 20px;display:grid;gap:4px}

/* ===== Pesan (chat) ===== */
.nbadge{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--danger);color:#fff;font-size:11px;font-weight:600;line-height:1;margin-left:auto}
.nav .desk-only{display:flex}.top .chatb{display:none;position:relative}.chatb .nbadge{position:absolute;top:3px;right:3px;margin:0}
@media(max-width:760px){.nav .desk-only{display:none}.top .chatb{display:grid}}
.chatlist{display:flex;flex-direction:column;gap:8px}
.ci{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--raised);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);transition:background .12s}a.ci:hover{background:var(--hover)}.ci>div:nth-child(2){flex:1;min-width:0}.ci b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ci small{display:block;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ci.un b,.ci.un small{color:var(--text);font-weight:600}
.ci .meta{display:flex;flex-direction:column;align-items:flex-end;gap:4px;font-size:12px;color:var(--muted)}.ci .avatar{width:42px;height:42px;font-size:17px}
.req{margin-bottom:8px}.req p{margin-top:4px}
.chat-head{display:flex;align-items:center;gap:12px;margin-bottom:10px;flex-wrap:wrap}.chat-head>div:nth-child(2){flex:1;min-width:0}.chat-head b{display:block}.chat-head .avatar{width:42px;height:42px;font-size:17px}
.banner{padding:12px 14px;border:1px solid color-mix(in srgb,var(--warn) 40%,var(--line));background:color-mix(in srgb,var(--warn) 9%,var(--raised));border-radius:var(--r);margin-bottom:10px;font-size:14px}
.msgs{display:flex;flex-direction:column;gap:4px;padding:6px 0 12px;min-height:30vh}
.day{align-self:center;margin:10px 0 4px}.day span{font-size:12px;padding:3px 10px;border-radius:var(--r);background:var(--hover);color:var(--muted)}
.b{max-width:min(82%,520px);padding:8px 11px 5px;border-radius:12px;overflow-wrap:anywhere;position:relative}.b .tx{white-space:pre-wrap;display:block;line-height:1.45}.b .tm{display:block;text-align:right;font-size:11px;opacity:.7;margin-top:2px}
.b.me{align-self:flex-end;background:var(--accent);color:var(--on-accent);border-bottom-right-radius:4px;cursor:pointer}.b.ot{align-self:flex-start;background:var(--raised);border:1px solid var(--line);border-bottom-left-radius:4px}.b .rd{color:#8fd3ff;opacity:1}
.composer{position:sticky;bottom:0;display:flex;gap:8px;align-items:flex-end;padding:10px 0 max(6px,env(safe-area-inset-bottom));background:var(--bg)}
.composer textarea{flex:1;resize:none;min-height:42px;max-height:130px;line-height:1.4;padding:10px 12px;border-radius:21px}
.send{width:42px;height:42px;border-radius:50%;border:0;background:var(--accent);color:var(--on-accent);display:grid;place-items:center;cursor:pointer;flex:none;transition:transform .08s}.send:active{transform:scale(.92)}.send .ic{width:20px;height:20px}
.chat [hidden]{display:none!important}
/* v9 · header halaman utama & kolom ketik selalu di bawah */
.top[data-root="1"] .title{display:none}
.chat{display:flex;flex-direction:column;min-height:100%}
.chat>section[data-r="conv"]:not([hidden]){display:flex;flex-direction:column;flex:1;min-height:0}
.chat>section[data-r="inbox"]:not([hidden]){display:block}
.chat .msgs{flex:1}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.06em;word-spacing:.3em}
.gate{margin-bottom:12px}.gate .field{margin-top:8px}.lockmsg{font-style:italic;opacity:.8}

/* ===== v6 · Tab pengaturan, diagnosa, ruang chat ===== */
.chips.tabs{margin:0 0 6px;padding:6px 0 10px;gap:4px}
.tabs .chip{flex:1;justify-content:center;white-space:nowrap;padding:8px 12px;font-size:14px;font-weight:500;border-color:transparent;background:var(--surface);transition:background .15s,color .15s,box-shadow .15s}
.tabs .chip:hover{background:var(--hover);color:var(--text)}
.tabs .chip.on{background:var(--raised);border-color:var(--line);color:var(--accent);box-shadow:0 1px 2px rgb(0 0 0 / .08)}
.sub{font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin:14px 0 8px}
.diag{list-style:none;display:grid;gap:10px;margin:8px 0}.diag li{padding:8px 10px;border-radius:var(--r);border:1px solid var(--line)}.diag li.bad{border-color:color-mix(in srgb,var(--danger) 45%,var(--line));background:color-mix(in srgb,var(--danger) 7%,var(--raised))}.diag b{display:block}.diag small{display:block;color:var(--muted);margin-top:3px;line-height:1.4}
.netbar{padding:6px 12px;background:color-mix(in srgb,var(--warn) 20%,var(--raised));font-size:13px;text-align:center;flex:none}
/* ruang chat: panel penuh, pesan menggulir di dalamnya, kolom ketik selalu di bawah */
html[data-chat="1"] #view{padding:0 clamp(0px,2vw,16px);overflow:hidden}
html[data-chat="1"] .wrap.chat{max-width:760px;height:100%;padding:0}
.chat{height:100%;min-height:0}
.room:not([hidden]){display:flex;flex-direction:column;flex:1;min-height:0}
.chat-head{position:relative;display:flex;align-items:center;gap:10px;padding:8px 10px;margin:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r2) var(--r2) 0 0;flex:none;flex-wrap:nowrap}
.chat-head .avatar{width:40px;height:40px;font-size:17px;flex:none}.chat-head .who{flex:1;min-width:0}.chat-head .who b,.chat-head .who small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chat-head .who small{color:var(--muted);font-size:12px}
.cback,.cmenu{display:none}.chat-actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.msgs{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:14px 12px;gap:3px;border-left:1px solid var(--line);border-right:1px solid var(--line);background:var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cpath fill='none' stroke='%23888' stroke-opacity='.08' d='M28 4l6 14 14-6-6 14 14 6-14 6 6 14-14-6-6 14-6-14-14 6 6-14-14-6 14-6-6-14 14 6z'/%3E%3C/svg%3E")}
.b{max-width:min(80%,520px);padding:7px 11px 4px;border-radius:14px;box-shadow:0 1px 1px rgba(0,0,0,.07)}.b.me{border-bottom-right-radius:4px}.b.ot{border-bottom-left-radius:4px}.b .tm{font-size:10.5px}
.day span{box-shadow:var(--shadow);background:var(--raised)}
.composer{position:static;flex:none;gap:8px;padding:8px 10px;background:var(--surface);border:1px solid var(--line);border-radius:0 0 var(--r2) var(--r2)}
.composer textarea{border-radius:22px;background:var(--bg);padding:10px 14px}
@media(max-width:760px){
  html[data-chat="1"] .side,html[data-chat="1"] .top{display:none}
  html[data-chat="1"] .app{height:100dvh}
  html[data-chat="1"] #view{padding:0}
  html[data-chat="1"] .wrap.chat{max-width:none}
  .chat-head{border:0;border-bottom:1px solid var(--line);border-radius:0;padding:6px 6px 6px 2px;padding-top:max(6px,env(safe-area-inset-top))}
  .cback,.cmenu{display:grid}
  .chat-actions{display:none;position:absolute;right:8px;top:100%;margin-top:2px;z-index:8;flex-direction:column;align-items:stretch;gap:2px;background:var(--raised);border:1px solid var(--line);border-radius:var(--r2);box-shadow:0 10px 30px -8px rgba(0,0,0,.35);padding:6px;min-width:210px}
  .chat-actions.open{display:flex}.chat-actions .btn{justify-content:flex-start;border:0;background:transparent;min-height:44px}.chat-actions .btn:hover{background:var(--hover)}
  .msgs{border:0;padding:12px 10px}.b{max-width:85%}
  .composer{border:0;border-top:1px solid var(--line);border-radius:0;padding:8px 8px max(8px,env(safe-area-inset-bottom))}
}

/* ===================== v7 · Gaya aplikasi: sentuhan bersih, sidebar ala Claude, bilah atas per halaman, tasbih melayang ===================== */
html{-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-text-size-adjust:100%}
*,*::before,*::after{-webkit-tap-highlight-color:transparent}
body{-webkit-user-select:none;user-select:none}
input,textarea,select,[contenteditable="true"],.selectable{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}
img,svg,a{-webkit-user-drag:none;user-drag:none}
a,button,.chip,.card,.tile,.qa,.lc,.ci,.b,.seg button{touch-action:manipulation}
:focus:not(:focus-visible){outline:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
input:focus-visible,textarea:focus-visible,select:focus-visible{outline:none}
.b{cursor:pointer}
.side-toggle{margin-left:auto;flex:none;width:34px;height:34px;display:grid;place-items:center;border:0;border-radius:var(--r);background:transparent;color:var(--muted);cursor:pointer;position:relative;transition:background .15s,color .15s}
.side-toggle:hover{background:var(--hover);color:var(--text)}.side-toggle .ic{width:20px;height:20px}
.brand{position:relative}.brand-name{white-space:nowrap}
.side .brand img{transition:opacity .15s}
.side .brand .side-toggle{transition:opacity .15s,background .15s,color .15s}
.side .brand .side-toggle{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0;opacity:0;pointer-events:none}
html:not(.sidebar-collapsed) .side .brand .side-toggle{left:10px;transform:translateY(-50%)}
.side .brand:hover img,.side .brand:focus-within img{opacity:0}
.side .brand:hover .side-toggle,.side .brand:focus-within .side-toggle{opacity:1;pointer-events:auto}
@media(min-width:761px){
  .app{transition:grid-template-columns .26s cubic-bezier(.2,.8,.2,1)}
  .side{position:relative;z-index:30;overflow:visible}
  .nav a{position:relative}
  .nl{display:inline-block;max-width:170px;overflow:hidden;white-space:nowrap;transition:max-width .22s cubic-bezier(.2,.8,.2,1),opacity .16s}
  html.sidebar-collapsed{--side:68px}
  html.sidebar-collapsed .brand{flex-direction:column;gap:8px;padding:6px 0 12px;justify-content:center}
  html.sidebar-collapsed .brand-name{display:none}
  html.sidebar-collapsed .side-toggle{margin:0}
  html.sidebar-collapsed .nav a{justify-content:center;gap:0;padding:10px 0}
  html.sidebar-collapsed .nl{max-width:0;opacity:0}
  html.sidebar-collapsed .nav a .nbadge{position:absolute;top:3px;right:9px;margin:0;min-width:16px;height:16px;font-size:10px}
  html.sidebar-collapsed .side-foot{padding:10px 0;text-align:center}
  html.sidebar-collapsed .side-foot .me{justify-content:center;padding:6px 0}
  html.sidebar-collapsed #meName{display:none}
  html.sidebar-collapsed .sync{font-size:0;justify-content:center}
  .side [data-tip]::after{content:attr(data-tip);position:absolute;left:calc(100% + 12px);top:50%;transform:translate(-4px,-50%);background:var(--text);color:var(--bg);padding:5px 10px;border-radius:var(--r);font-size:12px;font-weight:500;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .12s,transform .12s;box-shadow:0 6px 18px rgba(0,0,0,.25);z-index:60}
  .side-toggle:hover::after,.side-toggle:focus-visible::after,html.sidebar-collapsed .nav a:hover::after,html.sidebar-collapsed .nav a:focus-visible::after{opacity:1;transform:translate(0,-50%)}
}
.top .bar-acts{display:flex;align-items:center;gap:2px;margin-left:auto;flex:none}
.top .ttlbox{flex:1;min-width:0;display:none}.top .ttlsub{display:block;color:var(--muted);font-size:12px;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.top .ttlsub:empty{display:none}
.icb.chatb{position:relative}
@media(max-width:760px){
  .top,.top[data-root="1"]{transition:background .2s,border-color .2s,backdrop-filter .2s;padding:6px 6px 6px 14px;padding-top:max(6px,env(safe-area-inset-top))}
  .top[data-root="0"]{padding-left:6px}
  .top .title{font-size:19px;font-weight:700;letter-spacing:-.01em}
  .top[data-page="beranda"] .brand-m{display:flex}.top:not([data-page="beranda"]) .brand-m{display:none}
  .top:not([data-page="beranda"]) .ttlbox{display:block}
  .top[data-root="1"]:not([data-page="beranda"]) .title{display:block}
  .top .brand-m{font-size:19px;font-weight:700;letter-spacing:-.01em;gap:9px}.top .brand-m img{width:30px;height:30px}
  .top[data-root="1"]{background:var(--surface);border-bottom-color:var(--line);backdrop-filter:none}
  .top[data-root="1"].scrolled{background:var(--surface);border-bottom-color:var(--line);backdrop-filter:none}
  .top[data-root="1"] .ttlbox{opacity:1}
  #view[data-mobile-title="header"] .head h1{display:none}
  .nav .desk-only{display:none}
  .side .brand,.side .side-toggle{display:none!important}
  .tabs{display:none}
  .sect-title{display:block;font-size:13px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);font-weight:600;margin:2px 2px 10px}
}
.sect-title{display:none}
.gmenu{display:grid;gap:4px;margin-top:6px}.gm{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:8px 10px;border:0;border-radius:var(--r);background:transparent;color:var(--text);text-align:left;cursor:pointer;font:inherit}.gm:hover{background:var(--hover)}.gm.on{background:var(--accent-soft)}.gm b{display:block}.gm small{display:block;color:var(--muted);font-size:12px}
.ft{position:fixed;z-index:18;left:0;top:0;width:116px;height:116px;touch-action:none;filter:drop-shadow(0 10px 18px rgba(0,0,0,.22))}
.ft[hidden]{display:none!important}html[data-chat="1"] .ft{display:none}
.ft-body{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 35% 28%,var(--raised),var(--surface) 64%);border:1px solid color-mix(in srgb,var(--accent) 38%,var(--line));cursor:grab;display:grid;place-items:center;outline:none;transition:transform .12s}
.ft.drag .ft-body{cursor:grabbing;transform:scale(1.05)}
.ft-ring{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.ft-ring circle{fill:color-mix(in srgb,var(--line) 85%,transparent);transition:fill .15s}.ft-ring circle.on{fill:var(--accent)}
.ft-mid{text-align:center;pointer-events:none;display:flex;flex-direction:column;align-items:center;line-height:1.05}.ft-mid strong{font-size:30px;font-variant-numeric:tabular-nums;letter-spacing:-.02em}.ft-mid small{font-size:10px;color:var(--muted);margin-top:2px}
.ft-tassel{position:absolute;left:50%;top:100%;width:16px;margin:-4px 0 0 -8px;color:var(--accent);stroke:var(--accent);stroke-width:1.4;fill:none;pointer-events:none}
.ft-laps{position:absolute;left:-3px;top:-3px;min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:var(--accent);color:var(--on-accent);font-size:11px;font-weight:700;display:grid;place-items:center}
.ft-more{position:absolute;right:-4px;top:-4px;width:30px;height:30px;padding:0;border-radius:50%;border:1px solid var(--line);background:var(--raised);color:var(--muted);display:grid;place-items:center;cursor:pointer}.ft-more .ic{width:18px;height:18px}
.ft-panel{position:absolute;z-index:2;display:flex;flex-direction:column;gap:2px;min-width:176px;padding:6px;background:var(--raised);border:1px solid var(--line);border-radius:var(--r2);box-shadow:0 14px 34px -10px rgba(0,0,0,.4)}
.ft-panel[hidden]{display:none}.ft-panel.up{bottom:calc(100% + 10px)}.ft-panel.down{top:calc(100% + 30px)}.ft-panel.l{left:0}.ft-panel.r{right:0}
.ft-panel button{display:flex;align-items:center;gap:10px;min-height:42px;padding:0 10px;border:0;background:transparent;color:var(--text);border-radius:var(--r);cursor:pointer;font:inherit;font-size:14px;text-align:left}.ft-panel button:hover{background:var(--hover)}.ft-panel .ic{width:18px;height:18px;color:var(--muted);flex:none}
.ft.bump .ft-body{animation:ftb .16s ease}@keyframes ftb{50%{transform:scale(.93)}}
.ft.done .ft-body{animation:ftd .9s ease}@keyframes ftd{0%,100%{box-shadow:0 0 0 0 transparent}30%{box-shadow:0 0 0 14px color-mix(in srgb,var(--accent) 30%,transparent)}}
@media(max-width:760px){.ft{width:100px;height:100px}.ft-mid strong{font-size:26px}}
.ft[data-mode="mini"]{width:54px;height:54px}.ft[data-mode="mini"] .ft-ring,.ft[data-mode="mini"] .ft-tassel,.ft[data-mode="mini"] .ft-mid small{display:none}.ft[data-mode="mini"] .ft-mid strong{font-size:19px}.ft[data-mode="mini"] .ft-more{width:24px;height:24px;right:-9px;top:-9px}.ft[data-mode="mini"] .ft-panel.down{top:calc(100% + 8px)}
@media(prefers-reduced-motion:reduce){.app,.nl,.top{transition:none!important}.ft.bump .ft-body,.ft.done .ft-body{animation:none}}

/* Al-Qur'an: tab daftar, panel pengaturan baca, tema baca, mode mengalir, bookmark */
.qtabs{display:flex;margin-bottom:12px}.qtabs button{flex:1;justify-content:center}
.seg button[aria-pressed=true]{background:var(--accent-soft);color:var(--accent);font-weight:600}
.qset{display:grid;gap:12px;margin-top:-4px}.qset[hidden]{display:none}
.qset>.row{justify-content:space-between}
.qset .seg{max-width:100%}.qset .seg button{white-space:nowrap}
.flowtext,.flowtext .fl{color:inherit}
@media(max-width:560px){
  .qset>.row{flex-direction:column;align-items:stretch;gap:8px}
  .qset .seg{display:flex;width:100%}.qset .seg button{flex:1;min-width:0;padding:0 6px}
  .qset .row>.row{width:100%}.qset .row>.row .btn{flex:1}
  .sticky-tools .row{gap:6px}.sticky-tools .btn{flex:1 1 auto}
}
.qr{transition:background .2s,color .2s,border-color .2s}
.qr-sepia{background:#f4ecd8;color:#3b2f1e;border-color:#e0d2b0}.qr-gelap{background:#0f1412;color:#e4ebe7;border-color:#22302a}
.qr-sepia .latin,.qr-gelap .latin{color:inherit;opacity:.75}.qr-sepia .btn,.qr-gelap .btn{background:transparent;color:inherit;border-color:currentColor}
.qr-sepia .btn.primary,.qr-gelap .btn.primary{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.flowtext{line-height:2.5;text-align:justify;text-align-last:right}
.fl{border-radius:var(--r)}.fl.mark,.fl.playing{background:var(--accent-soft)}
.anum{font-family:var(--arab);font-size:18px;line-height:1.4;color:var(--muted)}
.fln{font-family:var(--arab)}
/* Sorotan ayat di tema gelap/sepia: transparan agar teks tetap terbaca */
.qr-gelap .ayah.mark,.qr-gelap .ayah.playing,.qr-gelap .fl.mark,.qr-gelap .fl.playing{background:rgba(120,190,160,.18);color:inherit}
.qr-sepia .ayah.mark,.qr-sepia .ayah.playing,.qr-sepia .fl.mark,.qr-sepia .fl.playing{background:rgba(120,90,40,.15);color:inherit}
.qr-gelap .anum,.qr-sepia .anum{color:inherit;opacity:.7}
/* Tanda nomor ayat: cukup besar agar angka 3 digit tetap terbaca; melebar jadi lonjong untuk 3 digit */
.fln{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:2.3em;height:2.3em;padding:.2em .35em 0;margin:0 .2em;border:1px solid currentColor;border-radius:999px;box-shadow:inset 0 0 0 2px var(--surface,transparent),inset 0 0 0 3px currentColor;font-size:.55em;line-height:1;vertical-align:middle;opacity:.9}
.fl.saved{box-shadow:inset 0 -2px 0 var(--accent)}
.tjlegend{display:flex;gap:12px;font-size:13px;flex-wrap:wrap}
.tj-gh{color:#1f8a5b}.tj-ql{color:#c0392b}.tj-md{color:#2563eb}.tj-sl{color:#8a8a8a}
.qr-gelap .tj-gh{color:#5fd39a}.qr-gelap .tj-ql{color:#ff8a7a}.qr-gelap .tj-md{color:#7fb0ff}.qr-gelap .tj-sl{color:#9aa39e}
.qplay{position:fixed;left:12px;right:12px;bottom:calc(72px + env(safe-area-inset-bottom));z-index:15;display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--raised);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:8px 10px}
.qplay[hidden]{display:none}.qplay-t{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
@media(min-width:761px){.qplay{left:auto;right:24px;bottom:24px;width:360px}}
/* Halaman anak (Quran, Hadits, Doa, dll.) di ponsel: bar bawah disembunyikan agar tidak mengganggu bacaan */
@media(max-width:760px){html[data-nav="0"] #nav{display:none}html[data-nav="0"] .qplay{bottom:calc(16px + env(safe-area-inset-bottom))}}
/* Animasi ganti tema: seluruh tampilan, termasuk header dan navigasi, terbuka bersama dari logo. */
/* Transisi antarhalaman: geser halus ke kanan (maju) atau ke kiri (kembali); ganti tema memakai animasi lingkaran (js/lib/theme.js) */
/* Ganti tema: lingkaran tema baru menyebar dari logo (theme.js). Hanya transisi CSS yang dimatikan selama animasi.
   Animasi CSS sengaja tidak dimatikan: saat dinyalakan lagi, animasi masuk halaman (#view.in, kartu, dll.) ikut
   terulang dari awal sehingga halaman tampak seperti dimuat ulang */
:root[data-vt=theme] *{transition:none!important}
:root[data-vt=theme] #bar,:root[data-vt=theme] #nav,:root[data-vt=theme] #view,:root[data-vt=theme] #kili{view-transition-name:none!important}
html[data-vt=theme]::view-transition-old(root),html[data-vt=theme]::view-transition-new(root){animation:none;mix-blend-mode:normal}
::view-transition-old(root){z-index:1}::view-transition-new(root){z-index:2}

/* Kili AI: widget chat melayang */
#kili{position:fixed;z-index:60;width:50px;height:50px;font-family:var(--sans);view-transition-name:kili}
/* Bubble tetap di posisinya saat pindah halaman: tidak ikut dianimasikan */
::view-transition-old(kili),::view-transition-new(kili){animation:none}
#kili[data-s=off]{pointer-events:none}
#kili .kili-bub{position:absolute;right:0;bottom:0;width:50px;height:50px;border-radius:50%;border:0;background:var(--accent);color:var(--on-accent);font-size:22px;box-shadow:0 4px 15px rgba(0,0,0,.3);cursor:grab;touch-action:none;display:grid;place-items:center;opacity:0;transform:scale(.4);visibility:hidden;transition:opacity var(--dur-s) ease,transform .3s cubic-bezier(.34,1.3,.64,1),visibility 0s .3s}
#kili[data-s=min] .kili-bub{opacity:1;transform:none;visibility:visible;transition:opacity var(--dur-s) ease,transform .34s cubic-bezier(.34,1.3,.64,1),visibility 0s}
#kili .kili-card{position:absolute;right:0;bottom:0;width:min(340px,92vw);height:min(440px,70vh);display:flex;flex-direction:column;background:var(--raised);border:1px solid var(--line);border-radius:var(--r2,12px);box-shadow:0 12px 40px rgba(0,0,0,.35);overflow:hidden;color:var(--text);transform-origin:100% 100%;opacity:0;transform:scale(.9);visibility:hidden;transition:opacity .18s ease,transform .22s var(--ease),visibility 0s .22s}
/* Ukuran kartu sengaja tanpa transisi: perpindahan kartu ⇄ layar penuh dianimasikan di kili.js (FLIP), dan saat keyboard
   ponsel muncul tinggi kartu harus langsung menyesuaikan agar kolom ketik tidak tertinggal di balik keyboard */
#kili[data-s=open] .kili-card,#kili[data-s=max] .kili-card{opacity:1;transform:none;visibility:visible;transition:opacity .16s ease,transform .26s cubic-bezier(.34,1.25,.64,1),visibility 0s}
#kili[data-s=max]{width:100vw!important;height:100dvh!important;left:0!important;top:0!important;right:0!important;bottom:0!important}
#kili[data-s=max] .kili-card{width:100vw;height:100dvh;border-radius:0;border:0;transition:none}
#kili[data-s=max] .kili-form{padding-bottom:max(10px,env(safe-area-inset-bottom))}
.kili-msg.err{color:var(--danger)}
.dots{display:inline-flex;gap:4px;padding:2px 0}.dots i{width:6px;height:6px;border-radius:50%;background:var(--muted);animation:kdot 1s infinite ease-in-out}.dots i:nth-child(2){animation-delay:.15s}.dots i:nth-child(3){animation-delay:.3s}
@keyframes kdot{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
@media(prefers-reduced-motion:reduce){#kili,#kili *{transition-duration:.01s!important;animation:none!important}}
.kili-head{background:var(--accent);color:var(--on-accent);padding:10px 14px;display:flex;justify-content:space-between;align-items:center;font-weight:600;font-size:14px;cursor:move;touch-action:none;flex-shrink:0}
.kili-acts{display:flex;gap:10px}.kili-acts button{background:none;border:0;color:inherit;font-size:16px;cursor:pointer;padding:2px 4px}
.kili-msgs{flex:1;min-height:0;overflow-y:auto;padding:12px;background:var(--bg);display:flex;flex-direction:column;gap:10px;font-size:14px;line-height:1.5}
.kili-msg{padding:9px 12px;border-radius:10px;max-width:86%;overflow-wrap:anywhere}
.kili-msg.ai{background:var(--line);align-self:flex-start}.kili-msg.me{background:var(--accent);color:var(--on-accent);align-self:flex-end}
.kili-msg.muted{color:var(--muted)}.kili-msg strong{font-weight:700}
.kili-form{display:flex;gap:8px;padding:10px;border-top:1px solid var(--line);background:var(--raised)}
.kili-form input{flex:1;min-width:0;font:inherit;padding:8px 10px;border:1px solid var(--line);border-radius:var(--r);background:var(--bg);color:var(--text)}

/* Pengaturan baca (sheet dari ikon ⚙ di bilah atas) */
.qsheet .box{width:min(380px,100%)}
.qsheet-head{margin-bottom:10px}
.qsheet-act{flex-wrap:wrap;gap:8px;padding-bottom:12px;margin-bottom:4px;border-bottom:1px solid var(--line)}
.qsheet-act input{width:96px}
.qsheet .qset{margin-top:12px}

/* Pengaturan baca: tata letak modern (kelompok berlabel, kartu tema, pil, stepper, pratinjau huruf) */
.qsheet .box{width:min(400px,100%);padding:20px 20px 22px;border-radius:22px}
.qsheet-head h2{font-size:18px}
.qsheet-act{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding-bottom:16px;border-bottom:1px solid var(--line);margin-bottom:2px}
.qsheet-act input{width:96px;border-radius:999px;padding-left:14px}
.qsheet-act .btn.primary{border-radius:999px;padding-left:16px;padding-right:16px}
.qsheet-act .btn:not(.primary){border-radius:999px}
.qsheet-sec{margin-top:18px}
.qlabel{display:block;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.qthemes{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.qthemes button{display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 6px 10px;border:1px solid var(--line);border-radius:16px;background:var(--raised);font-size:13px;color:var(--text);cursor:pointer;transition:border-color var(--dur-s) var(--ease),box-shadow var(--dur-s) var(--ease),transform var(--dur-s) var(--ease)}
.qthemes i{width:34px;height:34px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.qthemes button[aria-pressed=true]{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.qpills{display:grid;grid-template-columns:1fr 1fr;padding:4px;border-radius:999px;background:var(--hover)}
.qpills button{border:0;border-radius:999px;padding:9px 12px;background:transparent;color:var(--muted);font-weight:500;cursor:pointer;transition:background var(--dur-s) var(--ease),color var(--dur-s) var(--ease),box-shadow var(--dur-s) var(--ease)}
.qpills button[aria-pressed=true]{background:var(--raised);color:var(--text);font-weight:600;box-shadow:0 1px 3px rgba(0,0,0,.12)}
.qtoggles{display:flex;flex-wrap:wrap;gap:8px}
.qtoggles button{border:1px solid var(--line);background:var(--raised);border-radius:999px;padding:8px 14px;font-size:13.5px;color:var(--muted);cursor:pointer;transition:all var(--dur-s) var(--ease)}
.qtoggles button[aria-pressed=true]{border-color:var(--accent);background:var(--accent-soft);color:var(--accent);font-weight:600}
.qtoggles button[aria-pressed=true]::before{content:"✓ ";font-weight:700}
.qsheet .tjlegend{margin-top:10px}
.qstep{display:flex;align-items:center;justify-content:space-between;padding:4px;border-radius:999px;background:var(--hover)}
.qstep button{width:48px;height:40px;border:0;border-radius:999px;background:var(--raised);box-shadow:0 1px 3px rgba(0,0,0,.1);font-size:16px;font-weight:600;color:var(--text);cursor:pointer;transition:transform var(--dur-s) var(--ease)}
.qstep button:active{transform:scale(.94)}
.qstep output{font-weight:600;font-variant-numeric:tabular-nums}
.qfonts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.qfonts button{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 6px 10px;border:1px solid var(--line);border-radius:16px;background:var(--raised);color:var(--text);cursor:pointer;transition:border-color var(--dur-s) var(--ease),box-shadow var(--dur-s) var(--ease)}
.qfonts button[aria-pressed=true]{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.qfp{font-size:20px;line-height:1.4;direction:rtl}
.qfonts small{font-size:12px;color:var(--muted)}
.qsrc{margin:18px 0 0;font-size:12px;text-align:center}

/* Alat aksi ayat: muncul saat ayat diketuk */
.qact{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;padding:10px;border-radius:16px;background:var(--hover);animation:qact-in var(--dur-m) var(--ease)}
.qact .btn{border-radius:999px}
@keyframes qact-in{from{opacity:0;transform:translateY(-6px)}}
.item.ayah{cursor:pointer;transition:background var(--dur-s) var(--ease)}
.flowtext .qact{text-align:left;direction:ltr}
/* Baca Al-Qur'an: tampilan diatur lewat kelas, tanpa render ulang. Ayat di luar layar dilewati saat menggulir */
.qr.pg-in{animation:qr-in var(--dur-m) var(--ease)}@keyframes qr-in{from{opacity:0;transform:translateY(6px)}}
.qr.pg-l{animation:pg-l .24s var(--ease)}.qr.pg-r{animation:pg-r .24s var(--ease)}@keyframes pg-l{from{opacity:0;transform:translateX(12%)}}@keyframes pg-r{from{opacity:0;transform:translateX(-12%)}}
.qr.no-latin .latin{display:none}.qr.no-arti .tr{display:none}.qr.no-tj [class^="tj-"]{color:inherit}
.item.ayah{content-visibility:auto;contain-intrinsic-size:auto 140px}
.item.ayah:active{background:var(--hover)}
@media(prefers-reduced-motion:reduce){.qr.pg-in,.qr.pg-l,.qr.pg-r{animation:none}}
/* Kehalusan seluruh halaman: koleksi, sub halaman, dan umpan balik sentuh */
@keyframes rise{from{opacity:0;transform:translateY(8px)}}
.list-cards>.lc{animation:rise var(--dur-m) var(--ease) both}
.list-cards>.lc:nth-child(2){animation-delay:40ms}.list-cards>.lc:nth-child(3){animation-delay:80ms}.list-cards>.lc:nth-child(4){animation-delay:120ms}.list-cards>.lc:nth-child(5){animation-delay:160ms}.list-cards>.lc:nth-child(6){animation-delay:200ms}
a.lc,a.card,.chip,.qa,.tile{transition:background var(--dur-s) var(--ease),transform var(--dur-s) var(--ease),box-shadow var(--dur-s) var(--ease)}
a.lc:active,a.card:active,.qa:active,.tile:active{transform:scale(.98);background:var(--hover)}
.chip:active{transform:scale(.95)}
.ring button:active{transform:scale(.97)}.ring button{transition:transform var(--dur-s) var(--ease)}
[data-r="list"]{transition:opacity var(--dur-s) var(--ease)}[data-r="list"].busy{opacity:.45;pointer-events:none}
[data-r="list"]>.card{content-visibility:auto;contain-intrinsic-size:auto 180px}
@media(prefers-reduced-motion:reduce){.list-cards>.lc{animation:none}a.lc:active,a.card:active,.qa:active,.tile:active,.chip:active,.ring button:active{transform:none}}
/* Pesan baru dan daftar yang digambar ulang muncul dengan halus */
.b.in{animation:rise var(--dur-s) var(--ease) both}
[data-r="list"]>*,[data-r="items"]>*,[data-r="grid"]>*{animation:rise var(--dur-s) var(--ease) backwards}
@media(prefers-reduced-motion:reduce){.b.in,[data-r="list"]>*,[data-r="items"]>*,[data-r="grid"]>*{animation:none}}
/* Ketuk atau tekan tidak menggeser isi: hanya warna dan latar yang berubah */
.btn:active,.send:active,.qstep button:active,.ring button:active,.chip:active,a.lc:active,a.card:active,.qa:active,.tile:active,a.card:hover{transform:none}
.item.ayah,.qr{position:relative}
.item.ayah{padding:0 8px}
/* Bilah aksi ayah melayang tetap di bawah layar (seperti bilah pilihan pesan di Telegram), jadi tidak menutupi teks ayat di kedua mode */
.qact{position:fixed;left:12px;right:12px;bottom:calc(72px + env(safe-area-inset-bottom));z-index:15;margin:0;padding:8px 10px;background:var(--raised);box-shadow:var(--shadow);border:1px solid var(--line)}
body:has(.qplay:not([hidden])) .qact{bottom:calc(136px + env(safe-area-inset-bottom))}
@media(min-width:761px){.qact{left:auto;right:24px;bottom:24px;width:420px}body:has(.qplay:not([hidden])) .qact{bottom:96px}}
@media(max-width:760px){html[data-nav="0"] .qact{bottom:calc(16px + env(safe-area-inset-bottom))}}
/* Kata mutiara di Beranda: kartu lembut dengan tanda kutip besar dan tipografi yang tenang */
.quote-card{position:relative;overflow:hidden;margin-top:4px;padding:18px 20px 16px;background:linear-gradient(160deg,var(--raised) 0%,color-mix(in srgb,var(--accent) 7%,var(--raised)) 100%);border:1px solid color-mix(in srgb,var(--accent) 18%,var(--line))}
.quote-card .qhead{margin-bottom:8px}
.qlabel{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);font-weight:600}
.qmore{font-size:13px;color:var(--muted);text-decoration:none}.qmore:hover{color:var(--accent)}
.qmark{position:absolute;right:14px;top:-14px;font-size:96px;line-height:1;font-family:Georgia,serif;color:var(--accent);opacity:.12;pointer-events:none}
.quote-card .arab{font-size:24px;line-height:1.9;margin:4px 0 6px}
.quote-card p:not(.src){font-size:15.5px;line-height:1.7;color:var(--text);margin:0 0 6px}
.quote-card .src{margin:4px 0 0;font-size:12px}

/* ===== Gerakan halus seragam: sidebar, tombol, chip, kartu, nav ===== */
:root{--ease-spring:cubic-bezier(.34,1.3,.64,1)}
.app{transition:grid-template-columns var(--dur-m) var(--ease)}
.btn,.chip,.icb,.side-toggle,.nav a,.card,a.card,.qa,.tile{transition-property:background-color,color,border-color,box-shadow,transform,opacity;transition-duration:var(--dur-s);transition-timing-function:var(--ease)}
.btn:active,.chip:active,.icb:active,.side-toggle:active,.qa:active,.tile:active{transform:scale(.97);transition-duration:.08s}
.nav a:hover{transform:translateX(2px)}
.nav a{transition-property:background-color,color,transform}
.tabs .chip.on{transition-timing-function:var(--ease-spring)}

/* Geser antar halaman utama: animasi digerakkan jari di js/lib/swipe.js, jadi CSS keyframe arah tidak dipakai */
#view.in[data-anim=swipe]{animation:none}

/* Pesan: percakapan meluncur masuk dari kanan, daftar kembali dari kiri (gerakan sama seperti panel Kili) */
[data-r="conv"]:not([hidden]){animation:room-in var(--dur-l) var(--ease) both}
[data-r="inbox"]:not([hidden]){animation:inbox-in var(--dur-m) var(--ease) both}
@keyframes room-in{from{opacity:0;transform:translate3d(28px,0,0) scale(.985)}}
@keyframes inbox-in{from{opacity:0;transform:translate3d(-14px,0,0)}}
.ci{transition-property:background-color,transform,box-shadow;transition-duration:var(--dur-s);transition-timing-function:var(--ease)}
a.ci:active,.ci:active{transform:scale(.985);transition-duration:.08s}
@media(prefers-reduced-motion:reduce){[data-r="conv"]:not([hidden]),[data-r="inbox"]:not([hidden]){animation:none}.ci,a.ci:active,.ci:active{transition:none!important;transform:none}}
@media(prefers-reduced-motion:reduce){.app,.btn,.chip,.icb,.side-toggle,.nav a,.card,a.card,.qa,.tile{transition:none!important}.btn:active,.chip:active,.icb:active,.side-toggle:active,.qa:active,.tile:active,.nav a:hover{transform:none}}

/* Al-Qur'an: halaman bergaris pada mode mengalir, nomor halaman, penggeser halaman, dan navigasi surah */
.qr{scroll-margin-top:72px;touch-action:pan-y}
.qr.flow .flowtext{background-image:linear-gradient(to bottom,transparent calc(100% - 1px),color-mix(in srgb,currentColor 13%,transparent) 0);background-size:100% 2.5em;padding-bottom:1px}
.qpgno{margin:14px auto 0;width:max-content;min-width:2.4em;padding:2px 12px;border-top:1px solid color-mix(in srgb,currentColor 25%,transparent);font-family:var(--arab);font-size:16px;text-align:center;opacity:.7}
.qpager{display:flex;align-items:center;gap:10px;margin:2px 0 14px}
.qpg{flex:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--raised);color:var(--text);font-size:22px;line-height:1;cursor:pointer;box-shadow:var(--shadow);transition:background .12s,opacity .12s}
.qpg:hover:not(:disabled){background:var(--hover)}.qpg:disabled{opacity:.35;cursor:default;box-shadow:none}
.qpg-mid{flex:1;text-align:center;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.qpg-bar{height:4px;border-radius:99px;background:var(--hover);margin-top:6px;overflow:hidden}.qpg-bar i{display:block;height:100%;background:var(--accent);border-radius:inherit;transition:width .25s var(--ease)}
.qnav{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:stretch}
.qnav-a{display:flex;flex-direction:column;gap:2px;padding:10px 14px;border:1px solid var(--line);border-radius:14px;background:var(--raised);box-shadow:var(--shadow);transition:background .12s,border-color .12s;min-width:0}
.qnav-a:hover{background:var(--hover)}.qnav-a small{font-size:12px;color:var(--muted)}.qnav-a b{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qnav-a.next{text-align:right;background:var(--accent);border-color:var(--accent);color:var(--on-accent)}.qnav-a.next small{color:inherit;opacity:.8}.qnav-a.next:hover{filter:brightness(1.08);background:var(--accent)}
.qnav-list{align-self:center;padding:8px 12px;border-radius:999px;font-size:13px;color:var(--muted);border:1px solid var(--line);background:var(--raised);white-space:nowrap}.qnav-list:hover{background:var(--hover)}
@media(max-width:480px){.qnav{grid-template-columns:1fr 1fr}.qnav-list{grid-column:1/-1;grid-row:2;justify-self:center}}
.qprev{padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--surface,var(--raised));line-height:2;text-align:center;max-height:180px;overflow:auto;transition:font-size .15s}
.num{width:36px;height:36px}.ayah{grid-template-columns:40px 1fr}.anum{font-size:16px;line-height:1}
/* Kartu akun: identitas di atas, status sinkron, lalu pilihan masuk atau aksi akun */
.acct{padding:20px}
.acct-top{display:flex;gap:16px;align-items:flex-start}
.acct-av{width:68px;height:68px;font-size:26px}.acct-av .ic{width:28px;height:28px}
.acct.in .acct-av{box-shadow:0 0 0 3px var(--raised),0 0 0 5px var(--accent-soft)}
.acct-id{min-width:0;flex:1}.acct-id p{font-size:13px;line-height:1.45;overflow-wrap:anywhere;margin-top:2px}
/* Nama diketik langsung di judul kartu: tampil seperti teks, garis bawah muncul saat disentuh/diketik */
.acct .acct-name{display:block;width:100%;min-height:0;padding:2px 0 3px;margin:0;border:0;border-bottom:1.5px dashed transparent;border-radius:0;background:transparent;box-shadow:none;font:700 19px/1.3 var(--sans);color:var(--text)}
.acct .acct-name::placeholder{color:var(--muted);font-weight:600}
.acct .acct-name:hover{border-bottom-color:var(--line)}.acct .acct-name:focus{outline:none;box-shadow:none;border-bottom:1.5px solid var(--accent)}
.acct-av-btn{position:relative;flex:none;padding:0;border:0;background:none;border-radius:50%;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .1s}
.acct-av-btn:active{transform:scale(.96)}.acct-av-btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.acct-cam{position:absolute;right:-2px;bottom:-2px;width:26px;height:26px;border-radius:50%;background:var(--accent);color:var(--on-accent);display:grid;place-items:center;box-shadow:0 0 0 3px var(--raised)}
.acct-cam svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round}
.wa-row{display:flex;align-items:center;gap:6px;margin-top:16px;padding:5px 5px 5px 12px;border:1px solid var(--line);border-radius:12px;background:var(--surface);transition:border-color .15s,box-shadow .15s}
.wa-row:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.wa-in{flex:1;min-width:0;display:flex;align-items:center;gap:8px;color:#25a35a;cursor:text}.wa-in .ic{width:18px;height:18px}
.acct .wa-in input{flex:1;min-width:0;min-height:34px;padding:4px 0;border:0;background:transparent;box-shadow:none;font-size:14.5px;color:var(--text)}.acct .wa-in input:focus{outline:none;box-shadow:none}
.wa-row .btn.sm{min-height:34px;border-radius:9px;padding:4px 12px;flex:none}
.wa-help{display:block;margin:6px 2px 0;font-size:12px}
.dlg-av{width:112px;height:112px;font-size:44px;margin:14px auto 4px}
.acct-via{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}.acct-via:empty{display:none}
.via{font-size:11.5px;font-weight:600;padding:2px 9px;border-radius:999px;background:var(--accent-soft);color:var(--accent)}
.acct-sync{display:inline-flex;align-items:center;gap:7px;margin-top:8px;padding:4px 10px;border-radius:999px;background:var(--hover);font-size:12px;color:var(--muted);max-width:100%}
.sdot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--muted)}.sdot[data-s=ok]{background:#3aa676}.sdot[data-s=busy]{background:var(--warn);animation:sdot 1s ease-in-out infinite}.sdot[data-s=err]{background:var(--danger)}
@keyframes sdot{50%{opacity:.35}}
.acct-err{margin-top:10px;padding:9px 12px;border-radius:12px;font-size:13px;color:var(--danger);background:color-mix(in srgb,var(--danger) 9%,var(--raised));border:1px solid color-mix(in srgb,var(--danger) 25%,var(--line))}
.logins{display:grid;gap:10px;margin-top:16px}
.lbtn{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:48px;padding:10px 16px;border:1px solid var(--line);border-radius:12px;background:var(--raised);color:var(--text);font:600 14.5px/1.2 var(--sans);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background .15s,border-color .15s,transform .08s}
.lbtn svg{position:absolute;left:16px;width:20px;height:20px;flex:none}.lbtn:hover{background:var(--hover)}.lbtn:active{transform:scale(.985)}.lbtn:disabled{opacity:.5;cursor:default}
.lbtn.fb{background:#1877f2;border-color:#1877f2;color:#fff}.lbtn.fb:hover{background:#166fe0}
.or{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.08em}.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}
.mailform{display:grid;gap:12px;margin-top:16px}.mailform .field{margin:0}
.mseg{display:grid;grid-template-columns:1fr 1fr;border-radius:12px;padding:3px;background:var(--hover);border:0;gap:3px}
.mseg button{border-radius:9px;font-weight:600;font-size:14px;color:var(--muted)}.mseg button[aria-pressed=true]{background:var(--raised);color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,.1)}
.pw{position:relative}.pw input{padding-right:96px}
.pw-eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:0;background:transparent;color:var(--accent);font:600 13px var(--sans);padding:6px 8px;cursor:pointer;border-radius:8px}.pw-eye:hover{background:var(--hover)}
.mailform .btn.primary{min-height:46px;border-radius:12px;font-size:15px}
.linkbtn{border:0;background:none;padding:4px 2px;color:var(--accent);font:500 13.5px var(--sans);cursor:pointer}.linkbtn:hover{text-decoration:underline}.mform-foot{margin-top:-2px}
.acct-acts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}.acct-acts .btn{border-radius:12px;min-height:44px}
.btn.out-danger{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 35%,var(--line))}.btn.out-danger:hover{background:color-mix(in srgb,var(--danger) 8%,var(--raised))}
.acct .fixbox{margin-top:12px}

/* Navigasi bawah (ponsel): efek hover/geser dari sidebar desktop tidak dipakai, karena di layar sentuh
   efek hover menempel di ikon yang terakhir diketuk walau halaman sudah berpindah */
@media(max-width:760px){
  .nav a,.nav a:hover{background:transparent;transform:none;-webkit-tap-highlight-color:transparent}
  .nav a:hover:not(.on){color:var(--muted)}
  .nav a:focus:not(:focus-visible){outline:none}
  .nav a:focus-visible{outline:none}.nav a:focus-visible svg{outline:2px solid var(--accent);outline-offset:1px}
  .nav a:active svg{transform:scale(.92)}.nav a svg{transition:background .2s,transform .12s}
}

/* Tarik untuk muat ulang: indikator bulat di bawah bilah atas, mengikuti tarikan lalu berputar saat memuat */
#view{overscroll-behavior-y:contain}
.ptr{--k:0;position:fixed;left:50%;top:0;z-index:4;display:flex;flex-direction:column;align-items:center;gap:5px;opacity:0;pointer-events:none;transform:translate(-50%,-90px)}
.ptr small{font-size:10.5px;color:var(--muted);letter-spacing:.01em;white-space:nowrap}
.ptr.siap small,.ptr.spin small{color:var(--accent);font-weight:600}
/* Logo terbelah dua (segitiga kiri-atas & kanan-bawah) yang berputar mendekat lalu menyatu sesuai --k (0..1) */
.ptr-logo{position:relative;width:38px;height:38px;display:block;border-radius:50%;background:var(--raised);box-shadow:0 2px 12px rgba(0,0,0,.18)}
.ptr-logo svg{position:absolute;left:-5px;top:-5px;width:48px;height:48px;transform:rotate(-90deg);fill:none;stroke-width:2.2}
.ptr-logo svg circle{stroke:var(--line)}.ptr-logo svg .ptr-jejak{stroke:var(--accent);stroke-dasharray:100;stroke-dashoffset:100;stroke-linecap:round}
.ptr-logo i{position:absolute;inset:5px;background:url(../assets/logo.png) center/contain no-repeat;will-change:transform}
.ptr-a{clip-path:polygon(0 0,100% 0,0 100%);transform:translate(calc((1 - var(--k))*-10px),calc((1 - var(--k))*-10px)) rotate(calc((1 - var(--k))*-140deg));opacity:calc(.35 + var(--k)*.65)}
.ptr-b{clip-path:polygon(100% 0,100% 100%,0 100%);transform:translate(calc((1 - var(--k))*10px),calc((1 - var(--k))*10px)) rotate(calc((1 - var(--k))*140deg));opacity:calc(.35 + var(--k)*.65)}
.ptr.siap .ptr-logo{animation:ptr-pas .3s var(--ease-spring,ease)}@keyframes ptr-pas{50%{transform:scale(1.12)}}
.ptr.spin .ptr-logo i{animation:ptr-putar 1.1s cubic-bezier(.6,.1,.4,.9) infinite}
.ptr.spin .ptr-logo svg .ptr-jejak{stroke-dasharray:28 72;animation:ptr-cincin .9s linear infinite}
@keyframes ptr-putar{0%{transform:rotate(0) scale(1)}50%{transform:rotate(180deg) scale(.88)}100%{transform:rotate(360deg) scale(1)}}
@keyframes ptr-cincin{to{stroke-dashoffset:-100}}
@media (prefers-reduced-motion:reduce){.ptr.spin .ptr-logo i{animation-duration:2.4s}}
html.ptr-drag #view{user-select:none}
/* Dialog foto profil: pratinjau besar di tengah, tombol bertumpuk penuh */
.box:has(.dlg-av){text-align:center;width:min(340px,100%)}.box:has(.dlg-av) .dlg-actions{flex-direction:column;align-items:stretch}.box:has(.dlg-av) .dlg-actions .btn{min-height:44px;border-radius:12px}
.dlg-av .ic{width:44px;height:44px}
/* Ikon "ke hari ini": kalender berisi tanggal hari ini + panah arah saat sedang melihat tanggal lain */
.tdy-b{position:relative}.tdy{position:relative;display:grid;place-items:center;width:24px;height:24px}.tdy .ic{width:24px;height:24px}
.tdy b{position:absolute;left:0;right:0;top:11.5px;font:700 9px/1 var(--sans);text-align:center;letter-spacing:-.02em}
.tdy-dir{position:absolute;top:5px;width:15px;height:15px;border-radius:50%;background:var(--accent);color:var(--on-accent);font:700 11px/15px var(--sans);font-style:normal;text-align:center;opacity:0;transform:scale(.4);transition:opacity .2s,transform .2s var(--ease);box-shadow:0 0 0 2px var(--surface)}
.tdy-b[data-dir="-1"] .tdy-dir{left:3px;opacity:1;transform:none}.tdy-b[data-dir="-1"] .tdy-dir::before{content:"‹"}
.tdy-b[data-dir="1"] .tdy-dir{right:3px;opacity:1;transform:none}.tdy-b[data-dir="1"] .tdy-dir::before{content:"›"}
.tdy-b[data-dir="0"]{color:var(--accent)}
.btn.is-today{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 40%,var(--line))}
.d.pulse{animation:dpulse .6s var(--ease)}@keyframes dpulse{40%{transform:scale(1.08);box-shadow:inset 0 0 0 2px var(--accent),0 0 0 4px var(--accent-soft)}}
/* Acara bulan ini */
.mevs{display:grid;gap:8px;margin-top:10px}
.mev{display:flex;align-items:center;gap:12px;width:100%;padding:8px 12px 8px 8px;border:1px solid var(--line);border-radius:12px;background:var(--raised);color:var(--text);text-align:left;cursor:pointer;transition:background .15s,border-color .15s}
.mev:hover{background:var(--hover)}.mev.sel{border-color:var(--accent);background:var(--accent-soft)}
.mev-d{flex:none;width:44px;height:44px;border-radius:10px;background:color-mix(in srgb,var(--danger) 10%,var(--raised));color:var(--danger);display:grid;place-content:center;text-align:center;line-height:1.1}
.mev-d b{font-size:17px}.mev-d small{font-size:10.5px;text-transform:uppercase;letter-spacing:.04em}
.mev-t{flex:1;min-width:0;display:flex;flex-direction:column}.mev-t b{font-size:14px;font-weight:600}.mev-t small{font-size:12px;color:var(--muted)}
.mev em{flex:none;font-style:normal;font-size:11px;font-weight:600;padding:2px 8px;border-radius:999px;background:var(--accent);color:var(--on-accent)}
.mev-d b{white-space:nowrap}.mev-d{width:auto;min-width:44px;padding:0 6px}

/* Ayat per ayat: jarak dan garis pemisah seragam; sorotan melebar ke padding kartu sehingga isi tidak bergeser */
.qr .item.ayah{padding:14px 10px;margin:0 -10px;border-top:1px solid color-mix(in srgb,currentColor 11%,transparent);border-radius:0;transition:background .18s,box-shadow .18s,border-radius .18s}
.qr .item.ayah:first-of-type,.qr>.arab+.item.ayah{border-top-color:transparent}
.qr .item.ayah:active{background:color-mix(in srgb,currentColor 5%,transparent)}
.qr .ayah.mark,.qr .ayah.playing,.qr .ayah.sel{padding-left:10px;padding-right:10px;border-radius:12px;border-top-color:transparent}
.qr .ayah.mark+.ayah,.qr .ayah.playing+.ayah,.qr .ayah.sel+.ayah{border-top-color:transparent}
/* Ayat yang diketuk: warna kuning keemasan, beda dari hijau "terakhir dibaca" */
.qr .ayah.sel{background:color-mix(in srgb,#d4a017 14%,transparent);box-shadow:inset 3px 0 0 #c8962a}
.qr .fl.sel{background:color-mix(in srgb,#d4a017 20%,transparent);box-shadow:0 0 0 2px color-mix(in srgb,#d4a017 20%,transparent);border-radius:8px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.qr-gelap .ayah.sel,.qr-gelap .fl.sel{background:rgba(230,180,60,.16)}.qr-gelap .ayah.sel{box-shadow:inset 3px 0 0 #e0b04a}
.qr .ayah.sel .num{background:#c8962a}.qr .ayah.sel .anum{color:#fff;opacity:1}
/* Bilah aksi ayat: satu baris ringkas di atas navigasi bawah; halaman diberi ruang agar ayat terakhir tetap bisa dibaca */
.qact{display:block;padding:10px 10px 8px;border-radius:18px;background:var(--raised);color:var(--text);box-shadow:0 8px 28px rgba(0,0,0,.18);border:1px solid var(--line)}
.qact-h{display:flex;align-items:center;justify-content:space-between;padding:0 4px 6px;font-size:12.5px;color:var(--muted)}.qact-h b{font-weight:600}
.qact-x{border:0;background:var(--hover);color:var(--muted);width:26px;height:26px;border-radius:50%;cursor:pointer;font-size:12px}
.qact-g{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.qact-g button{display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 2px;border:0;border-radius:12px;background:transparent;color:var(--text);font:500 11.5px/1.2 var(--sans);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background .15s}
.qact-g button:hover{background:var(--hover)}.qact-g button:active{background:var(--accent-soft)}
.qact-g i{font-style:normal;font-size:17px;line-height:1.1;color:var(--accent)}.qact-g button.on i{color:#c8962a}
.flowtext .qact{text-align:left;direction:ltr;font-family:var(--sans)}
body:has(.qact) #view{padding-bottom:190px}
/* Pemilih tanggal / bulan (calpick.js) */
.calp .box{width:min(360px,100%);padding:16px 16px 14px}
.calp.out .box{opacity:0;transform:translateY(12px);transition:opacity .15s,transform .15s}
.calp-head{display:grid;grid-template-columns:40px 1fr 40px;align-items:center;margin-bottom:10px}
.calp-nav{width:40px;height:40px;border-radius:50%;border:0;background:var(--hover);color:var(--text);font-size:20px;cursor:pointer}.calp-nav:active{background:var(--accent-soft)}
.calp-title{border:0;background:none;color:var(--text);font:700 16px var(--sans);padding:8px;border-radius:10px;cursor:pointer}.calp-title::after{content:" ▾";font-size:11px;color:var(--muted)}.calp-title:hover{background:var(--hover)}
.calp-body{min-height:270px}
.calp-days{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;align-content:start}
.calp-wd{text-align:center;font-size:11px;color:var(--muted);padding:4px 0}
.calp-d{position:relative;aspect-ratio:1;border:0;border-radius:12px;background:transparent;color:var(--text);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.calp-d b{font-size:14.5px;font-weight:600;line-height:1}.calp-d small{font-size:9.5px;color:var(--muted);line-height:1}
.calp-d:hover{background:var(--hover)}.calp-d.today{box-shadow:inset 0 0 0 1.5px var(--accent)}
.calp-d.on{background:var(--accent);color:var(--on-accent)}.calp-d.on small{color:inherit;opacity:.8}
.calp-d i{position:absolute;bottom:4px;width:5px;height:5px;border-radius:50%;background:#3aa676}.calp-d i.p{background:var(--warn)}.calp-d.on i{background:var(--on-accent)}
.calp-months{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;align-content:start}
.calp-m{min-height:58px;border:1px solid var(--line);border-radius:14px;background:var(--raised);color:var(--text);font:600 13.5px var(--sans);cursor:pointer;padding:6px}
.calp-m:hover{background:var(--hover)}.calp-m.today{border-color:var(--accent);color:var(--accent)}.calp-m.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.calp-foot{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}.calp-foot .btn{min-height:44px;border-radius:12px}
.calp-body.sl-l{animation:pg-l .22s var(--ease)}.calp-body.sl-r{animation:pg-r .22s var(--ease)}
.cal-title{border:0;background:none;color:var(--text);font:700 15px var(--sans);min-width:170px;text-align:center;padding:6px 8px;border-radius:10px;cursor:pointer}.cal-title::after{content:" ▾";font-size:11px;color:var(--muted)}.cal-title:hover{background:var(--hover)}
/* Laporan bug: bagian yang ditandai */
.bshots{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;margin-bottom:8px;min-width:0}.bshots:empty{display:none}
.bshot{display:flex;gap:10px;align-items:center;min-width:0;max-width:100%;padding:6px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.bshot img,.bshot-no{flex:none;width:84px;height:56px;border-radius:8px;object-fit:cover;object-position:top;background:var(--hover);border:1px solid var(--line)}
.bshot-no{display:grid;place-items:center;font-size:10px;color:var(--muted);text-align:center}
.bshot-t{flex:1;min-width:0;display:flex;flex-direction:column}.bshot-t b{font-size:13px}.bshot-t small{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bshot-x{flex:none;width:28px;height:28px;border:0;border-radius:50%;background:var(--hover);color:var(--muted);cursor:pointer}
.btn.bpick{border-style:dashed;width:100%;justify-content:center;min-height:44px;border-radius:12px}
/* Mode tandai bagian (bugpick.js) */
.pick-box{position:fixed;z-index:70;pointer-events:none;border:2.5px solid #e2574c;border-radius:10px;background:rgba(226,87,76,.08);box-shadow:0 0 0 4px rgba(226,87,76,.18);transition:all .12s ease}
.pick-bar{position:fixed;left:12px;right:12px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:71;display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:16px;background:#2b2a27;color:#fff;box-shadow:0 10px 30px rgba(0,0,0,.35)}
html[data-nav="1"] .pick-bar{bottom:calc(84px + env(safe-area-inset-bottom))}
@media(min-width:761px){.pick-bar{left:auto;right:24px;bottom:24px!important;width:420px}}
.pick-msg{flex:1;min-width:0;display:flex;flex-direction:column;font-size:12.5px}.pick-msg b{font-size:13.5px}.pick-msg span{opacity:.8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pick-acts{display:flex;gap:6px;flex:none}.pick-bar .btn{border-radius:10px}.pick-bar .btn:not(.primary){background:transparent;color:#fff;border-color:rgba(255,255,255,.35)}
html.bugpick #view *{cursor:crosshair!important}
.pick-bar{touch-action:none;cursor:grab;user-select:none}.pick-bar.drag{cursor:grabbing;box-shadow:0 16px 40px rgba(0,0,0,.45);transform:scale(1.02)}
.pick-grip{flex:none;display:grid;place-items:center;width:20px;height:32px;margin-left:-4px;opacity:.6}.pick-grip svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:3.2;stroke-linecap:round}
.mseg button{display:inline-flex;align-items:center;justify-content:center;gap:7px}.mseg .ic{width:17px;height:17px}
.btn.bpick .ic{width:18px;height:18px;color:var(--accent)}

/* Popup di tengah layar dengan latar buram: dialog, menu Pengaturan, Pengaturan baca, aksi ayat Al-Qur'an */
.modal{background:rgba(0,0,0,.36);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
@media(max-width:560px){.modal{place-items:center;padding:16px}.modal .box{width:min(420px,100%);max-width:100%;border-radius:20px;padding-bottom:18px;max-height:calc(100dvh - 32px);animation:pop var(--dur-m) var(--ease)}}
.qact-latar{position:fixed;inset:0;z-index:19;border:0;padding:0;margin:0;background:rgba(0,0,0,.36);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);cursor:default;animation:qlatar var(--dur-s) ease}
@keyframes qlatar{from{opacity:0}}
.qact,html[data-nav="0"] .qact,body:has(.qplay:not([hidden])) .qact{position:fixed;left:50%;right:auto;top:50%;bottom:auto;width:min(380px,calc(100% - 32px));transform:translate(-50%,-50%);z-index:19;margin:0;animation:qact-tengah var(--dur-m) var(--ease)}
@keyframes qact-tengah{from{opacity:0;transform:translate(-50%,-50%) scale(.94)}}

/* Navigasi bawah & bilah atas selalu di atas isi halaman (isi yang sedang bergeser tidak boleh menutupinya) */
@media(max-width:760px){.side{position:relative;z-index:6;background:var(--surface)}}
/* Ikon garis pengganti emoji */
.ih{display:inline-flex;align-items:center;gap:7px}.ih .ic{color:var(--accent)}
.ico{display:inline-flex;align-items:center;justify-content:flex-start;width:1.9em;color:var(--accent)}.ico .ic{width:19px;height:19px}
.seg button{display:inline-flex;align-items:center;justify-content:center}.seg button .ic{width:17px;height:17px;stroke-width:2}
.seg button.pr .ic{width:16px;height:16px}
.qact-g i{display:grid;place-items:center;height:22px}.qact-g i .ic{width:20px;height:20px;stroke-width:1.8}.qact-g button.on i{color:#c8962a}
.btn .ic+*,.btn>.ic{margin-right:2px}
.tk{width:14px;height:14px;vertical-align:-2px;stroke-width:2}.rd .tk{color:var(--accent)}
.lockmsg .ic,.banner>.ic{width:15px;height:15px;vertical-align:-2px}
#kili .kili-bub .ic{width:24px;height:24px}
/* Tasbih digital: lingkaran besar memenuhi layar */
.ring{width:min(440px,90vw,58vh);margin:14px auto 18px}.ring circle{stroke-width:6}
.ring button{font-size:clamp(64px,20vw,108px);font-weight:600;letter-spacing:-.02em}

/* Tasbih: muat satu layar; pengaturan di popup tengah */
.tsb-hal .head{margin-bottom:8px}.tsb-hal .head h1{font-size:22px}.tsb-hal .chips{margin-bottom:2px}
.tsb-hal .ring{width:min(440px,90vw,calc(100dvh - 400px));min-width:220px;margin:6px auto 14px}
.tset-btn{border-radius:999px;gap:7px}.tset-btn small{font-weight:400;font-size:12.5px}
.tset .box{width:min(380px,100%)}.tset-head{margin-bottom:6px}.tset-head h2{font-size:18px}
.tset-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 0;border-top:1px solid var(--line)}
.tset-row .btn{min-width:96px;border-radius:999px}.tset-row .btn[aria-pressed=true]{background:var(--accent-soft);color:var(--accent);border-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.tset-row select{min-width:96px}
.tset-act{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding-top:14px;border-top:1px solid var(--line)}.tset-act .btn{gap:6px;border-radius:999px}
.tset.out .box{opacity:0;transform:scale(.97);transition:opacity .15s,transform .15s}.tset.out{opacity:0;transition:opacity .15s}
.tset .btn:not(.danger){border:1px solid var(--line);background:var(--raised)}.tset .btn.ghost{border:0;background:transparent}

/* Lembar Pengaturan baca: format seperti fadzkuruuni (kepala tetap, pratinjau, bagian berlabel), gaya Kisah Lillah */
.qsheet .box.ksh{width:min(400px,100%);padding:0;display:flex;flex-direction:column;max-height:calc(100dvh - 32px);overflow:hidden}
.ksh-h{display:flex;align-items:center;gap:12px;padding:16px 16px 12px;border-bottom:1px solid var(--line)}
.ksh-h>div{flex:1;min-width:0}.ksh-h b{display:block;font-size:17px}.ksh-h small{display:block;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ksh-h .si{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);flex:none}.ksh-h .si .ic{width:19px;height:19px}
.ksh-x{width:34px;height:34px;border:0;border-radius:50%;background:var(--hover);color:var(--text);display:grid;place-items:center;cursor:pointer;flex:none}
.ksh-b{padding:4px 16px calc(18px + env(safe-area-inset-bottom));overflow-y:auto;overscroll-behavior:contain}
.ksh-l{margin:16px 2px 8px;color:var(--muted);font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.ksh-c{border:1px solid var(--line);border-radius:14px;background:var(--surface);overflow:hidden}
.ksh-c+.ksh-c{margin-top:10px}
.qpv{margin:14px 0 4px;padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--surface);text-align:center;display:flex;flex-direction:column;gap:4px}
.qpv .qpa{font-size:var(--af,28px);line-height:1.9;direction:rtl}.qpv .qpl{color:var(--accent);font-style:italic;font-size:13px}.qpv .qpt{color:var(--muted);font-size:13px}
.ksh-act{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:12px}.ksh-act .btn{border-radius:999px;gap:6px}.ksh-act input{width:96px;border-radius:999px;padding-left:14px}
.ksr{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 12px;cursor:pointer}.ksr+.ksr{border-top:1px solid var(--line)}
.ksr b{display:block;font-size:14px;font-weight:600}.ksr small{display:block;font-size:12px;color:var(--muted)}
.sw{appearance:none;-webkit-appearance:none;flex:none;width:44px;height:26px;border-radius:999px;background:var(--line);position:relative;cursor:pointer;transition:background .18s;margin:0;border:0}
.sw::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .18s var(--ease)}
.sw:checked{background:var(--accent)}.sw:checked::after{transform:translateX(18px)}.sw:disabled{cursor:not-allowed}
.ksh-mt.off{opacity:.45}.ksh-mt.off .ksr{cursor:not-allowed}
.ksh-mn{margin:0 2px 8px;font-size:12.5px;color:var(--muted);line-height:1.5}
.ksh-c .tjlegend{padding:0 12px 11px;margin:0}
.ksl{display:flex;align-items:center;gap:12px;padding:10px 12px}.ksl span{font-size:14px;width:44px}.ksl input{flex:1;accent-color:var(--accent)}.ksl b{min-width:28px;text-align:right;font-size:13px;font-variant-numeric:tabular-nums}
/* Ayat yang dituju: blok warna aksen, berkedip 3 kali saat tiba */
.qr .ayah.tuju{padding-left:10px;padding-right:10px;border-radius:12px;border-top-color:transparent;background:color-mix(in srgb,var(--accent) 16%,transparent)}
.qr .ayah.tuju+.ayah{border-top-color:transparent}
.qr .fl.tuju{background:color-mix(in srgb,var(--accent) 20%,transparent);border-radius:8px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.qr .tuju.kedip{animation:aykedip .3s ease-in-out 3}
@keyframes aykedip{50%{background:color-mix(in srgb,var(--accent) 40%,transparent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 38%,transparent)}}
.ksl-pv{margin-top:8px}.ksl-pv span{width:52px}
/* Tasbih di layar lebar (desktop): isi di tengah, lingkaran menyesuaikan tinggi layar */
@media(min-width:761px){.tsb-hal{display:flex;flex-direction:column;align-items:center;min-height:calc(100dvh - 120px);justify-content:center}.tsb-hal>*{width:100%}.tsb-hal .chips{justify-content:center;flex-wrap:wrap}.tsb-hal .ring{width:min(420px,calc(100dvh - 330px));min-width:240px}}
.perm .btn,.perm .badge{white-space:nowrap;flex:none}
/* Geser antar halaman seperti WhatsApp: potret halaman sebelah menempati sel grid yang sama dengan #view */
.peek{grid-area:main;overflow:hidden;background:var(--bg);pointer-events:none;will-change:transform;min-width:0;min-height:0;position:relative;z-index:1}
.peek *{animation:none!important;transition:none!important}
@media(max-width:760px){.peek[data-mobile-title="header"] .head h1{display:none}}
/* Pratinjau panel sebelah saat menggeser di dalam halaman (Al-Qur'an, tab Profil) */
.geser-pv{position:absolute;margin:0!important;pointer-events:none;will-change:transform;z-index:1}
.geser-pv *{animation:none!important;transition:none!important}
.geser-on{overflow-x:clip}
.geser-surah{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:240px;text-align:center}
.geser-surah small{color:var(--muted)}.geser-surah b{font-size:20px}.geser-surah span{font-size:12.5px;color:var(--accent)}
.prerender{position:fixed;left:-20000px;top:0;visibility:hidden;pointer-events:none;contain:strict;height:100vh;overflow:hidden}
/* Profil › Bantuan › Bagikan aplikasi */
.row-btns{display:flex;gap:8px;flex-wrap:wrap}.row-btns .btn{flex:1 1 150px;justify-content:center;gap:8px}

/* Beranda: jadwal sebaris 7 waktu. lewat = redup, kini = sedang berjalan (garis tepi + titik), on = sorotan penuh */
.hero-days>div{position:relative;transition:background .3s,color .3s,opacity .3s,box-shadow .3s}
.hero-days span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hero-days .lewat{opacity:.5}
.hero-days .kini{opacity:1}
.hero-days .berikut{box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--hero-fg) 70%,transparent)}
.hero-time small.hero-dt{font-size:.55em;opacity:.7;font-weight:600}.hero-time small.hero-tz{font-size:.4em;opacity:.75;font-weight:600;letter-spacing:.04em;vertical-align:.35em}
.hero-time{font-variant-numeric:tabular-nums}
.hero-days .kini::after{content:"";position:absolute;top:5px;right:5px;width:6px;height:6px;border-radius:50%;background:#f3c969;box-shadow:0 0 0 2px color-mix(in srgb,#f3c969 35%,transparent);animation:kiniDenyut 1.8s ease-in-out infinite}
.hero-days .on{background:var(--hero-fg);color:var(--hero-bg);box-shadow:0 4px 14px rgb(0 0 0 / .22);transform:translateY(-1px)}
.hero-days .on b{font-weight:800}
.hero-days .on.kini::after{background:#d9a53a;box-shadow:0 0 0 2px color-mix(in srgb,#d9a53a 30%,transparent)}
.hero-days .sunah span{font-style:italic}
@keyframes kiniDenyut{50%{transform:scale(1.35);opacity:.7}}
@media (max-width:760px){.hero-days{gap:3px}.hero-days>div{padding:7px 0;font-size:9.5px}.hero-days b{font-size:11px;letter-spacing:-.01em}.hero-days .kini::after{top:3px;right:3px;width:5px;height:5px}}
@media (max-width:360px){.hero-days>div{font-size:8.5px}.hero-days b{font-size:10px}}
@media (prefers-reduced-motion:reduce){.hero-days .kini::after{animation:none}}
/* Profil › Notifikasi: mode tiap waktu (Adzan / Notif / Senyap / Mati) */
.wset-ket{font-size:13px;margin:0 0 10px}
.wpre{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 10px;font-size:13px}.wpre .chip{min-height:32px;padding:4px 12px;font-size:13px}
.wset{display:grid;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-bottom:12px;transition:opacity .2s}
.wset.redup{opacity:.6}
.wrow{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px;min-width:0}.wrow+.wrow{border-top:1px solid var(--line)}
.wnm{min-width:0;display:flex;flex-direction:column}.wnm b{font-size:14px}.wnm small{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.wrow.mati .wnm b{color:var(--muted)}
.wseg{flex:none}.wseg button{height:32px!important;min-width:0!important;padding:0 10px!important;font-size:12.5px;white-space:nowrap}
.wseg button[aria-pressed=true].m-adzan{background:var(--accent);color:var(--on-accent)}
.wseg button[aria-pressed=true].m-notif{background:var(--accent-soft);color:var(--accent)}
.wseg button[aria-pressed=true].m-senyap{background:var(--hover);color:var(--text)}
.wseg button[aria-pressed=true].m-off{background:color-mix(in srgb,var(--danger) 16%,transparent);color:var(--danger)}
@media (max-width:420px){.wrow{padding:8px}.wseg button{padding:0 7px!important;font-size:12px}.wnm b{font-size:13.5px}}
/* Absensi: keterangan kecil di bawah nama ibadah (mis. Al-Kahfi · Malam & hari Jumat) */
.ibn{display:inline-flex;flex-direction:column;line-height:1.25}.ibn small{font-size:11.5px;color:var(--accent);font-weight:500;margin-top:2px}
/* Jendela unduh/perbarui aplikasi */
.rilis-h{display:flex;gap:12px;align-items:center}.rilis-h img{width:48px;height:48px;flex:none}.rilis-h h2{margin:0}
.rilis-p{margin:0 0 4px;padding-left:20px;font-size:14px;line-height:1.6}.rilis-m .dlg-actions a.btn{text-decoration:none}

/* Jendela wajib: ketukan di luar = goyang (hanya tombol yang menutup) */
@keyframes goyang{20%{transform:translateX(-8px)}40%{transform:translateX(7px)}60%{transform:translateX(-5px)}80%{transform:translateX(3px)}}
.modal .box.goyang{animation:goyang .38s ease}