:root{
  --bg:#edf4ff;--card:#fff;--ink:#16263e;--muted:#7f91a9;--line:#d6e2f2;--soft:#e5eef9;
  --accent:#245b9f;--good:#2f72b7;--shadow:rgba(37,83,137,.09);--hero1:#173d69;--hero2:#3d78bb;
  --nav:rgba(255,255,255,.95);--top:rgba(237,244,255,.91);--danger:#aa4b4b
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
body{min-height:100vh;transition:background .2s ease,color .2s ease}
button,input,select{font:inherit}
button{cursor:pointer}
button:disabled{opacity:.55;cursor:not-allowed}
#app{max-width:620px;margin:0 auto;min-height:100vh;padding-bottom:112px}
.page{animation:pageIn .18s ease}
@keyframes pageIn{from{opacity:.5;transform:translateY(4px)}to{opacity:1;transform:none}}
.boot{padding:calc(max(env(safe-area-inset-top),var(--tg-safe-area-inset-top,0px)) + var(--tg-content-safe-area-inset-top,0px) + 44px) 22px}.boot-mark{width:72px;height:72px;border-radius:24px;background:var(--accent);color:var(--card);display:grid;place-items:center;font-size:32px;margin-bottom:26px}.boot-line{height:18px;border-radius:99px;background:var(--soft);width:70%;margin-bottom:12px;animation:pulse 1.2s infinite alternate}.boot-line.short{width:46%}@keyframes pulse{to{opacity:.45}}
.top{position:sticky;top:0;z-index:20;padding:calc(max(env(safe-area-inset-top),var(--tg-safe-area-inset-top,0px)) + var(--tg-content-safe-area-inset-top,0px) + 12px) 16px 10px;background:var(--top);backdrop-filter:blur(16px);display:flex;align-items:center;justify-content:space-between}
.brand{font-weight:900;font-size:20px;letter-spacing:-.4px}
.iconbtn{width:42px;height:42px;border:1px solid var(--line);border-radius:14px;background:var(--card);color:var(--ink);display:grid;place-items:center}
main{padding:8px 16px 20px}
.card{background:var(--card);border:1px solid var(--line);border-radius:24px;padding:20px;margin-bottom:14px;box-shadow:0 8px 24px var(--shadow)}
.hero{background:linear-gradient(145deg,var(--hero1),var(--hero2));color:#fff;border:0;min-height:230px;position:relative;overflow:hidden}
.hero:after{content:"";position:absolute;width:230px;height:230px;border-radius:50%;border:1px solid rgba(255,255,255,.13);right:-70px;top:-70px;box-shadow:0 0 0 28px rgba(255,255,255,.025),0 0 0 56px rgba(255,255,255,.018)}
.eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:.12em;opacity:.72}
h1,h2,h3,p{margin-top:0}h1{font-size:34px;line-height:1.05;letter-spacing:-1.1px;margin-bottom:10px}h2{font-size:22px;letter-spacing:-.5px}.muted{color:var(--muted)}.hero .muted{color:rgba(255,255,255,.7)}
.nexttime{font-size:48px;font-weight:900;letter-spacing:-2px;margin:18px 0 4px}
.row{display:flex;align-items:center;gap:12px}.between{justify-content:space-between}.stack{display:grid;gap:12px}.sectiontitle{margin:8px 2px 12px}
.progress{height:8px;background:var(--soft);border-radius:99px;overflow:hidden;margin-top:14px}.progress span{height:100%;background:var(--good);display:block;border-radius:99px;transition:width .3s ease}
.progress-ring{width:88px;height:88px;border-radius:50%;display:grid;place-items:center;position:relative;background:conic-gradient(var(--good) var(--ring),var(--soft) 0)}.progress-ring:after{content:"";position:absolute;width:68px;height:68px;border-radius:50%;background:var(--card)}.progress-ring b{position:relative;z-index:1;font-size:18px}
.quick{display:grid;grid-template-columns:1fr 1fr;gap:12px}.quick button{border:1px solid var(--line);background:var(--card);border-radius:22px;padding:18px;text-align:left;color:var(--ink);min-height:126px}.quick b{display:block;font-size:18px;margin-top:18px}.quick small{color:var(--muted)}
.weekstrip{display:grid;grid-template-columns:repeat(7,1fr);gap:7px}.weekday{border:1px solid var(--line);background:var(--card);border-radius:14px;padding:9px 2px;text-align:center;color:var(--muted);font-size:11px}.weekday.active{background:var(--accent);color:var(--card);border-color:var(--accent)}
.prayer-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;margin-top:18px}.prayer-chip{border:1px solid var(--line);border-radius:16px;padding:10px 4px;text-align:center;background:var(--card);color:var(--ink);font-size:11px;font-weight:800}.prayer-chip small{display:block;color:var(--muted);margin-top:4px;font-size:10px}.prayer-chip.done{background:var(--accent);color:var(--card);border-color:var(--accent)}.prayer-chip.done small{color:currentColor;opacity:.7}
.prayer-row{width:100%;border:1px solid var(--line);background:var(--card);border-radius:20px;padding:17px 18px;display:flex;align-items:center;gap:14px;text-align:left;color:var(--ink)}.dot{width:11px;height:11px;border-radius:50%;background:var(--line)}.prayer-row.done .dot{background:var(--good)}.grow{flex:1}.grow b{display:block;font-size:18px}.grow small{color:var(--muted)}.check{width:38px;height:38px;border-radius:50%;border:2px solid var(--line);display:grid;place-items:center;font-weight:900}.prayer-row.done .check{background:var(--accent);color:var(--card);border-color:var(--accent)}.prayer-row.next{border-color:var(--good);box-shadow:0 0 0 1px var(--good) inset}.statuspill{display:inline-flex;padding:5px 9px;border-radius:999px;background:var(--soft);font-size:10px;font-weight:900;color:var(--muted);margin-top:5px}.prayer-row.next .statuspill{background:var(--good);color:#fff}.prayer-summary{display:flex;align-items:end;justify-content:space-between;gap:16px}.summary-time{font-size:42px;font-weight:900;letter-spacing:-1.5px;line-height:1}
.heatmap{display:grid;grid-template-columns:repeat(15,1fr);gap:5px;margin-top:16px}.heat{aspect-ratio:1;border-radius:5px;background:var(--soft)}.heat.l1{background:color-mix(in srgb,var(--good) 25%,var(--soft))}.heat.l2{background:color-mix(in srgb,var(--good) 45%,var(--soft))}.heat.l3{background:color-mix(in srgb,var(--good) 65%,var(--soft))}.heat.l4{background:color-mix(in srgb,var(--good) 82%,var(--soft))}.heat.l5{background:var(--good)}
.bottom{position:fixed;left:50%;transform:translateX(-50%);bottom:max(14px,env(safe-area-inset-bottom));z-index:30;width:min(94%,590px);display:grid;grid-template-columns:repeat(5,1fr);background:var(--nav);backdrop-filter:blur(18px);border:1px solid var(--line);border-radius:28px;padding:7px;box-shadow:0 16px 40px var(--shadow)}.bottom button{height:52px;border:0;background:transparent;border-radius:21px;color:var(--muted);font-size:11px;font-weight:800;display:grid;place-items:center;gap:2px}.bottom button.active{background:var(--accent);color:var(--card)}.navicon{width:19px;height:19px;display:block}.navicon svg,.iconbtn svg{width:19px;height:19px;display:block}
.field{width:100%;height:58px;border:1px solid var(--line);border-radius:17px;background:var(--card);color:var(--ink);padding:0 16px;outline:none}.field:focus{border-color:var(--good)}
.primary,.secondary,.ghost,.danger-btn{min-height:54px;border-radius:17px;font-weight:900;padding:0 18px}.primary{width:100%;border:0;background:var(--accent);color:var(--card)}.secondary{width:100%;border:1px solid var(--line);background:var(--card);color:var(--ink)}.ghost{border:1px solid var(--line);background:var(--card);color:var(--ink)}.danger-btn{width:100%;border:1px solid color-mix(in srgb,var(--danger) 25%,var(--line));background:var(--card);color:var(--danger)}
.addbox{display:grid;grid-template-columns:1fr auto;gap:8px;margin:12px 0 16px}.addbtn{border:0;background:var(--accent);color:var(--card);border-radius:16px;padding:0 18px;font-weight:900}
.item-row{width:100%;border:1px solid var(--line);background:var(--card);border-radius:18px;padding:15px 16px;display:flex;align-items:center;gap:12px;color:var(--ink);text-align:left}.item-row.done{opacity:.7}.item-row.done .grow b{text-decoration:line-through}.mini-check{width:32px;height:32px;border:2px solid var(--line);border-radius:11px;display:grid;place-items:center;font-weight:900;flex:0 0 auto;background:var(--card);color:var(--ink)}.item-row.done .mini-check{background:var(--accent);color:var(--card);border-color:var(--accent)}.tiny{border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:11px;min-width:34px;height:34px;font-weight:900}.delete{border:0;background:transparent;color:var(--danger);font-size:19px;padding:7px}
.menu{width:100%;border:1px solid var(--line);background:var(--card);border-radius:18px;padding:17px 18px;text-align:left;display:flex;justify-content:space-between;align-items:center;color:var(--ink);font-weight:800}.profile{display:flex;align-items:center;gap:14px}.avatar{width:62px;height:62px;border-radius:20px;background:var(--accent);color:var(--card);display:grid;place-items:center;font-size:24px;font-weight:900}.metricgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.metric{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:18px}.metric strong{display:block;font-size:28px;letter-spacing:-1px;margin-top:6px}
.notice{font-size:12px;line-height:1.5;color:var(--muted);background:var(--soft);padding:12px 14px;border-radius:14px}
.tabs,.seg{display:grid;grid-template-columns:1fr 1fr;gap:8px}.tabs button,.seg button{height:52px;border:1px solid var(--line);background:var(--card);border-radius:17px;font-weight:900;color:var(--ink)}.tabs button.active,.seg button.active{background:var(--accent);color:var(--card);border-color:var(--accent)}
.dhikr-card{background:var(--card);border:1px solid var(--line);border-radius:24px;padding:19px;margin-bottom:12px}.dhikr-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}.dhikr-num{font-size:12px;color:var(--muted);font-weight:800}.arabic{direction:rtl;text-align:right;font-family:"Geeza Pro","Noto Naskh Arabic","Times New Roman",serif;font-size:var(--arabic-size,29px);line-height:1.9;margin:8px 0 14px}.translit,.translation{font-size:14px;line-height:1.6}.translit{font-style:italic;color:var(--muted);margin-bottom:10px}.translation{color:color-mix(in srgb,var(--ink) 72%,var(--muted))}.source{font-size:12px;color:var(--muted);margin-top:12px}.dhikr-actions{display:grid;grid-template-columns:1fr auto;gap:9px;margin-top:16px}.readbtn{height:52px;border:0;background:var(--accent);color:var(--card);border-radius:16px;font-weight:900}.readbtn.done{background:var(--soft);color:var(--muted)}.remaining{min-width:64px;height:52px;border:1px solid var(--line);background:var(--card);border-radius:16px;display:grid;place-items:center;font-weight:900}
.reader{min-height:58vh;display:flex;flex-direction:column}.reader .arabic{font-size:var(--arabic-size,32px);margin:20px 0}.reader-spacer{flex:1}.reader-nav{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;margin-top:18px}
.counter-wrap{text-align:center;padding:28px 0}.count{font-size:88px;font-weight:900;letter-spacing:-4px;margin:20px 0}.tap{width:176px;height:176px;border:0;border-radius:50%;background:var(--accent);color:var(--card);font-size:22px;font-weight:900;box-shadow:0 18px 40px var(--shadow)}
.preset-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.preset{border:1px solid var(--line);background:var(--card);border-radius:18px;padding:14px;text-align:left;color:var(--ink)}.preset.active{border-color:var(--good);box-shadow:0 0 0 1px var(--good) inset}.preset b{display:block}.preset small{color:var(--muted)}
.qibla{display:grid;place-items:center;text-align:center;padding:28px 12px}.compass{width:190px;height:190px;border-radius:50%;border:2px solid var(--line);position:relative;display:grid;place-items:center;margin:18px 0}.compass:before{content:"N";position:absolute;top:9px;font-size:11px;color:var(--muted);font-weight:900}.needle{font-size:78px;transform-origin:50% 55%;transition:transform .15s linear}.badge{display:inline-flex;align-items:center;gap:6px;padding:7px 10px;border-radius:999px;background:var(--soft);font-size:12px;font-weight:800;color:var(--muted)}
.theme-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.theme-card{border:2px solid var(--line);background:var(--card);border-radius:22px;padding:12px;text-align:left;color:var(--ink);position:relative}.theme-card.active{border-color:var(--good)}.theme-preview{height:118px;border-radius:16px;padding:12px;overflow:hidden;margin-bottom:11px;position:relative}.theme-preview:after{content:"";position:absolute;width:86px;height:86px;border-radius:50%;border:1px solid rgba(255,255,255,.16);right:-22px;top:-24px;box-shadow:0 0 0 16px rgba(255,255,255,.035)}.mini-title{width:58%;height:8px;border-radius:99px;background:rgba(255,255,255,.92);margin-bottom:9px}.mini-sub{width:38%;height:5px;border-radius:99px;background:rgba(255,255,255,.46);margin-bottom:25px}.mini-card{height:42px;border-radius:11px;background:rgba(255,255,255,.94)}.theme-name{font-weight:900;display:flex;align-items:center;justify-content:space-between}.theme-desc{font-size:12px;color:var(--muted);margin-top:4px;line-height:1.35}.theme-check{width:23px;height:23px;border-radius:50%;display:grid;place-items:center;background:var(--good);color:#fff;font-size:13px}
.daypick{display:grid;grid-template-columns:repeat(7,1fr);gap:7px}.daypick button{height:38px;border-radius:12px;border:1px solid var(--line);background:var(--card);color:var(--muted);font-size:11px;font-weight:900}.daypick button.active{background:var(--accent);color:var(--card);border-color:var(--accent)}
.settings-grid{display:grid;gap:12px}.setting{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:17px}.setting label{display:block;font-weight:900;margin-bottom:8px}.offset-grid{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:center}.offset-grid button{width:38px;height:38px;border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--ink);font-weight:900}
#toast-root{position:fixed;left:50%;bottom:92px;transform:translateX(-50%);z-index:80;width:min(92%,560px);pointer-events:none}.toast{background:var(--ink);color:var(--card);padding:13px 16px;border-radius:15px;box-shadow:0 14px 35px var(--shadow);font-size:14px;font-weight:800;animation:toastIn .2s ease}@keyframes toastIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.onboard{min-height:100vh;max-width:620px;margin:auto;padding:calc(max(env(safe-area-inset-top),var(--tg-safe-area-inset-top,0px)) + var(--tg-content-safe-area-inset-top,0px) + 42px) 22px 32px;display:flex;flex-direction:column;justify-content:center}.mark{width:88px;height:88px;border-radius:28px;background:var(--accent);color:var(--card);display:grid;place-items:center;font-size:42px;margin:0 auto 26px}.onboard h1{text-align:center;font-size:38px}.onboard p{text-align:center;color:var(--muted);line-height:1.55;margin-bottom:28px}.location-status{font-size:12px;color:var(--muted);text-align:center;margin:10px 0 18px}
@media(max-width:390px){.nexttime{font-size:42px}.prayer-chip{padding:9px 2px;font-size:10px}.bottom button{font-size:10px}.count{font-size:78px}.theme-grid{grid-template-columns:1fr}.heatmap{gap:4px}}

