@font-face{font-family:ProSolatArabic;src:url('assets/Amiri-Regular.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
:root{--paper:#f2f2f7;--surface:#fff;--ink:#1c1c1e;--muted:#636366;--blue:#0062cc;--pale:#e8f0fb;--line:#d1d1d6;--warm:#765419;--arabic-size:36px;--latin-size:16px;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;color:var(--ink);background:#e5e5ea;font-synthesis:none;font-size:16px}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;height:100%;overscroll-behavior:none}body{display:flex;justify-content:center}button,input,output{font:inherit}button{min-height:44px;padding:10px 15px;cursor:pointer;touch-action:manipulation;border:1px solid #8e8e93;border-radius:12px;color:var(--ink);background:var(--surface);font-size:.9375rem;font-weight:500;line-height:1.4}button:hover{background:var(--pale)}button:active{background:#dce8f8}button:disabled{opacity:.4;cursor:default}.primary{background:var(--blue);color:#fff;border-color:var(--blue)}.primary:hover{background:#004caa}.text-button,.back-link{color:var(--blue);background:transparent;border:0}.back-link{align-self:flex-start;text-align:left;padding-inline:0}.wide{width:100%}a{color:var(--blue);text-underline-offset:4px}a:hover{text-decoration-thickness:2px}:focus-visible{outline:3px solid var(--blue);outline-offset:3px}[hidden]{display:none!important}input[type=checkbox]{width:22px;height:22px;accent-color:var(--blue);cursor:pointer;flex-shrink:0}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;border:0;clip-path:inset(50%);overflow:hidden;white-space:nowrap}
#app{width:100%;max-width:520px;height:100dvh;display:flex;flex-direction:column;background:var(--paper);border-inline:1px solid var(--line);padding-top:env(safe-area-inset-top)}.app-header{display:flex;align-items:center;flex-shrink:0;height:56px;padding:0 22px}#brand{border:0;padding:0;background:transparent;font-size:1.375rem;font-weight:750;letter-spacing:-.6px;min-height:44px}#main{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;scroll-padding-block:16px}.screen{min-height:100%;width:100%;padding:24px;display:flex;flex-direction:column;gap:18px}.screen-title{flex-shrink:0}.eyebrow{margin:0 0 8px;color:var(--muted);font-size:.8125rem;font-weight:600}.screen-title h1,.finish-copy h1{margin:0 0 10px;font-size:2rem;line-height:1.15;letter-spacing:-.8px;font-weight:750}.screen-title>p:last-child:not(.eyebrow){margin:0;color:var(--muted);font-size:1rem;line-height:1.6}.footnote{margin:0;color:var(--muted);font-size:.8125rem;line-height:1.65;flex-shrink:0}.center-screen,.config-screen,.role-screen{justify-content:center}.home-screen .footnote{text-align:center}.prayers{display:grid;gap:9px}.prayer{display:flex;align-items:center;gap:14px;width:100%;min-height:62px;padding:14px 17px;text-align:left;border:0;border-radius:14px}.prayer-no{font-size:.875rem;color:var(--muted)}.prayer strong{font-size:1.0625rem;font-weight:600}.rakaat{display:flex;gap:14px;align-items:center;margin-left:auto;font-size:.8125rem;color:var(--muted)}.rakaat b{font-size:1.5rem;font-weight:400}.resume{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:15px 16px;min-height:68px;text-align:left;border:1px solid #8eadd5;background:var(--surface);color:var(--ink);border-radius:14px}.resume strong{display:block;font-size:.9375rem;font-weight:650}.resume small{display:block;margin-top:5px;font-size:.8125rem;color:var(--muted);line-height:1.4}.resume>span:last-child{font-size:1.5rem;color:var(--blue)}.compact{margin-top:6px}.role-list{display:grid;gap:12px}.role-list button{position:relative;display:flex;flex-direction:column;gap:7px;text-align:left;padding:19px 40px 19px 18px;min-height:84px;border:0;border-radius:14px}.role-list strong{font-size:1.0625rem;font-weight:650}.role-list span{font-size:.875rem;color:var(--muted);line-height:1.5}.role-list b{position:absolute;right:17px;top:26px;color:var(--muted);font-size:1.5rem;font-weight:400}.modes{display:grid;gap:12px}.modes button{display:flex;flex-direction:column;gap:9px;min-height:100px;padding:19px 17px;text-align:left;border-radius:15px}.modes button[aria-pressed=true]{padding:18px 16px;border:2px solid var(--blue)}.modes strong{font-size:1.125rem;font-weight:650}.modes button>span:not(.mode-top){font-size:.9375rem;font-weight:400;color:var(--muted);line-height:1.5}.mode-top{display:flex;align-items:center;justify-content:space-between;gap:10px}.recommend{font-size:.8125rem;color:var(--blue);font-weight:600}.config-note{margin:0;font-size:.875rem;line-height:1.65;color:var(--muted)}.config-screen>.primary{min-height:50px}.selection-summary{margin:4px 0;font-size:1rem;color:var(--muted)}
.bottom-nav{flex-shrink:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;padding:5px 10px calc(5px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:#fafafa}.bottom-nav button{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:3px;min-height:52px;padding:5px 2px;border:0;border-radius:8px;background:transparent;color:var(--muted);font-size:.75rem;font-weight:500}.bottom-nav button[aria-current=page]{color:var(--blue)}.bottom-nav svg{flex-shrink:0}
body[data-view=read] .app-header{height:44px}body[data-view=read] #brand{font-size:1.125rem}.story{height:100%;min-height:380px;width:100%;display:flex;flex-direction:column;padding:4px 18px 10px;gap:8px}.reader-context{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-shrink:0;min-height:44px}.reader-context>span{font-size:.8125rem;color:var(--muted);line-height:1.4}.reader-context button{border:0;background:transparent;color:var(--blue);font-size:.8125rem;padding:8px;white-space:nowrap}.rakaat-progress{display:flex;gap:6px;flex-shrink:0;min-height:6px}.rakaat-progress button{flex:1;min-height:6px;border:0;border-radius:3px;padding:0;background:#c7c7cc;position:relative}.rakaat-progress span{position:absolute;width:1px;height:1px;clip-path:inset(50%)}.rakaat-progress .past{background:#87a9d2}.rakaat-progress .current{background:var(--blue)}.rakaat-progress button:focus-visible{outline-offset:4px}.post-progress{width:100%;height:6px;min-height:6px;flex-shrink:0;accent-color:var(--blue)}.story-meta{display:flex;align-items:center;justify-content:space-between;gap:6px;min-height:50px;flex-shrink:0}.story-meta>p{font-size:.8125rem;color:var(--muted);line-height:1.5;margin:0}.reading-tabs{display:flex;gap:2px;align-items:center;padding:3px;border-radius:10px;background:#e3e3e8;flex-shrink:0}.reading-tabs button{min-width:44px;min-height:44px;padding:6px 8px;border:0;border-radius:7px;background:transparent;color:var(--muted);font-size:.8125rem}.reading-tabs button[aria-pressed=true]{background:#fff;color:var(--ink);font-weight:650}.reading-tabs button:disabled{opacity:.45}.story-heading{flex-shrink:0;text-align:center}.story-heading h1{margin:0 0 10px;font-size:1.5rem;line-height:1.25;letter-spacing:-.5px;font-weight:750}.law-tags{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap}.hukum{display:inline-block;padding:5px 8px;border-radius:5px;background:var(--pale);color:#0058b8;font-size:.8125rem;font-weight:600;line-height:1.4}.hukum.sunat{color:var(--warm);background:#f6eedf}.story-stage{position:relative;flex:1;min-height:80px;background:var(--surface);border-radius:17px;padding:16px;display:flex;margin-top:2px}.story-copy{width:100%;height:100%;min-height:0;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;scrollbar-width:thin;overflow-wrap:break-word;padding:5px 2px 20px}.story-copy p{margin:0 0 16px;white-space:pre-line}.story-copy p:last-child{margin-bottom:0}.story-copy .arabic{font-family:ProSolatArabic,"Noto Naskh Arabic","Traditional Arabic",serif;font-size:var(--arabic-size);line-height:1.9;direction:rtl;text-align:right;color:var(--ink)}.story-copy .rumi,.story-copy .meaning{font-size:var(--latin-size);line-height:1.8;text-align:left;color:var(--ink)}.story-copy .meaning{color:var(--muted)}.story-copy[data-display=combined] .arabic,.story-copy[data-display=combined] .rumi,.story-copy[data-display=combined] .meaning{text-align:center}.story-copy[data-display=combined] .meaning{border-top:1px solid #e5e5ea;padding-top:12px}.story-copy .repeat{text-align:center;font-size:.875rem;font-weight:600;line-height:1.6;color:var(--warm)}.story-copy .reminder{text-align:center;font-size:1.375rem;line-height:1.7;color:var(--blue);padding:15px 0}.reading-guide{border-top:1px solid var(--line);margin-top:18px;text-align:left}.reading-guide summary{cursor:pointer;min-height:44px;padding:12px 0;font-size:.875rem;color:var(--blue);font-weight:600}.reading-guide .instruction,.story-copy>.instruction{margin:0 0 8px;font-size:.9375rem;line-height:1.8;color:var(--muted);text-align:left;white-space:normal}.scroll-hint{position:absolute;left:16px;right:16px;bottom:0;pointer-events:none;text-align:center;padding:5px;background:#fffffff2;color:var(--muted);font-size:.75rem;border-radius:0 0 12px 12px}.story-tools{min-height:30px;flex-shrink:0;display:flex;align-items:center;justify-content:center;gap:8px}.gesture-hint{font-size:.8125rem;color:var(--muted)}.count-button{background:var(--pale);border:0;min-height:44px;font-size:.9375rem}.story-controls{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-shrink:0}.story-controls button{min-width:88px;min-height:44px;font-size:.875rem}.story-controls span{color:var(--muted);font-size:.8125rem;white-space:nowrap}.story-copy::-webkit-scrollbar{width:3px}.story-copy::-webkit-scrollbar-thumb{background:#b0b0b5;border-radius:3px}.story-copy::-webkit-scrollbar-track{background:transparent}.story-copy::-webkit-scrollbar-button{display:none}
.tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px;padding:3px;border-radius:10px;background:#e3e3e8;position:sticky;top:0;z-index:2;flex-shrink:0}.tabs button{border:0;background:transparent;min-height:44px;padding:8px 4px;font-size:.875rem}.tabs button[aria-pressed=true]{background:white;border-radius:8px;font-weight:650}.settings-body{min-width:0}.settings-reading button{flex:1}.setting-label{font-size:.875rem;color:var(--muted);margin:0 0 10px}.toggle-row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;padding:10px 12px;border-bottom:1px solid var(--line);font-size:.9375rem;line-height:1.5;cursor:pointer}.size-row{display:flex;align-items:center;gap:8px;min-height:66px;font-size:.875rem}.size-row>span{margin-right:auto;line-height:1.4}.size-row button{padding:7px 10px;min-width:44px}.size-row output{font-size:.8125rem;min-width:20px;text-align:center}.grouped-list{background:var(--surface);border-radius:14px;padding:0 12px}.grouped-list .toggle-row{padding-inline:0}.grouped-list>:last-child{border-bottom:0}.settings-note{margin-bottom:14px}.post-row{display:flex;align-items:center;gap:3px;border-bottom:1px solid var(--line)}.post-row .toggle-row{flex:1;min-width:0;border:0;font-size:.875rem;gap:8px}.post-row button{border:0;background:transparent;min-width:44px;min-height:48px;padding:5px;font-size:1.125rem;color:var(--blue)}.order-no{font-size:.75rem;min-width:15px;text-align:center;color:var(--muted)}.notice{padding:12px;border-radius:8px;background:#fff1dc;color:#754310;font-size:.875rem;line-height:1.6}.source-index{display:grid;gap:24px}.source-index h2{font-size:.875rem;color:var(--muted);font-weight:600;margin:0 0 10px}.source-index .grouped-list button{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;text-align:left;border:0;border-bottom:1px solid var(--line);border-radius:0;min-height:54px;padding:12px 0;font-size:.9375rem;background:transparent}.source-index button span{font-size:1.375rem;color:var(--muted)}.source-body p{font-size:1.0625rem;line-height:1.9;margin:0}.source-body a{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:20px 0;border-bottom:1px solid var(--line);font-size:1rem;line-height:1.6;min-height:64px}
.finish-copy h1{font-size:2.125rem}.finish-copy p{margin:0;font-size:1rem;line-height:1.6;color:var(--muted)}.finish-actions{display:grid;gap:10px;margin:8px 0}.coffee-link{display:flex;align-items:center;justify-content:center;gap:10px;border:0;border-top:1px solid var(--line);border-radius:0;background:transparent;color:var(--muted);padding-top:18px;margin-top:8px;font-size:.875rem}.coffee-link svg{flex-shrink:0}.coffee-large{color:var(--blue)}.coffee-screen .screen-title h1{font-size:1.875rem}.qr-placeholder{align-self:center;width:160px;height:160px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;border:2px dashed #8e8e93;border-radius:15px;color:var(--muted);background:white}.qr-placeholder small{font-size:.8125rem}
dialog{width:calc(100% - 28px);max-width:480px;max-height:85dvh;overflow-y:auto;border:1px solid var(--line);border-radius:18px;padding:0 18px 18px;background:var(--paper);color:var(--ink)}dialog::backdrop{background:#16162566}.dialog-head{display:flex;align-items:center;justify-content:space-between;gap:12px;position:sticky;top:0;padding:16px 0 12px;background:var(--paper);z-index:2}.dialog-head h2{font-size:1.25rem;margin:0}.dialog-head button{padding:8px 12px}.search-label{display:block;font-size:.875rem;margin:4px 0 8px}#step-search{width:100%;min-height:48px;border:1px solid #8e8e93;border-radius:10px;background:white;color:var(--ink);padding:10px 12px;font-size:1rem;margin-bottom:14px}#steps-list{display:grid;gap:7px}#steps-list button{display:flex;flex-direction:column;gap:4px;text-align:left;min-height:68px;padding:12px;border:1px solid var(--line);border-radius:10px;background:white}#steps-list button[aria-current=step]{border:2px solid var(--blue);padding:11px}#steps-list button>span,#steps-list small{font-size:.8125rem;color:var(--muted)}#steps-list strong{font-size:1rem;font-weight:600}.empty-message{font-size:1rem;color:var(--muted);line-height:1.6}
@media(max-height:680px){.app-header{height:50px;padding-inline:18px}.screen{padding:14px 18px;gap:12px}.screen-title h1{font-size:1.8125rem}.home-screen .screen-title>p:last-child:not(.eyebrow){display:none}.home-screen .eyebrow{margin-bottom:6px}.home-screen .screen-title h1{margin-bottom:0}.home-screen .prayers{gap:6px}.prayer{min-height:44px;padding:9px 14px}.resume{padding:11px 13px;min-height:62px}.resume small{margin-top:3px}.role-list{gap:9px}.role-list button{min-height:76px;padding-block:15px}.role-list b{top:22px}.modes{gap:9px}.modes button{min-height:88px;padding:15px}.modes button[aria-pressed=true]{padding:14px}.config-screen{gap:12px}.bottom-nav{padding-top:4px;padding-bottom:calc(4px + env(safe-area-inset-bottom))}.bottom-nav button{min-height:48px}.story{padding:4px 12px 8px;gap:6px}.story-heading h1{font-size:1.375rem}.law-tags{gap:4px}.hukum{padding:4px 6px}.reader-context button{padding-inline:4px}.reader-context>span{max-width:48%}.story-stage{padding:12px}.story-tools{min-height:28px}.finish-copy h1{font-size:1.8125rem}.coffee-screen .screen-title h1{font-size:1.5rem}.qr-placeholder{width:135px;height:135px}}
.rakaat-progress>span{display:block;position:static;clip-path:none;width:auto;flex:1;height:6px;border-radius:3px;background:#c7c7cc}.rakaat-progress>span.past{background:#87a9d2}.rakaat-progress>span.current{background:var(--blue)}
@media(max-width:350px){.reading-tabs button{padding-inline:5px}.post-row .toggle-row{font-size:.8125rem}.order-no{display:none}.source-body p{font-size:1rem}.reader-context>span{font-size:.75rem}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}
.coffee-payment{margin:0;width:100%;max-width:320px;align-self:center;background:#fff;border-radius:16px;padding:8px 8px 16px}.coffee-qr{display:block;width:100%;height:auto}.coffee-payment figcaption{display:flex;flex-direction:column;gap:5px;text-align:center;font-size:1rem;line-height:1.4}.coffee-payment figcaption span{color:var(--muted);font-size:.875rem}.qr-download{align-self:center;min-height:44px;display:inline-flex;align-items:center;justify-content:center;color:var(--blue);font-size:.9375rem}.coffee-screen{gap:12px}.coffee-screen .screen-title p:last-child{max-width:31ch;margin-inline:auto}
.coffee-thanks{margin:4px 0 0;text-align:center;font-size:.9375rem;line-height:1.6;color:var(--muted);align-self:center;width:100%;max-width:320px;text-wrap:balance}.coffee-thanks strong{display:block;font-weight:500;color:var(--ink)}.coffee-thanks span{display:block;margin-top:4px}.coffee-screen .screen-title{text-align:center}.coffee-screen .coffee-large{align-self:center}
.coffee-payment{max-width:300px}.coffee-screen{gap:10px}
#brand{display:inline-flex;align-items:center;gap:4px}#brand img{display:block;width:44px;height:44px;object-fit:contain;flex-shrink:0}#brand span{font-size:1.25rem;letter-spacing:-.035em}body[data-view="read"] #brand img{width:36px;height:36px}
:root[data-theme=dark]{color-scheme:dark;--paper:#15171c;--surface:#20232b;--ink:#f2f2f7;--muted:#b5bac6;--blue:#80b7ff;--pale:#263b55;--line:#414753;--warm:#e7c483;background:#0c0e12}:root[data-theme=dark] button{border-color:#626b79}:root[data-theme=dark] button:hover{background:#303d50}:root[data-theme=dark] button:active{background:#364961}:root[data-theme=dark] .primary{background:#80b7ff;color:#101c2e;border-color:#80b7ff}:root[data-theme=dark] .primary:hover{background:#a1caff}:root[data-theme=dark] .bottom-nav{background:#191c22}:root[data-theme=dark] .reading-tabs,:root[data-theme=dark] .tabs{background:#303540}:root[data-theme=dark] .reading-tabs button[aria-pressed=true],:root[data-theme=dark] .tabs button[aria-pressed=true]{background:#495261;color:#fff}:root[data-theme=dark] .hukum{color:#a6ceff}:root[data-theme=dark] .hukum.sunat{background:#3a3223;color:#e7c483}:root[data-theme=dark] .scroll-hint{background:#20232bf2}:root[data-theme=dark] #steps-list button,:root[data-theme=dark] #step-search{background:var(--surface);color:var(--ink)}:root[data-theme=dark] .story-copy[data-display=combined] .meaning{border-color:var(--line)}:root[data-theme=dark] .rakaat-progress>span{background:#454c59}:root[data-theme=dark] .rakaat-progress>span.past{background:#5479a7}:root[data-theme=dark] .rakaat-progress>span.current{background:var(--blue)}:root[data-theme=dark] .coffee-payment{color:#1c1c1e}:root[data-theme=dark] .coffee-payment figcaption span{color:#636366}:root[data-theme=dark] .notice{background:#3a3223;color:#e7c483}
.app-header{display:flex;align-items:center;justify-content:space-between}.theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;min-height:44px;padding:10px;border:0;background:transparent;color:var(--ink);flex-shrink:0}
:root[data-theme=dark] #brand img{filter:brightness(1.8)}