/* Shared Ibadah application chrome, built from the existing owner-authored components. */
body.qari-shell{--bg:#f9fafb;--card:#fff;--text:#1f2937;--sub:#6b7280;--pri:#059669;--pri2:#0d9488;--line:#e5e7eb;--hl:#ecfdf5;background:var(--bg);font-family:'Plus Jakarta Sans',system-ui,sans-serif;padding-left:0}
html[data-theme=dark] body.qari-shell{--bg:#111827;--card:#1f2937;--text:#f3f4f6;--sub:#9ca3af;--line:#374151;--hl:#064e3b;background:var(--bg)}
.qari-shell .app{max-width:none;width:100%;margin:0;padding-bottom:90px;min-width:0}
.qari-shell .main{min-width:0;max-width:100%;padding:16px;gap:16px}
.qari-shell.ref .main{padding:0}
.qari-shell .hdr{background:var(--card);border-bottom:1px solid var(--line);padding:14px 16px;gap:8px;z-index:30}
.qari-shell .hdr h1{min-width:0;font-size:18px}
.qari-shell .ftr{display:none}
.qari-shell .bnav{width:100%;max-width:none;left:0;right:0;transform:none;z-index:45;background:var(--card)}
.qari-shell .bnav-ctr{flex:none;border:4px solid var(--card);box-shadow:0 0 0 2px #10b981,0 8px 28px #10b98144}
.qari-shell .bnav-it.active{color:#059669}
.qari-shell .bnav-it.active .bnav-ic{background:var(--hl);color:#059669}
.qari-shell #modal{z-index:100;backdrop-filter:blur(4px)}
.qari-shell #toast{z-index:150}
.qari-shell .mbox{color:var(--text);background:var(--card)}
.qari-shell button:focus-visible,.qari-shell a:focus-visible,.qari-shell [tabindex]:focus-visible{outline:3px solid #34d399;outline-offset:3px}
.qari-shell .sidebar .sb-brand[role=link]{cursor:pointer}
.qari-shell .sb-dot2{display:none}
.qari-shell .sb-it.active:after{content:'';width:6px;height:6px;flex:none;margin-left:auto;background:#10b981;border-radius:50%}
.qari-shell .sidebar .sb-it.active .sb-new{margin-left:0}
.qari-shell .service-note{font-size:11px;line-height:1.7;color:var(--sub);margin:0;padding:10px 14px;border:1px solid var(--line);background:var(--card);border-radius:12px}
.qari-shell .surah-grid{grid-template-columns:1fr}
.qari-shell .surah-card{background:var(--card);border:1px solid var(--line);box-shadow:0 1px 2px #00000004;border-radius:16px;min-width:0}
.qari-shell .surah-card .sname{font-size:15px}
.qari-shell .surah-card .sarab{max-width:55%;white-space:normal;text-align:right;font-size:22px}
.qari-shell .rq-search{min-width:0}
.qari-shell .rq-search input{min-width:0}
.qari-shell #ayList{display:flex;flex-direction:column;gap:16px}
.qari-shell .ay{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px;scroll-margin-top:100px}
.qari-shell .ay.pl{background:var(--hl);border-color:#34d399}
.qari-shell .ay .qtext{line-height:2.3}
.qari-shell .ay .qlatin{color:#059669;font-size:14px}
.qari-shell .ay .qtrans{color:var(--text);font-size:14px;line-height:1.8}
.qari-shell .rd-nav{bottom:78px;background:var(--card);z-index:35}
.qari-shell .qbar:not(.drag){bottom:150px}
.qari-shell .install-card{position:fixed;right:20px;bottom:96px;z-index:60;width:min(360px,calc(100vw - 32px));padding:18px;background:var(--card);border:1px solid var(--line);border-radius:20px;box-shadow:0 12px 40px #0002;font-size:13px}
.qari-shell .install-card h3{font-size:16px;margin:0 0 8px}
.qari-shell .install-card p{color:var(--sub);line-height:1.6;margin:0 0 12px}
.qari-shell .install-card .actions{display:flex;gap:8px}
.qari-shell .install-card button{border:0;border-radius:10px;padding:10px 14px;background:#059669;color:white;font-weight:600}
.qari-shell .install-card button:last-child{background:var(--bg);color:var(--text)}
.qari-shell .offline-status{position:fixed;top:0;left:0;right:0;padding:6px;text-align:center;font-size:11px;background:#fef3c7;color:#92400e;z-index:160}
@media(min-width:640px){
 .qari-shell .surah-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .qari-shell .main{padding:24px 32px}
}
@media(min-width:1024px){
 body.qari-shell{padding-left:288px}
 .qari-shell .app{padding:0 0 40px}
 .qari-shell .main{padding:24px 32px 100px}
 .qari-shell.ref .main{padding:0}
 .qari-shell .rq{padding:24px 32px 44px;width:100%;min-width:0}
 .qari-shell .hdr{padding:20px 32px;min-height:80px}
 .qari-shell .hdr h1{font-size:20px}
 .qari-shell .hdr .rd-name{max-width:none;font-size:20px}
 .qari-shell .hdr .rd-sub{font-size:11px}
 .qari-shell .bnav{display:none}
 .qari-shell .sidebar{width:288px;height:100dvh;padding:20px 12px 0;overflow:hidden;display:flex;position:fixed;left:0;top:0;bottom:0;flex-direction:column;background:var(--card);border-right:1px solid var(--line);z-index:50}
 .qari-shell .sb-brand{padding:0 8px 14px;border:0;flex:none;gap:12px;display:flex;align-items:center}
 .qari-shell .sb-logo{width:44px;height:44px;background:linear-gradient(135deg,#06b6d4,#059669);border-radius:16px;box-shadow:0 8px 14px #05966922}
 .qari-shell .sb-name{font-size:20px;font-weight:800;gap:6px}
 .qari-shell .sb-tag{font-size:10px;font-weight:400;text-transform:none;letter-spacing:0}
 .qari-shell .sb-badge{padding:2px 5px;border-radius:5px;font-size:10px}
 .qari-shell .sb-pray{display:flex;flex:none;margin:0 4px 8px;padding:7px 10px;font-size:11px;background:var(--hl);border:1px solid var(--line)}
 .qari-shell .sb-city{font-size:9px}
 .qari-shell .sb-streak{align-self:flex-start;margin:0 8px 12px;padding:7px 10px;border:1px solid #fef3c7;font-size:12px;gap:4px;background:#fffbeb}
 html[data-theme=dark] .qari-shell .sb-streak{background:#422006;border-color:#713f12}
 .qari-shell .sb-streak span{font-size:12px;color:inherit}
 .qari-shell .sb-search{flex:none;margin:6px 4px 8px;width:calc(100% - 8px);border:0;border-radius:12px;background:var(--bg);padding:12px 14px}
 .qari-shell .sb-nav{overflow:auto;min-height:0;scrollbar-width:thin;padding:0 0 8px;flex:1}
 .qari-shell .sb-sec{font-size:10px;font-weight:600;letter-spacing:.5px;padding:8px 12px 4px}
 .qari-shell .sb-it{min-height:37px;padding:5px 12px;gap:12px;font-size:14px;color:var(--text);border-radius:12px}
 .qari-shell .sb-it svg{width:24px;height:24px;padding:3px;border-radius:7px;background:var(--bg);flex:none}
 .qari-shell .sb-it.active{background:linear-gradient(90deg,#d1fae5aa,transparent);border-left:3px solid #10b981;color:#047857;font-weight:700}
 .qari-shell .sb-it.active svg{background:#10b981;color:white;box-shadow:0 2px 7px #10b98144}
 html[data-theme=dark] .qari-shell .sb-it.active{background:linear-gradient(90deg,#064e3b,transparent);color:#6ee7b7}
 .qari-shell .sb-new{font-size:10px;border-radius:3px;padding:0 4px}
 .qari-shell .sb-foot{padding:12px 0 8px;flex-wrap:wrap;flex:none;border-top:1px solid var(--line);gap:4px}
 .qari-shell .sb-settings{display:flex;align-items:center;gap:12px;flex:1;padding:5px 12px;color:var(--text);font-size:14px}
 .qari-shell .sb-settings.active{color:#059669;font-weight:700}
 .qari-shell .sb-settings svg{width:24px;height:24px;padding:3px;background:var(--bg);border-radius:7px}
 .qari-shell .sb-theme{margin-right:4px;background:var(--bg);border:0;color:#d49b15}
 .qari-shell .sb-by{width:100%;margin:4px 0 0;text-align:center;font-size:10px;padding-bottom:4px}
 .qari-shell .sb-by b{font-weight:500;color:var(--sub)}
 .qari-shell .rd-nav{left:288px;bottom:0;width:calc(100% - 288px);max-width:none;padding:12px 32px;border-top:1px solid var(--line)}
 .qari-shell .qbar:not(.drag){left:calc(50% + 144px);bottom:86px}
 .qari-shell .install-card{bottom:20px}
 .qari-shell .ts{min-height:calc(100dvh - 80px)}
 .qari-shell .tj{margin:0}
 .qari-shell .mj{height:100dvh}
 .qari-shell .jd-sh{max-width:640px}
 .qari-shell .stg{max-width:960px;margin:0 auto}
 .qari-shell.qari-home .app{padding:24px 32px 40px}
 .qari-shell.qari-home .sb-pray{display:flex}
 .qari-shell.qari-home .sidebar:has(#sbStreak[style*="none"]) .sb-brand{margin-bottom:0}
}
@media(max-width:420px){
 .qari-shell .hdr{padding:12px;gap:4px}
 .qari-shell .hdr h1{font-size:16px}
 .qari-shell.ref .hdr h1{padding-left:42px;font-size:16px}
 .qari-shell.ref .hdr h1:before,.qari-shell.ref .hdr h1:after{width:34px;height:34px}
 .qari-shell .rd-name{max-width:44vw;font-size:13px}
 .qari-shell .ay{padding:16px}
 .qari-shell .surah-card .sarab{font-size:19px}
}
@media(prefers-reduced-motion:reduce){.qari-shell *{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Hafalan: real text tests and repeat-audio session. */
.qari-shell .hf-tabs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:0}
.qari-shell .hf-tab{background:var(--card);border:1px solid var(--line);color:var(--sub);border-radius:12px;padding:11px 16px;font:600 13px inherit;cursor:pointer}
.qari-shell .hf-tab.active{background:#059669;color:white;border-color:#059669}
.qari-shell .hf-search{flex:1;min-width:180px;max-width:360px}
.qari-shell .hf-sort{width:auto;max-width:240px;min-width:150px}
.qari-shell .hf-modal{z-index:120;padding:16px;backdrop-filter:blur(5px)}
.qari-shell .hf-modal-card{width:100%;max-width:680px;max-height:90dvh}
.qari-shell .hf-trow{display:grid;grid-template-columns:1fr auto;gap:12px;padding:14px;border-bottom:1px solid var(--line);align-items:center}
.qari-shell .hf-answer{grid-column:1/-1;grid-row:2;font-family:'Amiri',serif;direction:rtl;text-align:right;font-size:28px;line-height:2.3;padding:8px 12px;background:var(--bg);border-radius:12px}
.qari-shell .hf-hidden{direction:ltr;display:block;text-align:center;font:12px 'Plus Jakarta Sans',sans-serif;color:var(--sub);padding:10px}
.qari-shell #hfTikrarControls{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0}
.qari-shell #hfTikrarAyah{font-family:'Amiri',serif;font-size:30px;line-height:2.3;direction:rtl;text-align:right;padding:12px}
.qari-shell .hf-modal-head{gap:12px}
@media(min-width:1024px){
 .qari-shell .hdr>.ib:first-child{display:none}
 .qari-shell .hdr h1,.qari-shell.ref .hdr h1{text-align:left;flex:1;margin:0}
 .qari-shell .hdr>.sp{display:none}
 .qari-shell .qbar:not(.drag){left:calc(50% + 144px);right:auto;width:min(620px,calc(100vw - 336px));transform:translateX(-50%)}
}

/* Final parity pass: shared visual tokens and dialogs, without overriding rs-* reading settings. */
.qari-shell .ui-icon{display:inline-block;vertical-align:middle;flex:none}
.qari-shell .sb-summary{display:flex;align-items:center;gap:8px;margin:0 8px 16px;flex:none;min-height:34px}
.qari-shell .sb-summary .sb-pray{min-width:0;flex:1;margin:0;padding:7px 10px;gap:5px;white-space:nowrap;border-color:#a7f3d066;background:#ecfdf5;border-radius:12px;overflow:hidden}
.qari-shell .sb-summary .sb-city{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-left:0;font-size:9px;max-width:64px;color:#6b7280}
.qari-shell .sb-summary .sb-streak{align-self:auto;margin:0;padding:8px 10px;gap:3px;font-size:11px;white-space:nowrap;border-radius:12px}
.qari-shell .sb-summary .sb-streak b,.qari-shell .sb-summary .sb-streak span{font-size:11px}
.qari-shell .sb-search{margin-top:0}
.qari-shell .sb-nav{scroll-padding:8px}
.qari-shell .sb-it svg{color:var(--sub)}
.qari-shell .sb-settings.active{border-left:3px solid #10b981;background:linear-gradient(90deg,#d1fae5aa,transparent);border-radius:12px}
.qari-shell .sb-settings.active svg{background:#10b981;color:white}
.qari-shell .sb-theme,.qari-shell .ht-theme{transition:background .15s,color .15s}
.qari-shell .bnav-it svg,.qari-shell .sb-it svg,.qari-shell button svg{flex-shrink:0}
.qari-shell #modal:not(.reader-settings){background:rgba(0,0,0,.52);backdrop-filter:blur(4px)}
.qari-shell #modal:not(.reader-settings) .mbox{width:100%;max-width:480px;max-height:88dvh;border-radius:24px;padding:20px;box-shadow:0 25px 50px -12px #0005;border:1px solid var(--line);overscroll-behavior:contain}
.qari-shell #modal .mbox .mh{gap:12px;margin-bottom:16px}
.qari-shell #modal .mbox .mh h2{font-size:16px!important;line-height:1.4}
.qari-shell #modal .mbox .x{width:36px;height:36px;min-width:36px;min-height:36px;flex:none;padding:8px;border-radius:10px;color:var(--sub);background:transparent;display:inline-flex;align-items:center;justify-content:center}
.qari-shell #modal .mbox .x:hover{background:var(--bg);color:var(--text)}
.qari-shell .dialog-heading-icon{width:40px;height:40px;display:flex;align-items:center;justify-content:center;color:#059669;background:#ecfdf5;border-radius:12px;flex:none}
.qari-shell .dialog-heading-text{flex:1;min-width:0}
.qari-shell .dialog-subtitle{font-size:12px;line-height:1.5;color:var(--sub);margin:2px 0 0}
.qari-shell .dialog-label{display:block;font-size:12px;color:var(--sub);margin:16px 0 8px}
.qari-shell .dialog-primary{display:flex;align-items:center;justify-content:center;width:100%;margin-top:16px;min-height:48px;border-radius:12px;font-size:14px;font-weight:700}
.qari-shell .loop-manage{display:flex;align-items:center;gap:6px;color:#047857;font-size:12px;font-weight:600;margin:0 0 18px;text-decoration:none}
.qari-shell .loop-surah{font-size:14px;font-weight:600;margin:0 0 14px}
.qari-shell .loop-surah span{color:var(--sub);font-weight:400}
.qari-shell .loop-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.qari-shell .loop-field>span:first-child{display:block;color:var(--sub);font-size:12px;margin-bottom:6px}
.qari-shell .loop-step{display:flex;align-items:center;border:1px solid var(--line);border-radius:12px;min-height:46px;overflow:hidden;background:var(--bg)}
.qari-shell .loop-step button{width:42px;min-width:36px;height:44px;border:0;background:transparent;display:grid;place-items:center;color:var(--sub)}
.qari-shell .loop-step input{appearance:textfield;-moz-appearance:textfield;width:100%;min-width:0;border:0;outline:0;text-align:center;background:transparent;font:700 16px 'Plus Jakarta Sans',sans-serif;color:var(--text)}
.qari-shell .loop-step input::-webkit-inner-spin-button,.qari-shell .loop-step input::-webkit-outer-spin-button{appearance:none;margin:0}
.qari-shell .loop-rounds{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;margin-bottom:8px}
.qari-shell .loop-rounds button{border:1px solid var(--line);border-radius:12px;padding:12px 2px;background:var(--bg);color:var(--text);font-size:14px;font-weight:600}
.qari-shell .loop-rounds [aria-pressed=true]{background:#059669;border-color:#059669;color:white}
.qari-shell .loop-save{display:flex;align-items:center;gap:10px;background:var(--bg);padding:12px;border-radius:12px;margin-top:16px;font-size:14px}
.qari-shell .loop-save input{width:20px;height:20px;accent-color:#059669}
.qari-shell .jump-quick{display:flex;gap:8px;flex-wrap:wrap}
.qari-shell .jump-quick button{border:1px solid #a7f3d0;color:#047857;background:#ecfdf5;padding:9px 12px;border-radius:10px;font-size:12px}
.qari-shell .jump-number{display:block;width:100%;padding:14px 16px;font-size:20px;border:1px solid var(--line);border-radius:14px;color:var(--text);background:var(--bg)}
.qari-shell .jump-error{font-size:12px;color:#dc2626;min-height:18px;margin:6px 0}
.qari-shell .jump-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
.qari-shell .jump-actions button{display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;border-radius:12px}
.qari-shell .qari-choices{display:flex;flex-direction:column;gap:6px;overflow:auto;max-height:65dvh}
.qari-shell .qari-choice{display:flex;align-items:center;gap:12px;width:100%;padding:14px 12px;background:transparent;color:var(--text);border:1px solid transparent;border-radius:12px;text-align:left;font:inherit}
.qari-shell .qari-choice:hover{background:var(--bg)}
.qari-shell .qari-choice.selected{background:var(--hl);border-color:#a7f3d0;color:#047857}
.qari-shell .qari-avatar{width:36px;height:36px;display:grid;place-items:center;border-radius:50%;background:var(--bg);color:var(--sub);flex:none}
.qari-shell .qari-choice.selected .qari-avatar{background:#d1fae5;color:#059669}
.qari-shell .qari-choice-name{flex:1;min-width:0}
.qari-shell .qari-choice-name b{display:block;font-size:14px;font-weight:600}
.qari-shell .qari-choice-name small{display:block;text-align:left;font:14px/1.6 'Amiri',serif;color:var(--sub);margin-top:2px}
.qari-shell .ays-row{border-radius:12px}
.qari-shell .ays-go{display:flex;align-items:center;justify-content:center}
.qari-shell .hf-modal-card{border-radius:24px;border:1px solid var(--line);box-shadow:0 25px 50px -12px #0004}
.qari-shell .hf-x{width:36px;height:36px;min-width:36px;border-radius:10px;display:grid;place-items:center}
.qari-shell .page-title-icon{display:inline-flex;width:40px;height:40px;align-items:center;justify-content:center;background:var(--bg);color:var(--sub);border-radius:12px;flex:none;margin-right:12px}
.qari-shell[data-page=pengaturan] .hdr h1{display:flex;align-items:center;font-size:24px}
.qari-shell[data-page=pengaturan] .stg{width:100%;max-width:none}
.qari-shell[data-page=pengaturan] .main{gap:0;padding-top:0}
.qari-shell .stg .pg-sec{font-size:12px;letter-spacing:.5px;margin:16px 4px 12px}
.qari-shell .stg .pg-card{border-color:var(--line);border-radius:16px;box-shadow:0 1px 3px #00000003}
.qari-shell .stg .pg-row{padding:16px;min-height:72px;border-bottom-color:#f3f4f6}
.qari-shell .stg .pg-row-ic{width:20px;height:28px;min-width:20px;border-radius:0;background:transparent!important}
.qari-shell .stg .pg-row-bd b{font-size:16px;font-weight:500}
.qari-shell .stg .pg-row-bd small{font-size:12px;line-height:1.5;margin-top:0}
.qari-shell .stg .pg-inline{flex-direction:row;align-items:center;gap:12px}
.qari-shell .stg .pg-font-row{display:grid;grid-template-columns:20px 1fr;gap:8px 12px}
.qari-shell .stg .pg-font-row .pg-fonts{grid-column:1/-1;width:100%;gap:8px;margin:4px 0 0}
.qari-shell .stg .pg-fcard{padding:12px 8px;border-radius:12px;min-height:88px;background:var(--card)}
.qari-shell .stg .pg-fcard.on{background:#ecfdf5;border-color:#10b981;box-shadow:0 0 0 1px #10b98122;color:#047857}
.qari-shell .stg .pg-fsample{font-size:22px;line-height:30px}
.qari-shell .stg .pg-qari{width:100%;border:1px solid #a7f3d0;background:var(--bg);border-radius:12px;margin-top:8px}
.qari-shell .stg .pg-size-head{display:flex;align-items:center;justify-content:space-between;width:100%}
.qari-shell .pg-about{padding:24px;text-align:center}
.qari-shell .pg-about-brand{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:16px}
.qari-shell .pg-about-logo{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(135deg,#059669,#0d9488);color:#fff;font-size:28px;font-weight:800}
.qari-shell .pg-about h2{font-size:22px;margin:0 0 4px}.qari-shell .pg-about small{font-size:11px;color:var(--sub)}
.qari-shell .pg-about p{font-size:13px;line-height:1.8;color:var(--sub);margin:0 0 16px}
.qari-shell .pg-disclaimer{border:1px solid var(--line);border-radius:12px;background:var(--bg);padding:16px;text-align:left;margin:16px 0}
.qari-shell .pg-disclaimer b{display:block;font-size:12px;margin-bottom:6px}.qari-shell .pg-disclaimer p{font-size:12px;margin:0}
html[data-theme=dark] .qari-shell .stg .pg-row{border-bottom-color:#374151}
html[data-theme=dark] .qari-shell .stg .pg-fcard.on,html[data-theme=dark] .qari-shell .dialog-heading-icon{background:#064e3b;color:#6ee7b7}
html[data-theme=dark] .qari-shell .loop-manage,html[data-theme=dark] .qari-shell .qari-choice.selected{color:#6ee7b7}
html[data-theme=dark] .qari-shell .sb-summary .sb-pray,html[data-theme=dark] .qari-shell .jump-quick button{background:#064e3b;border-color:#065f46;color:#a7f3d0}
html[data-theme=dark] .qari-shell .sb-summary .sb-city{color:#9ca3af}
html[data-theme=dark] .qari-shell .sb-settings.active{background:linear-gradient(90deg,#064e3b,transparent)}
@media(min-width:1024px){
 .qari-shell .sb-summary .sb-pray{display:flex}
 .qari-shell #modal.sheet:not(.reader-settings){align-items:center;padding:24px}
 .qari-shell #modal:not(.reader-settings) .mbox>.grab{display:none}
 .qari-shell[data-page=pengaturan] .hdr{position:relative;margin:24px 24px 0;border:1px solid var(--line);border-radius:16px;min-height:90px;padding:20px 24px;box-shadow:0 1px 3px #0001}
 .qari-shell[data-page=pengaturan] .main{padding:0 24px 40px}
 .qari-home .home-hero{padding:20px;min-height:218px;border-radius:16px}
 .qari-home .hh-mob{display:none}
 .qari-home .hh-desk{display:block;position:relative;z-index:1}
 .qari-home .hh-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
 .qari-home .hh-loc2{display:flex;align-items:center;gap:8px;font-size:14px;color:#d1fae5b3}
 .qari-home .hh-btns2{display:flex;gap:8px}
 .qari-home .hh-btns2 button{display:grid;place-items:center;width:34px;height:34px;background:#ffffff1a;border:1px solid #ffffff12;color:#d1fae5;border-radius:12px}
 .qari-home .hh-main{display:flex;align-items:center;justify-content:space-between}
 .qari-home .hh-left2{display:flex;align-items:center;gap:16px}
 .qari-home .hh-ic2{width:64px;height:64px;border-radius:16px;background:#ffffff26;border:1px solid #ffffff33;display:grid;place-items:center;color:white}
 .qari-home .hh-pray2 small{text-transform:uppercase;font-size:12px;color:#d1fae599}
 .qari-home .hh-pn2{display:flex;flex-direction:column;gap:2px;margin-top:4px}
 .qari-home .hh-pn2 b{font-size:30px;line-height:1.1;color:white;letter-spacing:-.5px}
 .qari-home .hh-pn2 span{font-size:12px;color:#d1fae5b3}
 .qari-home .hh-count2{text-align:right;color:white}
 .qari-home .hh-count2 b{display:block;font-size:30px;line-height:1.2}
 .qari-home .hh-count2 small{font-size:12px;color:#d1fae580}
 .qari-home .hh-hijri{margin-top:18px;padding-top:12px;border-top:1px solid #ffffff1a;text-align:center;font-size:12px;color:#d1fae580}
 .qari-home .sidebar:has(#sbStreak:not([style*="none"])) .sb-search{margin-top:0}
}
@media(max-width:639px){
 .qari-shell #modal:not(.reader-settings){align-items:flex-end;padding:0}
 .qari-shell #modal:not(.reader-settings) .mbox{border-radius:24px 24px 0 0!important;max-width:100%;max-height:90dvh;padding:12px 20px calc(24px + env(safe-area-inset-bottom,0px));border-bottom:0}
 .qari-shell #modal .grab{width:40px;height:4px;margin-bottom:12px}
 .qari-shell .hf-modal{padding:0;align-items:flex-end}
 .qari-shell .hf-modal-card{max-height:90dvh;border-radius:24px 24px 0 0}
 .qari-shell[data-page=pengaturan] .hdr h1{font-size:18px;justify-content:center}
 .qari-shell[data-page=pengaturan] .page-title-icon{width:32px;height:32px;margin-right:8px}
 .qari-shell .stg .pg-row-bd b{font-size:14px}
 .qari-shell .stg .pg-row-bd small{font-size:11px}
 .qari-shell .stg .pg-inline{flex-wrap:wrap}
 .qari-shell .stg .pg-inline>.pg-row-bd{min-width:160px}
 .qari-shell .loop-step button{width:34px;min-width:32px}
}


/* Settings scale and preview stretch correctly inside column/grid rows. */
.qari-shell .stg .pg-row.pg-col:has(.pg-size-head){display:grid;grid-template-columns:20px minmax(0,1fr);gap:8px 12px}
.qari-shell .stg .pg-row:has(.pg-size-head)>.pg-row-ic{grid-column:1;grid-row:1}
.qari-shell .stg .pg-size-head{grid-column:2;grid-row:1}
.qari-shell .stg .pg-row:has(.pg-size-head)>.pg-range,.qari-shell .stg .pg-row:has(.pg-size-head)>.pg-scale,.qari-shell .stg .pg-row:has(.pg-size-head)>.pg-preview{grid-column:1/-1;width:100%}
.qari-shell .stg .pg-row:has(.pg-size-head)>.pg-scale{display:flex;justify-content:space-between;margin:0}
.qari-shell .stg .pg-preview{margin:12px 0 0;padding:18px;text-align:center}
.qari-shell .stg .pg-font-row .pg-fonts{padding:0}
.qari-shell .vpill svg{width:12px;height:12px;vertical-align:-2px;margin-right:3px}
.qari-shell .hf-minibtn .ui-icon,.qari-shell .hf-badge2 .ui-icon{vertical-align:-2px;margin-right:3px}
@media(max-width:639px){.qari-shell .stg .pg-fname{font-size:10px;white-space:normal;overflow:visible;text-overflow:clip}.qari-shell .stg .pg-fdesc{font-size:9px}.qari-shell .stg .pg-fcard{padding:12px 4px}}

@media(min-width:640px){.qari-shell #modal .jd-sh{border-radius:24px;box-shadow:0 25px 50px -12px #0005}}

/* A completed page entrance animation must not trap fixed dialogs in its transform containing block. */
.qari-shell .rq{animation-fill-mode:backwards}
.qari-shell .dialog-primary.primary,.qari-shell .jump-actions .primary{background:#059669;background-image:none;box-shadow:none;color:#fff}

.qari-shell .tr-modal{z-index:120}