/* Motion polish v0.9 */
:root{--ease-out:cubic-bezier(.22,1,.36,1);--ease-soft:cubic-bezier(.2,.8,.2,1);--motion-fast:160ms;--motion:280ms;--motion-slow:460ms}
html{scroll-behavior:smooth}
body,.top,.bottom,.card,.menu,.item-row,.prayer-row,.quick button,.theme-card,.preset,.field,.secondary,.primary,.ghost,.danger-btn,.tabs button,.seg button,.iconbtn,.tiny,.mini-check,.readbtn,.remaining,.weekday,.prayer-chip{
  transition:background-color var(--motion) var(--ease-soft),color var(--motion) var(--ease-soft),border-color var(--motion) var(--ease-soft),box-shadow var(--motion) var(--ease-soft),transform var(--motion-fast) var(--ease-out),opacity var(--motion) var(--ease-soft)
}
button:active:not(:disabled){transform:scale(.975)}
.tap{transition:transform 120ms var(--ease-out),box-shadow var(--motion) var(--ease-soft),background-color var(--motion) var(--ease-soft)}
.tap:active{transform:scale(.945)}
.quick button:active,.menu:active,.item-row:active,.prayer-row:active,.theme-card:active,.preset:active{transform:scale(.988)}
.bottom button{transition:background-color 240ms var(--ease-out),color 240ms var(--ease-out),transform 160ms var(--ease-out)}
.bottom button.active{transform:translateY(-1px)}
.bottom .navicon{transition:transform 260ms var(--ease-out)}
.bottom button.active .navicon{transform:translateY(-1px) scale(1.06)}
.progress span{transform-origin:left center;animation:barReveal 460ms var(--ease-out) both}
@keyframes barReveal{from{transform:scaleX(.04);opacity:.45}to{transform:scaleX(1);opacity:1}}
.progress-ring{animation:ringPop 480ms var(--ease-out) both}
@keyframes ringPop{from{transform:scale(.92);opacity:.45}to{transform:scale(1);opacity:1}}
.check,.mini-check,.theme-check{transition:transform 220ms var(--ease-out),background-color var(--motion) var(--ease-soft),border-color var(--motion) var(--ease-soft),color var(--motion) var(--ease-soft)}
.done .check,.done .mini-check,.theme-check{animation:checkPop 300ms var(--ease-out)}
@keyframes checkPop{0%{transform:scale(.7)}65%{transform:scale(1.12)}100%{transform:scale(1)}}
.hero:after{animation:none}
@keyframes heroFloat{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-10px,10px,0) scale(1.035)}}
.page.page-enter main>*{animation:itemEnter 380ms var(--ease-out) both}
.page.page-enter main>*:nth-child(2){animation-delay:35ms}.page.page-enter main>*:nth-child(3){animation-delay:70ms}.page.page-enter main>*:nth-child(4){animation-delay:105ms}.page.page-enter main>*:nth-child(5){animation-delay:140ms}.page.page-enter main>*:nth-child(n+6){animation-delay:165ms}
@keyframes itemEnter{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.dhikr-card,.reader,.card{will-change:auto}
.toast{animation:toastIn 260ms var(--ease-out),toastOut 220ms var(--ease-soft) 2.22s forwards}
@keyframes toastOut{to{opacity:0;transform:translateY(8px) scale(.98)}}
.needle{transition:transform 220ms cubic-bezier(.2,.75,.25,1)}
@supports (view-transition-name: root){
  .page{animation:none}
  ::view-transition-old(root),::view-transition-new(root){animation-duration:300ms;animation-timing-function:var(--ease-out)}
  html[data-nav="forward"]::view-transition-old(root){animation-name:vtOldForward}
  html[data-nav="forward"]::view-transition-new(root){animation-name:vtNewForward}
  html[data-nav="back"]::view-transition-old(root){animation-name:vtOldBack}
  html[data-nav="back"]::view-transition-new(root){animation-name:vtNewBack}
  html[data-nav="fade"]::view-transition-old(root){animation-name:vtOldFade}
  html[data-nav="fade"]::view-transition-new(root){animation-name:vtNewFade}
}
@keyframes vtOldForward{to{opacity:0;transform:translateX(-10px)}}
@keyframes vtNewForward{from{opacity:0;transform:translateX(12px)}}
@keyframes vtOldBack{to{opacity:0;transform:translateX(10px)}}
@keyframes vtNewBack{from{opacity:0;transform:translateX(-12px)}}
@keyframes vtOldFade{to{opacity:.2;transform:scale(.995)}}
@keyframes vtNewFade{from{opacity:.2;transform:scale(1.005)}}
@media (hover:hover){
  .quick button:hover,.menu:hover,.prayer-row:hover,.item-row:hover,.theme-card:hover,.preset:hover{transform:translateY(-1px);box-shadow:0 10px 26px var(--shadow)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .hero:after{animation:none!important}
}

/* Cross-browser page transition fallback */
.page{animation:pageSmoothIn 320ms var(--ease-out) both}
@keyframes pageSmoothIn{from{opacity:.72;transform:translateY(7px) scale(.997)}to{opacity:1;transform:none}}
main>.card,main>.quick,main>.stack,main>.metricgrid,main>.theme-grid,main>.preset-grid,main>.tabs,main>.notice,main>.secondary,main>.primary{
  animation:sectionSmoothIn 360ms var(--ease-out) both
}
@keyframes sectionSmoothIn{from{opacity:.72;transform:translateY(7px)}to{opacity:1;transform:none}}

/* v0.10: Quran tracker, home layout, data tools */
.hijri{display:inline-flex;margin-top:8px;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.11);font-size:12px;font-weight:800;color:rgba(255,255,255,.82)}
.quran-card{position:relative;overflow:hidden}.quran-card:after{content:"";position:absolute;width:120px;height:120px;border-radius:50%;border:1px solid var(--line);right:-44px;bottom:-50px;box-shadow:0 0 0 18px color-mix(in srgb,var(--soft) 60%,transparent)}
.quran-num{font-size:42px;font-weight:900;letter-spacing:-1.5px;line-height:1}.quran-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:16px}.quran-actions button{height:48px;border:1px solid var(--line);border-radius:15px;background:var(--card);color:var(--ink);font-weight:900}
.block-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;gap:14px;border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:18px;padding:16px 17px;text-align:left}
.switch{width:48px;height:28px;border-radius:99px;background:var(--soft);padding:3px;transition:background-color .25s var(--ease-out)}.switch:after{content:"";display:block;width:22px;height:22px;border-radius:50%;background:var(--card);box-shadow:0 2px 7px var(--shadow);transition:transform .25s var(--ease-out)}.switch.on{background:var(--good)}.switch.on:after{transform:translateX(20px)}
.data-box{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:18px}.data-box+.data-box{margin-top:12px}
.file-label{display:flex;align-items:center;justify-content:center;width:100%;min-height:54px;border:1px solid var(--line);border-radius:17px;background:var(--card);font-weight:900;cursor:pointer}.file-label input{display:none}
.offline-badge{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:900;padding:5px 9px;border-radius:999px;background:var(--soft);color:var(--muted)}.offline-badge.ok{background:color-mix(in srgb,var(--good) 16%,var(--soft));color:var(--good)}

/* Daily reminders */
.reminder-card{position:relative;overflow:hidden}
.reminder-card:after{content:"";position:absolute;width:150px;height:150px;border-radius:50%;border:1px solid var(--line);right:-72px;top:-82px;box-shadow:0 0 0 22px color-mix(in srgb,var(--soft) 55%,transparent);pointer-events:none}
.reminder-top{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;position:relative;z-index:1}
.reminder-top h2{margin:5px 0 0}.reminder-kicker{font-size:11px;text-transform:uppercase;letter-spacing:.12em;font-weight:900;color:var(--good)}
.reminder-arabic{direction:rtl;text-align:center;font-family:"Geeza Pro","Noto Naskh Arabic","Times New Roman",serif;font-size:30px;line-height:1.9;margin:22px 0 14px;position:relative;z-index:1}
.reminder-text{text-align:center;font-family:Georgia,"Times New Roman",serif;font-size:18px;line-height:1.55;color:color-mix(in srgb,var(--ink) 88%,var(--muted));position:relative;z-index:1}
.reminder-card .source{text-align:center;margin-top:14px;position:relative;z-index:1}
.reminder-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:18px;position:relative;z-index:1}.reminder-actions.two{grid-template-columns:1fr 1fr}
.reminder-actions .ghost{min-height:46px;padding:0 10px;font-size:12px}
.reminder-intro{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}.reminder-list{display:grid;gap:12px}.reminder-list .card{margin-bottom:0}
.reminder-star{font-size:18px}
@media(max-width:390px){.reminder-arabic{font-size:27px}.reminder-text{font-size:17px}.reminder-actions{gap:6px}.reminder-actions .ghost{font-size:11px}}

/* v0.11 — Apple-inspired visual system */
:root{
  --glass:rgba(255,255,255,.72);
  --glass-strong:rgba(255,255,255,.88);
  --hairline:rgba(32,56,86,.10);
  --ambient:rgba(56,114,187,.16);
  --spring:cubic-bezier(.16,1,.3,1);
}

html,body{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Helvetica Neue",Arial,"Segoe UI",sans-serif;
  font-feature-settings:"kern" 1;
}
body{
  background:
    radial-gradient(420px 320px at 8% 2%,var(--ambient),transparent 70%),
    radial-gradient(360px 280px at 96% 22%,color-mix(in srgb,var(--ambient) 64%,transparent),transparent 72%),
    var(--bg);
  background-attachment:fixed;
}
#app{padding-bottom:126px}
.top{
  padding:calc(max(env(safe-area-inset-top),var(--tg-safe-area-inset-top,0px)) + var(--tg-content-safe-area-inset-top,0px) + 10px) 17px 8px;
  background:color-mix(in srgb,var(--top) 80%,transparent);
  backdrop-filter:blur(24px) saturate(1.4);
  -webkit-backdrop-filter:blur(24px) saturate(1.4);
  border-bottom:1px solid color-mix(in srgb,var(--line) 54%,transparent);
}
.brand{font-size:19px;font-weight:800;letter-spacing:-.55px}
.iconbtn{
  width:40px;height:40px;border-radius:50%;
  border:1px solid var(--hairline);
  background:var(--glass-strong);
  box-shadow:0 4px 16px color-mix(in srgb,var(--shadow) 65%,transparent);
}
main{padding:8px 14px 26px}
.card{
  border-color:var(--hairline);
  border-radius:28px;
  padding:20px;
  box-shadow:0 10px 28px color-mix(in srgb,var(--shadow) 62%,transparent),inset 0 1px 0 rgba(255,255,255,.34);
}
.home-main>.card,.home-main>.widget-section{margin-bottom:14px}
.home-main{padding-top:4px}

.apple-hero{
  min-height:292px;
  border-radius:31px;
  padding:20px;
  background:
    radial-gradient(190px 180px at 91% 4%,rgba(255,255,255,.18),transparent 68%),
    radial-gradient(160px 150px at 8% 102%,rgba(255,255,255,.10),transparent 68%),
    linear-gradient(145deg,var(--hero1),var(--hero2));
  box-shadow:0 18px 40px color-mix(in srgb,var(--shadow) 140%,transparent);
}
.apple-hero:before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.12),transparent 26%);
  mix-blend-mode:screen;opacity:.55;
}
.apple-hero:after{
  width:210px;height:210px;right:-82px;top:-74px;
  border-color:rgba(255,255,255,.12);
  box-shadow:0 0 0 30px rgba(255,255,255,.025),0 0 0 62px rgba(255,255,255,.016);
}
.hero-topline{display:flex;align-items:center;justify-content:space-between;gap:8px;position:relative;z-index:1}
.hero-location,.hero-hijri{
  display:inline-flex;align-items:center;min-height:28px;padding:0 10px;border-radius:999px;
  background:rgba(255,255,255,.11);border:1px solid rgba(255,255,255,.09);
  font-size:11px;font-weight:750;color:rgba(255,255,255,.84);backdrop-filter:blur(12px)
}
.hero-hijri{max-width:54%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.hero-greeting{position:relative;z-index:1;margin-top:20px;font-size:13px;font-weight:700;color:rgba(255,255,255,.66)}
.hero-next-label{position:relative;z-index:1;margin-top:18px;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.58)}
.hero-prayer-name{position:relative;z-index:1;font-size:24px;font-weight:800;letter-spacing:-.65px;margin-top:3px}
.hero-time-line{position:relative;z-index:1;display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:2px 0 18px}
.apple-hero .nexttime{font-size:58px;line-height:.98;margin:7px 0 0;letter-spacing:-3.5px;font-weight:850}
.hero-countdown{
  margin-bottom:6px;display:inline-flex;min-height:31px;align-items:center;padding:0 11px;border-radius:999px;
  background:rgba(255,255,255,.12);color:rgba(255,255,255,.88);font-size:12px;font-weight:760;
  border:1px solid rgba(255,255,255,.08)
}
.home-prayer-strip{position:relative;z-index:1;display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.home-prayer{
  min-width:0;border:1px solid rgba(255,255,255,.11);background:rgba(255,255,255,.08);color:#fff;
  border-radius:16px;padding:9px 3px 8px;text-align:center;backdrop-filter:blur(10px)
}
.home-prayer span{display:block;font-size:9px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:rgba(255,255,255,.64)}
.home-prayer b{display:block;font-size:11px;margin-top:4px}
.home-prayer.done{background:rgba(255,255,255,.92);color:var(--hero1);border-color:transparent}
.home-prayer.done span{color:color-mix(in srgb,var(--hero1) 72%,transparent)}
.home-prayer.next{box-shadow:0 0 0 1px rgba(255,255,255,.62) inset;background:rgba(255,255,255,.15)}

.section-kicker{font-size:10px;line-height:1.2;text-transform:uppercase;letter-spacing:.11em;font-weight:850;color:var(--good)}
.section-heading{display:flex;align-items:flex-end;justify-content:space-between;padding:2px 3px 10px}
.section-heading h2,.activity-card h2,.prayer-overview h2,.daily-glance h2{margin:4px 0 0;font-size:21px;letter-spacing:-.65px}
.activity-card{
  background:linear-gradient(155deg,color-mix(in srgb,var(--card) 94%,var(--soft)),var(--card));
  overflow:hidden;position:relative
}
.activity-card:after{
  content:"";position:absolute;width:180px;height:180px;border-radius:50%;right:-110px;bottom:-120px;
  background:var(--ambient);filter:blur(4px);pointer-events:none
}
.activity-head{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:16px}
.activity-ring{width:96px;height:96px;flex:0 0 auto;box-shadow:0 0 0 1px var(--hairline)}
.activity-ring:after{width:72px;height:72px}
.activity-ring b{font-size:17px;font-variant-numeric:tabular-nums}
.activity-stats{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:18px}
.activity-stats>div{padding:12px 10px;border-radius:18px;background:var(--soft);border:1px solid color-mix(in srgb,var(--line) 58%,transparent)}
.activity-stats strong{display:block;font-size:18px;letter-spacing:-.5px}
.activity-stats span{display:block;margin-top:3px;font-size:10px;color:var(--muted);font-weight:700}

.widget-section{padding-top:1px}
.apple-widgets{gap:10px}
.apple-widgets button{
  min-height:150px;padding:16px;border-radius:26px;position:relative;overflow:hidden;
  background:linear-gradient(155deg,var(--card),color-mix(in srgb,var(--soft) 44%,var(--card)));
  border-color:var(--hairline);box-shadow:0 9px 24px color-mix(in srgb,var(--shadow) 52%,transparent)
}
.apple-widgets button:before{
  content:"";position:absolute;width:90px;height:90px;border-radius:50%;right:-40px;top:-40px;background:var(--ambient);filter:blur(1px)
}
.widget-icon{
  width:38px;height:38px;border-radius:13px;display:grid;place-items:center;position:relative;z-index:1;
  background:color-mix(in srgb,var(--accent) 10%,var(--soft));color:var(--accent);border:1px solid var(--hairline)
}
.widget-icon svg{width:19px;height:19px}
.apple-widgets small{display:block;position:relative;z-index:1;margin-top:17px;color:var(--muted);font-size:11px;font-weight:750}
.apple-widgets b{position:relative;z-index:1;margin-top:2px;font-size:25px;letter-spacing:-1px}
.apple-widgets em{display:block;position:relative;z-index:1;margin-top:2px;font-size:10px;font-style:normal;color:var(--muted);font-weight:650}

.prayer-overview{padding-bottom:18px}
.status-orb{
  display:inline-flex;align-items:center;min-height:27px;padding:0 10px;border-radius:999px;
  background:color-mix(in srgb,var(--good) 11%,var(--soft));color:var(--good);font-size:10px;font-weight:850
}
.status-orb:before{content:"";width:6px;height:6px;border-radius:50%;margin-right:6px;background:currentColor;box-shadow:0 0 0 4px color-mix(in srgb,currentColor 11%,transparent)}
.status-orb.offline{color:var(--muted);background:var(--soft)}
.home-week{margin-top:16px;gap:6px}
.home-week .weekday{padding:9px 1px 8px;border-radius:13px;border-color:transparent;background:var(--soft)}
.home-week .weekday b{display:block;font-size:13px;color:var(--ink)}
.home-week .weekday span{display:block;margin-top:3px;font-size:9px}
.home-week .weekday.active{background:color-mix(in srgb,var(--accent) 12%,var(--soft));color:var(--accent)}
.home-week .weekday.active b{color:var(--accent)}

.apple-quran{background:linear-gradient(145deg,var(--card),color-mix(in srgb,var(--soft) 44%,var(--card)))}
.compact-cta{margin-top:14px;min-height:48px;border-radius:15px}

.daily-glance{display:flex;align-items:center;justify-content:space-between;gap:16px}
.daily-chips{display:flex;gap:7px;flex-wrap:wrap;margin-top:13px}
.daily-chips span{display:inline-flex;gap:5px;align-items:center;padding:7px 9px;border-radius:999px;background:var(--soft);font-size:10px;color:var(--muted);font-weight:700}
.daily-chips b{color:var(--ink)}
.round-arrow{
  width:48px;height:48px;flex:0 0 auto;border-radius:50%;border:0;background:var(--accent);color:var(--card);
  font-size:22px;display:grid;place-items:center;box-shadow:0 10px 24px color-mix(in srgb,var(--shadow) 95%,transparent)
}
.home-customize{margin-top:2px;background:color-mix(in srgb,var(--card) 82%,transparent);backdrop-filter:blur(16px)}

.bottom{
  bottom:max(12px,env(safe-area-inset-bottom));width:min(94%,570px);
  border-radius:30px;padding:6px;background:var(--glass);
  backdrop-filter:blur(26px) saturate(1.5);-webkit-backdrop-filter:blur(26px) saturate(1.5);
  border:1px solid var(--hairline);
  box-shadow:0 18px 48px color-mix(in srgb,var(--shadow) 118%,transparent),inset 0 1px 0 rgba(255,255,255,.28)
}
.bottom button{height:56px;border-radius:22px;font-weight:720;gap:3px}
.bottom button.active{background:color-mix(in srgb,var(--accent) 11%,transparent);color:var(--accent);transform:none}
.bottom button.active .navicon{transform:translateY(-1px) scale(1.12)}
.bottom .navicon{width:20px;height:20px}
.bottom .navicon svg{width:20px;height:20px}

.progress{height:7px;background:color-mix(in srgb,var(--soft) 82%,transparent)}
.progress span{background:linear-gradient(90deg,var(--accent),var(--good))}
.progress-ring{background:conic-gradient(var(--accent) var(--ring),var(--soft) 0)}

#toast-root{
  top:calc(max(env(safe-area-inset-top),var(--tg-safe-area-inset-top,0px)) + var(--tg-content-safe-area-inset-top,0px) + 10px);bottom:auto;width:min(88%,410px)
}
.toast{
  padding:11px 16px;border-radius:999px;text-align:center;
  background:color-mix(in srgb,var(--ink) 90%,transparent);color:var(--card);
  border:1px solid color-mix(in srgb,var(--card) 12%,transparent);
  backdrop-filter:blur(24px) saturate(1.35);-webkit-backdrop-filter:blur(24px) saturate(1.35);
  box-shadow:0 16px 38px rgba(0,0,0,.18);font-size:13px;font-weight:760
}

.page{animation:applePageIn 360ms var(--spring) both}
@keyframes applePageIn{from{opacity:.45;transform:translateY(10px) scale(.992)}to{opacity:1;transform:none}}
.home-main>*{animation:appleSectionIn 430ms var(--spring) both}
.home-main>*:nth-child(2){animation-delay:35ms}.home-main>*:nth-child(3){animation-delay:65ms}.home-main>*:nth-child(4){animation-delay:90ms}.home-main>*:nth-child(5){animation-delay:115ms}.home-main>*:nth-child(n+6){animation-delay:135ms}
@keyframes appleSectionIn{from{opacity:.2;transform:translateY(12px) scale(.99)}to{opacity:1;transform:none}}
.apple-widgets button,.home-prayer,.round-arrow,.bottom button,.iconbtn{transition:transform 180ms var(--spring),background-color 260ms var(--spring),box-shadow 260ms var(--spring),color 260ms var(--spring)}
.apple-widgets button:active,.home-prayer:active{transform:scale(.965)}
.round-arrow:active,.iconbtn:active{transform:scale(.91)}

@media(max-width:390px){
  .apple-hero{min-height:282px;padding:18px}
  .apple-hero .nexttime{font-size:52px}
  .hero-hijri{display:none}
  .home-prayer span{font-size:8px}
  .home-prayer b{font-size:10px}
  .activity-stats>div{padding:11px 7px}
  .activity-stats strong{font-size:16px}
  .apple-widgets button{min-height:138px}
}
@media(prefers-reduced-motion:reduce){
  .home-main>*,.page{animation:none!important}
}

/* v0.11 — core screens */
.screen-heading{padding:7px 3px 11px;margin-top:1px}
.screen-heading h2{font-size:27px;margin:3px 0 0;letter-spacing:-1px}
.screen-secondary{margin-top:14px}
.apple-notice{border:1px solid var(--hairline);background:color-mix(in srgb,var(--soft) 72%,transparent);border-radius:18px}

/* Prayer */
.prayer-hero-card{
  position:relative;overflow:hidden;padding:22px;
  background:
    radial-gradient(180px 150px at 104% -8%,var(--ambient),transparent 72%),
    linear-gradient(155deg,var(--card),color-mix(in srgb,var(--soft) 35%,var(--card)))
}
.prayer-hero-top{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}
.prayer-hero-top h1{font-size:31px;margin:5px 0 5px;letter-spacing:-1.1px}
.prayer-clock{font-size:42px;line-height:1;font-weight:850;letter-spacing:-2.5px;font-variant-numeric:tabular-nums}
.prayer-completion{display:flex;align-items:center;justify-content:space-between;margin-top:23px}
.prayer-completion strong{display:block;font-size:29px;letter-spacing:-1.2px}
.prayer-completion span{display:block;color:var(--muted);font-size:11px;font-weight:700;margin-top:3px}
.prayer-ring{width:72px;height:72px}.prayer-ring:after{width:54px;height:54px}.prayer-ring b{font-size:13px}
.prayer-list{gap:9px}
.prayer-row{
  min-height:76px;border-radius:24px;padding:13px 15px;background:color-mix(in srgb,var(--card) 96%,transparent);
  border-color:var(--hairline);box-shadow:0 6px 19px color-mix(in srgb,var(--shadow) 38%,transparent)
}
.prayer-row.next{border-color:color-mix(in srgb,var(--accent) 45%,var(--line));box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 20%,transparent) inset,0 8px 22px var(--shadow)}
.prayer-row.done{background:color-mix(in srgb,var(--good) 7%,var(--card));opacity:1}
.prayer-symbol{
  width:39px;height:39px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;
  background:var(--soft);color:var(--muted);font-size:15px;font-weight:900;border:1px solid var(--hairline)
}
.prayer-row.done .prayer-symbol{background:var(--accent);color:var(--card);border-color:transparent}
.prayer-row.next .prayer-symbol{background:color-mix(in srgb,var(--accent) 12%,var(--soft));color:var(--accent)}
.prayer-row .grow b{font-size:17px;letter-spacing:-.35px}.prayer-row .grow small{display:block;margin-top:3px;font-size:11px}
.prayer-row-time{font-size:21px;font-weight:800;letter-spacing:-.8px;font-variant-numeric:tabular-nums}
.timeline-card{margin-top:14px}
.timeline-card h2{margin:4px 0 0;font-size:20px}
.round-arrow.small{width:40px;height:40px;font-size:18px}
.timeline-card .heatmap{margin-top:20px;gap:6px}.timeline-card .heat{border-radius:6px}

/* Segmented controls */
.apple-segment{
  padding:4px;background:color-mix(in srgb,var(--soft) 82%,transparent);border-radius:17px;gap:3px;
  border:1px solid color-mix(in srgb,var(--line) 58%,transparent)
}
.apple-segment button{height:43px;border:0;border-radius:13px;background:transparent;font-size:13px;font-weight:760;color:var(--muted)}
.apple-segment button.active{
  background:var(--card);color:var(--ink);border:0;
  box-shadow:0 2px 9px color-mix(in srgb,var(--shadow) 70%,transparent),inset 0 0 0 1px var(--hairline)
}

/* Adhkar */
.adhkar-progress-card{position:relative;overflow:hidden;padding:22px}
.adhkar-progress-card h1{font-size:38px;letter-spacing:-1.8px;margin:6px 0 4px}.adhkar-progress-card h1 span{font-size:18px;color:var(--muted);font-weight:650;letter-spacing:-.4px}
.adhkar-ring{position:absolute;right:20px;top:20px;width:86px;height:86px}.adhkar-ring:after{width:64px;height:64px}
.reader-cta{margin-top:18px;min-height:50px}
.dhikr-card{
  border-color:var(--hairline);border-radius:27px;padding:20px;
  box-shadow:0 8px 24px color-mix(in srgb,var(--shadow) 48%,transparent);
  background:linear-gradient(160deg,var(--card),color-mix(in srgb,var(--soft) 20%,var(--card)))
}
.dhikr-head b{font-size:17px;letter-spacing:-.35px}
.dhikr-num{font-size:10px;text-transform:uppercase;letter-spacing:.08em}
.dhikr-card .arabic{padding:13px 4px 7px;line-height:2.05}
.dhikr-card .translation{padding-top:10px;border-top:1px solid var(--hairline)}
.dhikr-card .readbtn{border-radius:15px}
.apple-reader{min-height:calc(100vh - 215px);padding:20px 20px 18px;border-radius:30px}
.reader-progress-head{display:flex;justify-content:space-between;color:var(--muted);font-size:11px;font-weight:800;margin-bottom:-5px}
.reader-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-top:22px}
.reader-title-row h2{font-size:18px;margin:4px 0 0}
.favorite-round{width:42px;height:42px;border-radius:50%;border:1px solid var(--hairline);background:var(--soft);color:var(--ink);font-size:19px}
.reader-arabic{text-align:center!important;padding:22px 3px 16px;line-height:2.2!important}
.reader-translit{font-size:13px;line-height:1.65;text-align:center;padding:0 5px}
.reader-translation{font-size:15px;line-height:1.72;text-align:center;padding:15px 3px}
.reader-source{text-align:center;padding-top:10px;border-top:1px solid var(--hairline)}
.reader-action-row{display:grid;grid-template-columns:1fr 62px;gap:9px}
.apple-reader-nav{grid-template-columns:52px 1fr 52px}
.apple-reader-nav .ghost,.apple-reader-nav .secondary{min-height:48px}

/* Zikr */
.apple-presets{display:flex;overflow-x:auto;scroll-snap-type:x proximity;gap:7px;padding:1px 1px 9px;scrollbar-width:none}
.apple-presets::-webkit-scrollbar{display:none}
.apple-presets .preset{
  flex:0 0 auto;min-width:116px;border-radius:999px;padding:9px 12px;display:flex;align-items:center;justify-content:space-between;gap:9px;
  border-color:var(--hairline);background:var(--card)
}
.apple-presets .preset span{font-size:12px;font-weight:760}.apple-presets .preset small{font-size:10px;margin:0}
.apple-presets .preset.active{background:var(--accent);color:var(--card);border-color:var(--accent);box-shadow:none}
.apple-presets .preset.active small{color:currentColor;opacity:.72}
.custom-zikr-card{display:grid;gap:8px;padding:14px}.custom-zikr-card .field{margin:0!important}
.apple-counter{text-align:center;padding:24px 20px 20px;overflow:hidden;position:relative}
.apple-counter h2{font-size:24px;margin:5px 0 0;letter-spacing:-.7px}
.zikr-arabic{text-align:center!important;margin:15px 0 0!important}
.counter-orbit{
  width:232px;height:232px;border-radius:50%;margin:26px auto 24px;padding:12px;
  background:conic-gradient(var(--accent) var(--ring),color-mix(in srgb,var(--soft) 85%,transparent) 0);
  box-shadow:0 20px 45px color-mix(in srgb,var(--shadow) 80%,transparent)
}
.counter-orbit:before{content:"";position:absolute}
.apple-counter .tap{
  width:100%;height:100%;border-radius:50%;background:var(--card);color:var(--ink);
  border:1px solid var(--hairline);box-shadow:inset 0 1px 0 rgba(255,255,255,.4)
}
.apple-counter .tap .count{display:block;margin:0;font-size:67px;line-height:.92;letter-spacing:-4px;font-weight:850}
.apple-counter .tap small{display:block;margin-top:9px;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.09em}
.apple-counter .tap:active{transform:scale(.955)}
.counter-goal{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--muted);font-weight:720}
.counter-goal b{color:var(--ink)}
.reset-zikr{margin-top:17px;min-height:47px}

/* Statistics */
.stats-segment{margin-bottom:12px}
.stats-hero{padding:22px;position:relative;overflow:hidden}
.stats-hero-copy h1{font-size:50px;margin:5px 0 0;letter-spacing:-3px}
.stats-hero-copy p{margin:2px 0;color:var(--muted);font-size:12px}
.stats-ring{position:absolute;right:20px;top:19px;width:88px;height:88px}.stats-ring:after{width:66px;height:66px}
.stat-bars{height:160px;display:grid;grid-template-columns:repeat(7,1fr);gap:8px;align-items:end;margin-top:25px}
.stat-day{text-align:center;display:grid;grid-template-rows:110px auto auto;gap:4px}
.stat-track{height:110px;border-radius:999px;background:var(--soft);padding:3px;display:flex;align-items:flex-end}
.stat-track i{display:block;width:100%;height:var(--h);min-height:4px;border-radius:999px;background:linear-gradient(180deg,var(--accent),var(--good));animation:statGrow 600ms var(--spring) both}
@keyframes statGrow{from{height:4px}}
.stat-day b{font-size:11px}.stat-day span{font-size:9px;color:var(--muted);font-weight:700}
.apple-metrics{gap:9px}
.apple-metrics .metric{
  border-radius:23px;padding:17px;border-color:var(--hairline);background:linear-gradient(155deg,var(--card),color-mix(in srgb,var(--soft) 24%,var(--card)));
  box-shadow:0 7px 20px color-mix(in srgb,var(--shadow) 38%,transparent)
}
.apple-metrics .metric span{font-size:10px;color:var(--muted);font-weight:800;text-transform:uppercase;letter-spacing:.07em}
.apple-metrics .metric strong{font-size:30px;letter-spacing:-1.5px;margin-top:8px}.apple-metrics .metric small{color:var(--muted);font-size:10px}

/* Habits / tasks */
.habit-summary,.plans-summary{position:relative;padding:21px}
.habit-summary h1,.plans-summary h1{font-size:39px;margin:5px 0 4px;letter-spacing:-2px}
.habit-summary h1 span,.plans-summary h1 span{font-size:17px;color:var(--muted);font-weight:650;letter-spacing:-.4px}
.small-ring{width:74px;height:74px}.small-ring:after{width:56px;height:56px}.small-ring b{font-size:13px}
.habit-summary .small-ring{position:absolute;right:20px;top:19px}
.add-habit-cta{margin-top:18px;min-height:49px}
.habit-list,.task-list{gap:8px}
.habit-row,.task-row{border-radius:23px;min-height:70px;padding:12px 12px 12px 14px;border-color:var(--hairline)}
.habit-row.inactive{opacity:.48}
.habit-row .grow b,.task-row .grow b{font-size:15px}.habit-row .grow small,.task-row .grow small{display:block;margin-top:3px;font-size:10px}
.row-actions{display:flex;gap:4px}
.row-actions .tiny{width:31px;min-width:31px;height:31px;border-radius:10px;font-size:12px;background:var(--soft);border-color:transparent}
.apple-addbox{
  grid-template-columns:1fr 50px;padding:5px;background:var(--card);border:1px solid var(--hairline);border-radius:21px;
  box-shadow:0 7px 22px color-mix(in srgb,var(--shadow) 40%,transparent)
}
.apple-addbox .field{border:0;background:transparent;height:48px}.apple-addbox .addbtn{width:48px;padding:0;border-radius:16px}
.empty-state{text-align:center;padding:28px 20px}.empty-state b{font-size:18px}.empty-state .muted{margin-top:5px;font-size:12px}

/* Qibla */
.apple-qibla{padding:24px 20px 21px}
.compass-badge{margin-bottom:2px}
.apple-compass{
  width:235px;height:235px;margin:26px 0 23px;border:1px solid var(--hairline);
  background:radial-gradient(circle at center,color-mix(in srgb,var(--soft) 68%,transparent),transparent 64%);
  box-shadow:inset 0 0 0 8px color-mix(in srgb,var(--soft) 40%,transparent),0 18px 45px color-mix(in srgb,var(--shadow) 55%,transparent)
}
.apple-compass:before{display:none}.apple-compass .north{position:absolute;top:12px;font-size:10px;font-weight:900;color:var(--muted);z-index:3}
.compass-ring{position:absolute;border-radius:50%;border:1px solid color-mix(in srgb,var(--line) 72%,transparent)}
.ring-one{inset:25px}.ring-two{inset:52px}
.apple-compass .needle{font-size:77px;color:var(--accent);z-index:4;filter:drop-shadow(0 7px 12px var(--shadow))}
.kaaba-dot{position:absolute;bottom:39px;width:27px;height:27px;border-radius:8px;background:var(--ink);color:var(--card);display:grid;place-items:center;font-size:10px;transform:rotate(45deg)}
.kaaba-dot::first-letter{transform:rotate(-45deg)}
.apple-qibla h1{font-size:46px;letter-spacing:-2.5px;margin:5px 0 7px}
.apple-qibla p{max-width:340px;font-size:13px;line-height:1.55;margin-bottom:20px}
.apple-qibla .secondary{margin-top:9px}

/* Quran */
.quran-focus{padding:22px}
.quran-focus-row{display:flex;align-items:center;justify-content:space-between;margin-top:10px}
.quran-focus .quran-num{font-size:62px;letter-spacing:-3.5px}
.quran-ring{width:94px;height:94px}.quran-ring:after{width:70px;height:70px}
.apple-quran-actions{gap:7px;margin-top:17px}
.apple-quran-actions button{height:50px;border-radius:16px;background:var(--soft);border-color:transparent}
.apple-setting{border-color:var(--hairline);border-radius:24px;background:var(--card)}
.setting-note{font-size:11px;color:var(--muted);margin:-3px 0 11px}

/* Profile + settings */
.apple-profile{padding:20px;min-height:112px}
.apple-profile .avatar{
  width:70px;height:70px;border-radius:23px;font-size:24px;
  background:linear-gradient(145deg,var(--hero1),var(--hero2));box-shadow:0 12px 25px color-mix(in srgb,var(--shadow) 100%,transparent)
}
.profile-copy h1{font-size:25px;margin:4px 0 4px;letter-spacing:-.8px}
.profile-metrics{margin-bottom:20px}
.profile-metrics .metric{padding:15px}.profile-metrics .metric strong{font-size:25px}
.settings-section{margin-top:18px}
.settings-label{padding:0 5px 7px;color:var(--muted);font-size:11px;font-weight:760;text-transform:uppercase;letter-spacing:.08em}
.settings-group{
  overflow:hidden;border:1px solid var(--hairline);border-radius:24px;background:var(--card);
  box-shadow:0 7px 22px color-mix(in srgb,var(--shadow) 36%,transparent)
}
.settings-group .settings-row{
  border:0;border-radius:0;min-height:61px;padding:11px 15px;background:transparent;position:relative
}
.settings-group .settings-row:not(:last-child):after{
  content:"";position:absolute;left:15px;right:0;bottom:0;height:1px;background:var(--hairline)
}
.settings-row>span:first-child{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.settings-row b{font-size:14px;font-weight:720}.settings-row small{font-size:10px;color:var(--muted)}
.chevron{font-size:24px;font-weight:400;color:var(--muted);line-height:1}
.settings-group .settings-row:active{background:var(--soft)}

/* Generic settings polish */
.setting,.data-box{
  border-color:var(--hairline);border-radius:24px;background:var(--card);
  box-shadow:0 7px 22px color-mix(in srgb,var(--shadow) 34%,transparent)
}
.field{border-radius:16px;border-color:var(--hairline);background:color-mix(in srgb,var(--soft) 52%,var(--card))}
.menu{border-color:var(--hairline);border-radius:20px}
.theme-card{border-width:1px;border-color:var(--hairline);border-radius:25px;box-shadow:0 7px 20px color-mix(in srgb,var(--shadow) 32%,transparent)}
.theme-card.active{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 9px 24px var(--shadow)}
.primary{box-shadow:0 9px 24px color-mix(in srgb,var(--shadow) 72%,transparent)}
.onboard{
  padding-left:20px;padding-right:20px;
  background:radial-gradient(300px 250px at 50% 5%,var(--ambient),transparent 72%)
}
.onboard .mark{box-shadow:0 18px 38px color-mix(in srgb,var(--shadow) 130%,transparent)}
.onboard h1{letter-spacing:-1.8px}

@media(max-width:390px){
  .prayer-clock{font-size:37px}.prayer-hero-top h1{font-size:28px}
  .prayer-row{min-height:70px}.prayer-row-time{font-size:18px}
  .adhkar-progress-card h1{font-size:34px}.adhkar-ring{width:78px;height:78px}.adhkar-ring:after{width:58px;height:58px}
  .counter-orbit{width:212px;height:212px}.apple-counter .tap .count{font-size:61px}
  .stat-bars{gap:6px}.stats-hero-copy h1{font-size:46px}
  .apple-compass{width:218px;height:218px}
  .row-actions .tiny{width:29px;min-width:29px;height:29px}
}

/* v0.11.1 — Telegram viewport/nav fixes */
#app{
  min-height:100vh;
  min-height:100dvh;
  padding-bottom:0;
}
.page{
  min-height:100vh;
  min-height:100dvh;
}
.page main{
  padding-bottom:calc(116px + max(env(safe-area-inset-bottom),var(--tg-content-safe-area-inset-bottom,0px)));
}
.bottom{
  position:fixed!important;
  left:50vw!important;
  right:auto!important;
  transform:translateX(-50%)!important;
  bottom:calc(10px + max(env(safe-area-inset-bottom),var(--tg-content-safe-area-inset-bottom,0px),var(--tg-safe-area-inset-bottom,0px)))!important;
  z-index:100!important;
  margin:0!important;
  isolation:isolate;
  will-change:auto;
}
.habits-main,.plans-main{
  padding-bottom:calc(124px + max(env(safe-area-inset-bottom),var(--tg-content-safe-area-inset-bottom,0px)))!important;
}
.item-row .grow{
  min-width:0;
  align-self:center;
}
.habit-row,.task-row{
  align-items:center;
}
.habit-row .grow b,.task-row .grow b{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
  overflow-wrap:anywhere;
  word-break:normal;
  line-height:1.2;
  margin:0;
}
.habit-row .grow small,.task-row .grow small{
  line-height:1.25;
}
.row-actions{
  flex:0 0 auto;
  align-self:center;
}
@media(max-width:390px){
  .habit-row,.task-row{gap:9px;padding-left:12px;padding-right:10px}
  .row-actions{gap:3px}
  .row-actions .tiny{width:28px;min-width:28px;height:28px}
  .habit-row .grow b,.task-row .grow b{font-size:14px}
}

/* v0.13 — compact soft UI */
:root{
  --bg:#f4f7f4;--card:#ffffff;--ink:#203128;--muted:#7c8c84;--line:#e1e9e4;--soft:#edf3ef;
  --accent:#5b806d;--good:#709582;--shadow:rgba(45,77,62,.075);--hero1:#5f806f;--hero2:#91aa9a;
  --nav:rgba(255,255,255,.94);--top:rgba(244,247,244,.9);--hairline:#e8eeea;--glass:rgba(255,255,255,.91);
  --ambient:rgba(119,155,134,.16)
}
body{background:var(--bg);letter-spacing:-.01em}
#app{max-width:560px}
.soft-top{padding:calc(max(env(safe-area-inset-top),var(--tg-safe-area-inset-top,0px)) + var(--tg-content-safe-area-inset-top,0px) + 9px) 14px 7px;background:var(--top);border-bottom:0}
.top-left{display:flex;align-items:center;gap:9px;min-width:0}.top-left>div{min-width:0}
.soft-top .brand{font-size:18px;line-height:1.12;letter-spacing:-.45px}
.top-sub{font-size:10px;color:var(--muted);font-weight:650;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.soft-iconbtn{width:37px;height:37px;border-radius:13px;border-color:transparent;background:var(--card);box-shadow:0 4px 16px var(--shadow)}
.page main{padding:5px 14px calc(102px + max(env(safe-area-inset-bottom),var(--tg-content-safe-area-inset-bottom,0px)))}
.card{border-radius:20px;padding:15px;margin-bottom:10px;border-color:var(--hairline);box-shadow:0 5px 18px var(--shadow)}
.section-kicker{font-size:9px;letter-spacing:.09em;color:var(--good)}
.soft-home-main{padding-top:3px!important}
.soft-home-hero{
  min-height:0;padding:17px;border-radius:24px;margin-bottom:10px;color:var(--ink);
  background:linear-gradient(145deg,#edf5f0,#e4efe8 60%,#f6f8f6);
  border:1px solid #dfe9e3;box-shadow:0 7px 24px rgba(64,97,80,.08)
}
.soft-home-hero:after{display:none}
.soft-hero-meta{display:flex;justify-content:space-between;gap:10px;font-size:9px;color:var(--muted);font-weight:700;min-height:13px}
.soft-greeting{font-size:13px;font-weight:760;margin-top:9px;color:#466455}
.soft-next-row{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-top:18px}
.soft-prayer-name{font-size:27px;line-height:1;font-weight:850;letter-spacing:-1.1px;margin-top:5px}
.soft-time-box{text-align:right}.soft-time-box strong{display:block;font-size:31px;line-height:.95;letter-spacing:-1.8px;font-variant-numeric:tabular-nums}.soft-time-box span{display:block;font-size:9px;color:var(--muted);font-weight:700;margin-top:5px}
.soft-prayer-strip{margin-top:17px;gap:5px}
.soft-home-hero .home-prayer{padding:8px 2px;border-radius:13px;background:rgba(255,255,255,.55);border:1px solid rgba(91,128,109,.08);color:var(--ink)}
.soft-home-hero .home-prayer span{font-size:8px;color:var(--muted)}
.soft-home-hero .home-prayer b{font-size:10px;margin-top:3px}
.soft-home-hero .home-prayer.done{background:#fff;color:var(--accent)}
.soft-home-hero .home-prayer.done span{color:var(--muted)}
.soft-home-hero .home-prayer.next{background:var(--accent);color:#fff;box-shadow:none;border-color:var(--accent)}
.soft-home-hero .home-prayer.next span{color:rgba(255,255,255,.72)}
.soft-quick-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-bottom:10px}
.soft-quick-grid button{border:1px solid var(--hairline);background:var(--card);color:var(--ink);border-radius:18px;min-height:78px;padding:10px 4px 8px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;box-shadow:0 4px 15px var(--shadow);font-size:9px;font-weight:760}
.soft-quick-icon{width:31px;height:31px;border-radius:11px;display:grid;place-items:center;background:var(--soft);color:var(--accent)}
.soft-quick-icon svg{width:16px;height:16px}
.soft-summary-card{padding:14px 15px}.soft-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.soft-card-head h2{font-size:17px;margin:3px 0 0;letter-spacing:-.45px}.soft-percent{font-size:22px;letter-spacing:-1px;color:var(--accent)}
.soft-summary-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:12px 0 10px}.soft-summary-grid button{border:0;background:var(--soft);border-radius:14px;padding:9px 4px;color:var(--ink)}.soft-summary-grid b{display:block;font-size:15px}.soft-summary-grid span{display:block;font-size:8px;color:var(--muted);margin-top:2px}
.soft-summary-card .progress{margin-top:0;height:5px}
.compact-row-card{width:100%;display:flex;align-items:center;gap:11px;text-align:left;color:var(--ink);min-height:63px}
.compact-row-icon{width:36px;height:36px;flex:0 0 auto;border-radius:12px;display:grid;place-items:center;background:var(--soft);color:var(--accent)}
.compact-row-icon svg{width:17px;height:17px}.compact-row-card .grow b{display:block;font-size:13px;text-decoration:none!important}.compact-row-card .grow small{display:block;font-size:9px;color:var(--muted);margin-top:3px}.compact-chevron{font-size:23px;color:var(--muted);line-height:1}
.soft-reminder-wrap .reminder-card{margin-bottom:10px;padding:15px}.soft-reminder-wrap .reminder-card .arabic{font-size:calc(var(--arabic-size,29px) * .78);margin:7px 0 9px}.soft-reminder-wrap .reminder-card .translation{font-size:12px;line-height:1.5}
.soft-customize{display:block;margin:4px auto 0;border:0;background:transparent;color:var(--muted);font-size:10px;font-weight:750;padding:9px 14px}

.soft-bottom{
  width:min(calc(100% - 20px),540px);bottom:calc(8px + max(env(safe-area-inset-bottom),var(--tg-content-safe-area-inset-bottom,0px),var(--tg-safe-area-inset-bottom,0px)))!important;
  padding:4px 5px;border-radius:23px;background:rgba(255,255,255,.94);border:1px solid var(--hairline);
  box-shadow:0 10px 34px rgba(43,72,58,.11);backdrop-filter:blur(24px) saturate(1.25)
}
.soft-bottom button{height:48px;border-radius:17px;font-size:9px;font-weight:700;color:var(--muted);gap:1px}
.soft-bottom .navicon,.soft-bottom .navicon svg{width:18px;height:18px}
.soft-bottom button.active{background:var(--soft);color:var(--accent)}
.soft-bottom button.active .navicon{transform:none}

.compact-list-main{padding-top:3px!important}
.compact-summary-card{min-height:91px;padding:14px 15px;display:flex;align-items:center;justify-content:space-between;gap:14px}
.compact-summary-card h1{font-size:31px;margin:3px 0 2px;letter-spacing:-1.6px}.compact-summary-card h1 span{font-size:14px;color:var(--muted);font-weight:650;letter-spacing:-.2px}.compact-summary-card .muted{font-size:9px}
.compact-summary-card .small-ring{position:relative;right:auto;top:auto;width:62px;height:62px;flex:0 0 auto}.compact-summary-card .small-ring:after{width:48px;height:48px}.compact-summary-card .small-ring b{font-size:11px}
.list-toolbar{display:flex;align-items:center;justify-content:space-between;padding:8px 2px 7px}.list-toolbar h2{font-size:18px;margin:2px 0 0;letter-spacing:-.45px}
.soft-add-button{width:36px;height:36px;border:0;border-radius:12px;background:var(--accent);color:#fff;font-size:22px;line-height:1;box-shadow:0 6px 16px var(--shadow)}
.list-count{min-width:27px;height:27px;padding:0 8px;border-radius:999px;background:var(--soft);color:var(--muted);display:grid;place-items:center;font-size:10px;font-weight:800}
.habit-list,.task-list{gap:6px}
.habit-row,.task-row{min-height:58px;border-radius:18px;padding:8px 8px 8px 10px;background:var(--card);border-color:var(--hairline);box-shadow:0 3px 13px rgba(45,77,62,.045)}
.habit-row .grow b,.task-row .grow b{font-size:13px;line-height:1.18}.habit-row .grow small,.task-row .grow small{font-size:9px;margin-top:2px}
.mini-check{width:29px;height:29px;border-radius:10px;border-width:1.5px}
.row-actions{gap:2px}.row-actions .tiny{width:27px;min-width:27px;height:27px;border-radius:9px;font-size:10px;padding:0}
.compact-section-label{font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:15px 3px 7px}
.secondary-list .habit-row{opacity:.58}
.compact-addbox{margin:8px 0 10px;border-radius:18px;padding:4px;box-shadow:0 4px 14px rgba(45,77,62,.05)}
.compact-addbox .field{height:42px;font-size:13px}.compact-addbox .addbtn{width:42px;height:42px;border-radius:14px}
.compact-empty{padding:22px 16px;margin-bottom:0}.compact-empty b{font-size:14px}.compact-empty .muted{font-size:10px}
.progress-ring{background:conic-gradient(var(--accent) var(--ring),var(--soft) 0)}
.progress-ring:after{background:var(--card)}

@media(max-width:370px){
  .soft-quick-grid{gap:5px}.soft-quick-grid button{min-height:72px;font-size:8px}.soft-quick-icon{width:29px;height:29px}
  .soft-prayer-name{font-size:24px}.soft-time-box strong{font-size:28px}
  .soft-home-hero{padding:15px}.soft-home-hero .home-prayer span{font-size:7px}.soft-home-hero .home-prayer b{font-size:9px}
  .row-actions .tiny{width:25px;min-width:25px;height:25px}.habit-row,.task-row{gap:7px}
}

/* v0.14 — unified compact screens */
.compact-prayers-main,.compact-adhkar-main,.compact-reader-main,.compact-zikr-main,.compact-stats-main,.compact-profile-main,.compact-themes-main{padding-top:3px!important}
.compact-prayer-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;min-height:118px;padding:16px 17px;background:linear-gradient(145deg,#edf5f0,#f7f9f7);border-color:var(--hairline)}
.compact-prayer-copy h1{font-size:29px;margin:4px 0 3px;letter-spacing:-1.2px}.compact-prayer-copy>span{font-size:9px;color:var(--muted);font-weight:700}
.compact-prayer-time{text-align:right;flex:0 0 auto}.compact-prayer-time strong{display:block;font-size:34px;line-height:.95;letter-spacing:-2px;font-variant-numeric:tabular-nums}.compact-prayer-time small{display:block;margin-top:5px;font-size:9px;color:var(--muted);font-weight:700}
.compact-section-head{display:flex;align-items:center;justify-content:space-between;padding:8px 2px 7px}.compact-section-head h2{font-size:18px;margin:2px 0 0;letter-spacing:-.45px}
.soft-pill{display:inline-flex;align-items:center;height:27px;padding:0 9px;border-radius:999px;background:var(--soft);color:var(--muted);font-size:9px;font-weight:800}
.compact-prayer-list{gap:6px}.compact-prayer-row{min-height:58px;border-radius:18px;padding:9px 11px;background:var(--card);border-color:var(--hairline);box-shadow:0 3px 13px rgba(45,77,62,.04)}
.compact-prayer-row .prayer-symbol{width:31px;height:31px;font-size:12px}.compact-prayer-row .grow b{font-size:13px}.compact-prayer-row .grow small{font-size:9px;margin-top:2px}.compact-prayer-row .prayer-row-time{font-size:18px;letter-spacing:-.6px}
.compact-history-card{padding:14px 15px}.compact-history-card h2{font-size:17px;margin:3px 0 0}.compact-heatmap{gap:4px;margin-top:13px}.compact-heatmap .heat{border-radius:4px}
.soft-circle-link{width:34px;height:34px;border:0;border-radius:50%;background:var(--soft);color:var(--accent);font-size:17px}
.soft-text-link{display:block;width:max-content;max-width:100%;margin:8px auto 2px;padding:8px 12px;border:0;background:transparent;color:var(--muted);font-size:10px;font-weight:760}

.compact-segment{margin-bottom:9px;padding:3px;border-radius:15px}.compact-segment button{height:38px;border-radius:12px;font-size:11px}
.compact-adhkar-summary{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:91px;padding:14px 15px}.compact-adhkar-summary h1{font-size:31px;margin:3px 0 2px;letter-spacing:-1.5px}.compact-adhkar-summary h1 span{font-size:14px;color:var(--muted);font-weight:650}.compact-adhkar-summary .muted{font-size:9px}.compact-adhkar-summary .small-ring{width:62px;height:62px}.compact-adhkar-summary .small-ring:after{width:48px;height:48px}.compact-adhkar-summary .small-ring b{font-size:11px}
.compact-reader-cta{min-height:44px;border-radius:15px;margin-bottom:2px;font-size:12px}
.adhkar-compact-list{display:grid;gap:6px}
.adhkar-list-row{display:grid;grid-template-columns:1fr 37px;gap:6px;align-items:stretch}
.adhkar-row-main{border:1px solid var(--hairline);background:var(--card);border-radius:18px;padding:9px 10px;display:flex;align-items:center;gap:10px;text-align:left;color:var(--ink);box-shadow:0 3px 12px rgba(45,77,62,.04);min-width:0}
.adhkar-row-index{width:28px;height:28px;flex:0 0 auto;border-radius:10px;background:var(--soft);display:grid;place-items:center;color:var(--accent);font-size:10px;font-weight:850}
.adhkar-row-main .grow{min-width:0}.adhkar-row-main b{display:block;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.adhkar-row-main small{display:block;font-size:8px;color:var(--muted);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.adhkar-row-check{border:1px solid var(--hairline);border-radius:13px;background:var(--soft);color:var(--accent);font-size:10px;font-weight:850}.adhkar-row-check.done{background:var(--accent);color:#fff;border-color:var(--accent)}.adhkar-list-row.done .adhkar-row-main{opacity:.7}
.soft-reader{min-height:calc(100dvh - 205px);border-radius:22px;padding:16px}.soft-reader .reader-title-row{margin-top:16px}.soft-reader .reader-title-row h2{font-size:16px}.soft-reader .reader-arabic{padding:14px 2px 8px;line-height:2!important}.soft-reader .reader-translation{font-size:13px;line-height:1.58;padding:11px 2px}.soft-reader .reader-source{font-size:10px}.soft-reader .readbtn,.soft-reader .remaining{height:46px}.soft-reader .reader-nav{margin-top:12px}

.compact-presets{gap:6px;padding-bottom:7px}.compact-presets .preset{min-width:auto;padding:8px 10px}.compact-presets .preset span{font-size:10px}.compact-presets .preset small{font-size:8px}
.compact-custom-zikr{padding:10px;border-radius:18px;gap:6px}.compact-custom-zikr .field{height:45px}
.soft-zikr-counter{padding:17px 16px 15px}.soft-zikr-counter h2{font-size:20px;margin:3px 0 0}.soft-zikr-counter .zikr-arabic{font-size:25px;margin:10px 0 0!important}
.soft-zikr-tap{width:174px;height:174px;margin:22px auto 18px;border-radius:50%;border:10px solid var(--soft);background:var(--card);color:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 12px 32px rgba(45,77,62,.08),inset 0 0 0 1px var(--hairline)}
.soft-zikr-tap:active{transform:scale(.97)}.soft-zikr-count{font-size:58px;line-height:.9;font-weight:850;letter-spacing:-3px}.soft-zikr-tap>span:last-child{font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:.09em;margin-top:9px;font-weight:800}
.soft-zikr-progress{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:3px}.soft-zikr-progress>div{background:var(--soft);border-radius:14px;padding:9px;text-align:left}.soft-zikr-progress span{display:block;font-size:8px;color:var(--muted);font-weight:750}.soft-zikr-progress b{display:block;font-size:15px;margin-top:2px}.soft-zikr-counter .progress{margin-top:9px}.soft-zikr-counter .reset-zikr{margin-top:6px}

.compact-stats-hero{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:100px;padding:14px 15px}.compact-stats-hero h1{font-size:36px;margin:3px 0 1px;letter-spacing:-2px}.compact-stats-hero p{margin:0;color:var(--muted);font-size:9px}.compact-stats-ring{position:relative;right:auto;top:auto;width:66px;height:66px}.compact-stats-ring:after{width:50px;height:50px}.compact-stats-ring b{font-size:11px}
.compact-chart-card{padding:14px 15px}.compact-chart-card h2{font-size:17px;margin:3px 0 0}.compact-stat-bars{height:119px;grid-template-rows:auto;margin-top:14px;gap:7px}.compact-stat-bars .stat-day{grid-template-rows:76px auto auto}.compact-stat-bars .stat-track{height:76px}.compact-stat-bars .stat-day b{font-size:9px}.compact-stat-bars .stat-day span{font-size:8px}
.compact-metric-strip,.compact-profile-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:10px}.compact-metric-strip button,.compact-profile-stats button{border:1px solid var(--hairline);background:var(--card);border-radius:16px;padding:10px 3px;color:var(--ink);box-shadow:0 3px 12px rgba(45,77,62,.035)}.compact-metric-strip b,.compact-profile-stats b{display:block;font-size:15px;letter-spacing:-.5px}.compact-metric-strip span,.compact-profile-stats span{display:block;font-size:7.5px;color:var(--muted);margin-top:2px;font-weight:700}

.compact-profile-card{display:flex;align-items:center;gap:12px;min-height:90px;padding:14px 15px}.compact-profile-card .avatar{width:53px;height:53px;border-radius:18px;font-size:18px;background:linear-gradient(145deg,#dce9e1,#93aa9a);color:#355545;box-shadow:none}.compact-profile-card .profile-copy h1{font-size:20px;margin:2px 0 2px}.compact-profile-card .profile-copy .muted{font-size:9px}
.compact-profile-main .settings-section{margin-top:12px}.compact-profile-main .settings-label{padding:0 4px 5px;font-size:9px}
.compact-settings{border-radius:19px;box-shadow:0 3px 13px rgba(45,77,62,.035)}.compact-settings .settings-row{min-height:52px;padding:9px 12px}.compact-settings .settings-row:not(:last-child):after{left:12px}.compact-settings .settings-row b{font-size:12px}.compact-settings .settings-row small{font-size:8px}.compact-settings .chevron{font-size:19px}.compact-sync-note{font-size:9px;margin-top:12px;padding:10px 11px}

.compact-theme-grid{gap:8px}.compact-theme-grid .theme-card{border-radius:20px;padding:8px}.compact-theme-grid .theme-preview{height:92px;border-radius:14px;padding:10px;margin-bottom:8px}.compact-theme-grid .theme-name{font-size:12px}.compact-theme-grid .theme-desc{font-size:9px}.compact-theme-grid .theme-check{width:20px;height:20px;font-size:10px}
@media(max-width:370px){
  .compact-prayer-time strong{font-size:30px}.compact-prayer-copy h1{font-size:26px}
  .compact-metric-strip,.compact-profile-stats{gap:4px}.compact-metric-strip b,.compact-profile-stats b{font-size:14px}.compact-metric-strip span,.compact-profile-stats span{font-size:7px}
  .adhkar-list-row{grid-template-columns:1fr 34px}.soft-zikr-tap{width:158px;height:158px}.soft-zikr-count{font-size:52px}
}

/* v0.14.1 — fixed nav + no double-tap zoom */
.bottom.soft-bottom{
  position:fixed!important;
  left:50%!important;
  right:auto!important;
  bottom:calc(8px + max(env(safe-area-inset-bottom),var(--tg-content-safe-area-inset-bottom,0px),var(--tg-safe-area-inset-bottom,0px)))!important;
  transform:translateX(-50%)!important;
  width:min(calc(100vw - 20px),540px)!important;
  z-index:9999!important;
  margin:0!important;
}
.page{transform:none}
.page main{
  padding-bottom:calc(92px + max(env(safe-area-inset-bottom),var(--tg-content-safe-area-inset-bottom,0px),var(--tg-safe-area-inset-bottom,0px)))!important;
}
.soft-zikr-tap,.tap,#tapZikr{
  touch-action:manipulation!important;
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
}

/* v0.15 — Huna Tracker theme, typography and Telegram profile polish */

html[data-font-size="small"]{-webkit-text-size-adjust:90%;text-size-adjust:90%}
html[data-font-size="normal"]{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html[data-font-size="large"]{-webkit-text-size-adjust:116%;text-size-adjust:116%}

.avatar{overflow:hidden}
.avatar img{width:100%;height:100%;display:block;object-fit:cover;border-radius:inherit}
.onboard-logo{width:112px;height:112px;display:block;margin:0 auto 24px;object-fit:contain;filter:drop-shadow(0 14px 24px var(--shadow))}
.about-logo{width:78px;height:78px;display:block;margin:0 0 18px;object-fit:contain;filter:drop-shadow(0 10px 20px var(--shadow))}

.notify-setting{display:flex;align-items:center;gap:12px;margin-bottom:9px;padding:14px 15px}
.notify-copy{flex:1;min-width:0}
.notify-copy b{display:block;font-size:14px}
.notify-copy small{display:block;color:var(--muted);font-size:10px;margin-top:3px;line-height:1.35}
.notify-time{height:38px;max-width:102px;border:1px solid var(--hairline);border-radius:12px;background:var(--soft);color:var(--ink);padding:0 9px;font:inherit;font-size:11px}
.notify-setting .switch{border:0;flex:0 0 auto}

/* v0.16.3 — onboarding, desktop responsiveness and city suggestions */
.onboard.onboarding-setup{
  width:min(100%,720px);
  max-width:720px;
  min-height:100svh;
  padding:clamp(28px,5vh,56px) clamp(18px,4vw,34px) 34px;
  justify-content:center;
  gap:28px;
}
.onboard-brand{
  display:grid;
  justify-items:center;
  text-align:center;
}
.onboard-brand .onboard-logo{
  width:clamp(88px,12vw,116px);
  height:clamp(88px,12vw,116px);
  margin:0 auto 18px;
  object-fit:contain;
  object-position:center;
  transform:none;
}
.onboard-brand h1{
  margin:0 auto 10px;
  text-align:center;
  font-size:clamp(34px,5vw,46px);
  line-height:1;
  letter-spacing:-1.7px;
  max-width:100%;
}
.onboard-brand p{
  max-width:560px;
  margin:0 auto;
  font-size:clamp(14px,2vw,17px);
  line-height:1.5;
}
.onboard-form{
  width:min(100%,650px);
  margin:0 auto;
}
.city-autocomplete{position:relative;margin-top:7px}
.city-suggestions{
  position:absolute;
  z-index:60;
  top:calc(100% + 7px);
  left:0;
  right:0;
  overflow:hidden;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:0 18px 46px var(--shadow);
  padding:5px;
}
.city-suggestion{
  width:100%;
  border:0;
  background:transparent;
  color:var(--ink);
  min-height:54px;
  padding:9px 11px;
  border-radius:13px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  text-align:left;
}
.city-suggestion:hover,.city-suggestion:focus-visible{background:var(--soft);outline:none}
.city-suggestion span{min-width:0}
.city-suggestion b{display:block;font-size:14px}
.city-suggestion small{
  display:block;
  color:var(--muted);
  font-size:11px;
  margin-top:3px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.city-suggestion em{font-style:normal;color:var(--muted);font-size:21px}
@media(min-width:900px){
  #app{max-width:760px}
  .onboard.onboarding-setup{padding-top:48px;padding-bottom:48px}
  .onboard-form{background:color-mix(in srgb,var(--card) 82%,transparent);border:1px solid var(--line);border-radius:26px;padding:24px;box-shadow:0 14px 38px var(--shadow)}
}
@media(max-width:520px){
  .onboard.onboarding-setup{justify-content:flex-start;padding-top:24px;gap:22px}
  .onboard-brand .onboard-logo{width:88px;height:88px;margin-bottom:14px}
  .onboard-brand h1{font-size:34px;letter-spacing:-1.2px}
  .onboard-brand p{font-size:14px;margin-bottom:0}
  .onboard-form{width:100%}
  .seg button{font-size:13px;padding:0 8px}
}

.boot-logo{width:72px;height:72px;display:block;object-fit:contain;margin:0 0 26px;border-radius:22px;filter:drop-shadow(0 10px 20px var(--shadow))}

/* stability: disable continuous decorative motion */
.hero:after,.soft-home-hero:after,.apple-hero:after{animation:none!important}

/* dark navigation must follow the selected theme */

/* v0.16.6 — immersive theme set based on approved mockups */

/* Deep theme surfaces */

/* Navigation follows every palette */

/* Warm theme uses cream content cards like the approved mockup */

/* Theme picker previews */

/* Everyday usability: clearer labels, useful empty states, visible local storage. */
.storage-banner{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);padding:1px 3px 10px;line-height:1.5}
.storage-banner span:nth-child(2){flex:1}.storage-banner button{border:0;background:none;color:var(--accent);font-size:12px;padding:8px 0 8px 8px}
.storage-dot{width:7px;height:7px;flex:0 0 7px;background:var(--good);border-radius:50%}
.progress-help{font-size:12px;color:var(--muted);margin-top:13px;line-height:1.6}.progress-help summary{cursor:pointer;min-height:28px}.progress-help p{margin:8px 0 0}
.empty-intro h1{font-size:27px!important;line-height:1.2;margin:10px 0}.empty-intro p{font-size:14px;line-height:1.6;margin:0}.empty-action{margin-top:18px;max-width:300px}
.setup-hint{font-size:13px;line-height:1.6;color:var(--muted);margin:7px 0 14px}
.soft-top .top-sub{font-size:12px!important}.soft-bottom button>span:last-child{font-size:11px!important}
.soft-quick-grid button>span:last-child{font-size:13px!important}.soft-quick-icon{font-size:23px}
.home-prayer span{font-size:12px!important}.home-prayer b{font-size:15px!important}
.compact-row-card small,.compact-profile-main .menu small,.reader-source{font-size:12px!important;line-height:1.5!important}
.soft-summary-grid button b{font-size:16px!important}.soft-summary-grid button span{font-size:12px!important}
.reader-main{padding-bottom:120px!important}.reader-controls button{min-height:44px}
button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
@media(max-width:380px){.soft-summary-grid button b{font-size:14px!important}.storage-banner{font-size:11px}.home-prayer span{font-size:11px!important}}
@media(prefers-reduced-motion:reduce){.page{animation:none}*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}}