/* =============================================================================
   Zikry design system ("Living sky")
   Every earlier stylesheet is imported into the low-priority `legacy` layer, and
   feature stylesheets into `features`. Rules in this file are unlayered, so they
   always win without specificity battles. Keep new UI here.
   ========================================================================== */
@layer legacy, features;
@import url("legacy-base.css") layer(legacy);
@import url("cloud.css") layer(legacy);
@import url("offline.css") layer(legacy);
@import url("discovery.css") layer(legacy);
@import url("library-tools.css") layer(legacy);
@import url("saved-tools.css") layer(legacy);
@import url("reading-counter.css") layer(legacy);
@import url("prayer-times.css") layer(legacy);
@import url("prayer-tracker.css") layer(legacy);
@import url("routine-builder.css") layer(legacy);
@import url("tasbih-skins.css") layer(features);
@import url("adhkar.css") layer(features);

/* ---------------------------------------------------------------------------
   1. Tokens
   ------------------------------------------------------------------------ */
:root{
  color-scheme:light;
  /* Semantic surfaces and text */
  --bg:#F1F3F8;--bg-elev:#FFFFFF;--bg-sunk:#E7EBF3;--bg-tint:#EAF0FB;
  --label:#0F1B33;--label-2:#45526C;--label-3:#5F6B83;--label-inv:#FFFFFF;
  --separator:rgba(15,27,51,.11);--separator-strong:rgba(15,27,51,.22);--hairline:.5px;
  --tint:#2253AE;--tint-soft:#E3EBFA;--on-tint:#FFFFFF;
  --gold:#F3D493;--gold-ink:#8A5A0E;--gold-soft:#FBF1DA;
  --turquoise:#13786F;--turquoise-soft:#DDF1EE;
  --danger:#B53A2B;--success:#1C7A4E;
  --glass:rgba(255,255,255,.72);--glass-border:rgba(255,255,255,.55);
  --elev-1:0 1px 2px rgba(15,27,51,.05),0 4px 14px -8px rgba(15,27,51,.16);
  --elev-2:0 2px 6px rgba(15,27,51,.06),0 18px 40px -18px rgba(15,27,51,.32);
  /* Type */
  --ui:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro",system-ui,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  --ui-rounded:ui-rounded,"SF Pro Rounded",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --serif:'Literata',"New York",Georgia,serif;
  --ar:'Amiri','Scheherazade New','Noto Naskh Arabic','Geeza Pro','Traditional Arabic',serif;
  --t-hero:2.5rem;--t-large:2.125rem;--t-title1:1.75rem;--t-title2:1.375rem;--t-title3:1.25rem;--t-headline:1.0625rem;--t-body:1.0625rem;
  --t-callout:1rem;--t-subhead:.9375rem;--t-footnote:.8125rem;--t-caption:.75rem;--t-caption2:.6875rem;
  /* Shape, space, motion */
  --r-xs:8px;--r-s:12px;--r-m:16px;--r-l:22px;--r-xl:28px;--r-pill:999px;
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:20px;--s6:24px;--s8:32px;--s10:40px;
  --gutter:16px;
  --ease:cubic-bezier(.2,.8,.2,1);--spring:cubic-bezier(.32,1.28,.6,1);--dur:.24s;
  /* Legacy aliases so older modules follow the new palette */
  --paper:var(--bg);--card:var(--bg-elev);--ink:var(--label);--ink2:var(--label-2);--muted:var(--label-3);
  --line:var(--separator);--fill:var(--bg-sunk);--lapis:var(--tint);--on-lapis:var(--on-tint);
  --turq:var(--turquoise);--turq-soft:var(--turquoise-soft);--amber:var(--gold-ink);--amber-soft:var(--gold-soft);
  --control-line:#7A859B;--shadow:var(--elev-1);
  /* Previously undefined variables, now real */
  --lapis-soft:var(--tint-soft);--surface:var(--bg-elev);--c-ink:#EEF2FA;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  color-scheme:dark;
  --bg:#060B18;--bg-elev:#101828;--bg-sunk:#172136;--bg-tint:#142342;
  --label:#EEF2F9;--label-2:#BAC4D6;--label-3:#909CB3;
  --separator:rgba(255,255,255,.10);--separator-strong:rgba(255,255,255,.2);
  --tint:#8FB3FF;--tint-soft:#1A2B52;--on-tint:#071022;
  --gold-ink:#F0C46A;--gold-soft:#2A2312;--turquoise:#5BCBBE;--turquoise-soft:#11302F;--danger:#F2876C;--success:#5CCB94;
  --glass:rgba(16,24,40,.66);--glass-border:rgba(255,255,255,.08);
  --elev-1:0 1px 0 rgba(255,255,255,.03),0 10px 26px -18px rgba(0,0,0,.8);--elev-2:0 24px 60px -24px rgba(0,0,0,.85);
  --control-line:#6E7C98;
}}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#060B18;--bg-elev:#101828;--bg-sunk:#172136;--bg-tint:#142342;
  --label:#EEF2F9;--label-2:#BAC4D6;--label-3:#909CB3;
  --separator:rgba(255,255,255,.10);--separator-strong:rgba(255,255,255,.2);
  --tint:#8FB3FF;--tint-soft:#1A2B52;--on-tint:#071022;
  --gold-ink:#F0C46A;--gold-soft:#2A2312;--turquoise:#5BCBBE;--turquoise-soft:#11302F;--danger:#F2876C;--success:#5CCB94;
  --glass:rgba(16,24,40,.66);--glass-border:rgba(255,255,255,.08);
  --elev-1:0 1px 0 rgba(255,255,255,.03),0 10px 26px -18px rgba(0,0,0,.8);--elev-2:0 24px 60px -24px rgba(0,0,0,.85);
  --control-line:#6E7C98;
}

/* Living sky: one palette per part of the day, set by sky.js on <html data-sky>.
   Text sits on --sky-a (the top of the gradient), which stays dark enough for white text. */
:root{--sky-a:#050B1F;--sky-b:#0E1A3E;--sky-c:#1E3166;--sky-orb:#F3E7C2;--sky-glow:rgba(243,231,194,.35);--sky-stars:.9;--sky-orb-x:78%;--sky-orb-y:22%;--sky-orb-size:46px;--sky-moon:1;--sky-haze:rgba(255,255,255,0)}
[data-sky="dawn"]{--sky-a:#121A44;--sky-b:#3A3470;--sky-c:#C76E7C;--sky-orb:#FFD2B0;--sky-glow:rgba(255,190,160,.45);--sky-stars:.35;--sky-orb-x:90%;--sky-orb-y:106%;--sky-orb-size:80px;--sky-moon:0;--sky-haze:rgba(255,170,150,.18)}
[data-sky="sunrise"]{--sky-a:#1D3E7E;--sky-b:#6A7FC0;--sky-c:#F2B188;--sky-orb:#FFE2A8;--sky-glow:rgba(255,206,140,.55);--sky-stars:0;--sky-orb-x:90%;--sky-orb-y:100%;--sky-orb-size:84px;--sky-moon:0;--sky-haze:rgba(255,200,150,.2)}
[data-sky="morning"]{--sky-a:#154A93;--sky-b:#2F79C6;--sky-c:#86BEEA;--sky-orb:#FFF1C9;--sky-glow:rgba(255,241,201,.5);--sky-stars:0;--sky-orb-x:90%;--sky-orb-y:100%;--sky-orb-size:78px;--sky-moon:0;--sky-haze:rgba(255,255,255,.08)}
[data-sky="noon"]{--sky-a:#0F4C9C;--sky-b:#2A7FD0;--sky-c:#8AC8F2;--sky-orb:#FFFBE8;--sky-glow:rgba(255,251,232,.55);--sky-stars:0;--sky-orb-x:90%;--sky-orb-y:100%;--sky-orb-size:76px;--sky-moon:0;--sky-haze:rgba(255,255,255,.1)}
[data-sky="afternoon"]{--sky-a:#1C4886;--sky-b:#4C7DB7;--sky-c:#E4C38C;--sky-orb:#FFE7B0;--sky-glow:rgba(255,226,160,.5);--sky-stars:0;--sky-orb-x:90%;--sky-orb-y:102%;--sky-orb-size:80px;--sky-moon:0;--sky-haze:rgba(255,220,160,.12)}
[data-sky="golden"]{--sky-a:#273A76;--sky-b:#9A5A72;--sky-c:#F2A45A;--sky-orb:#FFC673;--sky-glow:rgba(255,170,90,.6);--sky-stars:0;--sky-orb-x:90%;--sky-orb-y:100%;--sky-orb-size:88px;--sky-moon:0;--sky-haze:rgba(255,160,90,.2)}
[data-sky="maghrib"]{--sky-a:#171B46;--sky-b:#56376C;--sky-c:#D1705C;--sky-orb:#FFB27A;--sky-glow:rgba(255,140,100,.4);--sky-stars:.3;--sky-orb-x:90%;--sky-orb-y:108%;--sky-orb-size:84px;--sky-moon:0;--sky-haze:rgba(255,140,110,.14)}
[data-sky="isha"]{--sky-a:#0A1030;--sky-b:#1C2353;--sky-c:#3B3A72;--sky-orb:#F3E7C2;--sky-glow:rgba(243,231,194,.3);--sky-stars:.7;--sky-orb-x:80%;--sky-orb-y:30%;--sky-orb-size:42px;--sky-moon:1;--sky-haze:rgba(120,110,200,.1)}
[data-sky="night"]{--sky-a:#040A1C;--sky-b:#0C1838;--sky-c:#1B2C5A;--sky-orb:#F6ECCB;--sky-glow:rgba(246,236,203,.32);--sky-stars:.95;--sky-orb-x:78%;--sky-orb-y:22%;--sky-orb-size:44px;--sky-moon:1;--sky-haze:rgba(0,0,0,0)}
/* Older sky consumers (skybg, counter) follow the living sky. */
:root{--sky1:var(--sky-a);--sky2:var(--sky-b)}

/* ---------------------------------------------------------------------------
   2. Base
   ------------------------------------------------------------------------ */
/* Fixed 16px root on every device: iOS -apple-system-body scaling enlarged the whole layout on small iPhones. */
html{font-size:100%}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{background:var(--bg);color:var(--label);font-family:var(--ui);font-size:1rem;line-height:1.47;letter-spacing:-.01em;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
:lang(ar) body,[dir="rtl"] body{letter-spacing:0}
::selection{background:color-mix(in srgb,var(--tint) 24%,transparent)}
:focus-visible{outline:3px solid var(--tint);outline-offset:2px;border-radius:var(--r-xs)}
a{color:var(--tint)}
.app{max-width:640px;padding-inline:env(safe-area-inset-left,0px) env(safe-area-inset-right,0px);padding-bottom:calc(112px + env(safe-area-inset-bottom,0px))}
.site-credit{color:var(--label-3);font-size:var(--t-caption);padding:28px 20px 12px;text-align:center;letter-spacing:.02em}
.small{font-size:var(--t-footnote)}.muted{color:var(--label-3)}

/* ---------------------------------------------------------------------------
   3. Components
   ------------------------------------------------------------------------ */
/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 18px;border-radius:var(--r-pill);border:0;background:var(--bg-sunk);color:var(--label);font-weight:600;font-size:var(--t-callout);letter-spacing:-.01em;box-shadow:none;transition:transform .18s var(--ease),background-color .2s,opacity .2s}
#main .btn,.sheet-panel .btn,.flow-form .btn{border-radius:var(--r-pill);border:0}
.btn:active:not(:disabled){transform:scale(.96)}
.btn:disabled{opacity:.45}
.btn.primary{background:var(--tint);color:var(--on-tint);box-shadow:0 6px 16px -8px color-mix(in srgb,var(--tint) 70%,transparent)}
.btn.ghost,.btn.link-like{background:transparent;color:var(--tint)}
.btn.danger{background:color-mix(in srgb,var(--danger) 10%,transparent);color:var(--danger)}
.btn.sm{min-height:36px;padding:7px 14px;font-size:var(--t-subhead)}
.btn.block{width:100%}
.btn svg{width:18px;height:18px;flex:none}
.link{color:var(--tint);font-weight:600}
.icon{width:44px;height:44px;border-radius:50%;color:inherit;transition:background-color .15s,transform .18s var(--ease)}
.icon:active{transform:scale(.9);background:color-mix(in srgb,currentColor 12%,transparent)}
.icon svg{width:22px;height:22px}

/* Cards and grouped lists */
.card,.zcard{background:var(--bg-elev);border:0;border-radius:var(--r-l);box-shadow:var(--elev-1);margin-inline:var(--gutter)}
#main .card{border:0;border-radius:var(--r-l)}
.group-t,#main .group-t{font-family:var(--ui);font-size:var(--t-footnote);font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--label-3);margin:28px calc(var(--gutter) + 18px) 8px}
:lang(ar) .group-t{text-transform:none;letter-spacing:0}
.srow,#main .srow{display:flex;align-items:center;gap:12px 14px;min-height:52px;padding:10px 18px;border:0;background-image:none}
.srow+.srow,#main .srow+.srow{border-top:0;background-image:linear-gradient(var(--separator),var(--separator));background-repeat:no-repeat;background-size:calc(100% - 18px) 1px;background-position:right top}
[dir="rtl"] .srow+.srow{background-position:left top}
.srow>span{font-weight:500;font-size:var(--t-body)}
.srow small{color:var(--label-3);font-size:var(--t-footnote);font-weight:400}
.row-icon{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:8px;color:#fff;flex:none;background:var(--tint)}
.row-icon svg{width:18px;height:18px}
.row-icon.gold{background:linear-gradient(160deg,#E7B64D,#B57E1C)}.row-icon.teal{background:linear-gradient(160deg,#2BB3A3,#13786F)}.row-icon.indigo{background:linear-gradient(160deg,#5B6CF0,#3341B8)}
.row-icon.rose{background:linear-gradient(160deg,#F07A8B,#C2405A)}.row-icon.slate{background:linear-gradient(160deg,#8792A8,#5A6479)}.row-icon.azure{background:linear-gradient(160deg,#4BA3F2,#1F6FD1)}.row-icon.green{background:linear-gradient(160deg,#4CC38A,#1C8A55)}

/* Inputs */
.inp,.txt,input.txt,.srow input.txt,select.inp,textarea.inp{background:var(--bg-sunk);border:1px solid transparent;border-radius:var(--r-s);min-height:44px;padding:10px 14px;color:var(--label);font-size:var(--t-callout)}
.inp:focus,.txt:focus{border-color:var(--tint);background:var(--bg-elev);outline:0;box-shadow:0 0 0 4px color-mix(in srgb,var(--tint) 18%,transparent)}
.search,#main .search{display:flex;align-items:center;gap:10px;margin:8px var(--gutter) 12px;padding:0 14px;min-height:44px;border:0;border-radius:var(--r-s);background:var(--bg-sunk);box-shadow:none}
.search input{background:transparent;border:0;flex:1;min-width:0;font-size:var(--t-callout);color:var(--label)}
.search svg{width:18px;height:18px;color:var(--label-3)}

/* Segmented control and switches */
.seg{display:inline-flex;flex-wrap:wrap;padding:2px;gap:2px;border-radius:10px;background:var(--bg-sunk);border:0}
.seg button{min-height:36px;min-width:44px;padding:6px 14px;border:0;border-radius:8px;background:transparent;color:var(--label-2);font-weight:600;font-size:var(--t-subhead);transition:background-color .2s var(--ease),color .2s,box-shadow .2s}
.seg button[aria-pressed="true"]{background:var(--bg-elev);color:var(--label);box-shadow:0 3px 8px rgba(0,0,0,.12),0 1px 1px rgba(0,0,0,.04)}
.switch::before{background:color-mix(in srgb,var(--label) 22%,var(--bg-sunk))}
.switch[aria-checked="true"]::before{background:var(--success)}
.switch::after{transition:transform .28s var(--spring)}

/* Chips (filters) */
.chip-row{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px var(--gutter) 6px;margin:0;scroll-padding-inline:var(--gutter)}
.chip-row::-webkit-scrollbar{display:none}
.chip-btn{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:7px 14px;border-radius:var(--r-pill);border:0;background:var(--bg-elev);color:var(--label-2);font-weight:600;font-size:var(--t-subhead);box-shadow:inset 0 0 0 1px var(--separator);white-space:nowrap;transition:background-color .2s,color .2s,transform .15s var(--ease)}
.chip-btn[aria-pressed="true"]{background:var(--label);color:var(--bg-elev);box-shadow:none}
.chip-btn:active{transform:scale(.96)}
.chip-btn svg{width:16px;height:16px}

/* Headers: large titles that compress into a glass bar on scroll */
.vhead,#main .vhead{position:sticky;top:0;z-index:9;display:flex;align-items:center;gap:4px;padding:calc(env(safe-area-inset-top,0px) + 10px) 10px 8px calc(var(--gutter) + 2px);background:transparent;transition:background-color .25s var(--ease),box-shadow .25s var(--ease)}
.vhead h1,#main .vhead h1{flex:1;min-width:0;font-family:var(--serif);font-weight:500;font-size:var(--t-large);line-height:1.12;letter-spacing:-.02em;transition:font-size .22s var(--ease)}
.vhead.back,#main .vhead.back{padding-inline-start:6px}
.is-scrolled .vhead{background:var(--glass);-webkit-backdrop-filter:saturate(180%) blur(22px);backdrop-filter:saturate(180%) blur(22px);box-shadow:0 var(--hairline) 0 var(--separator)}
.is-scrolled .vhead h1,.is-scrolled #main .vhead h1{font-size:var(--t-title3)}

/* Disclosure rows use one chevron everywhere */
details>summary{list-style:none;cursor:pointer}
details>summary::-webkit-details-marker{display:none}
.ui-disclosure>summary,.settings-disclosure>summary,.today-extra>summary,.settings-advanced>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px}
.ui-disclosure>summary::after,.settings-disclosure>summary::after,.today-extra>summary::after,.settings-advanced>summary::after{content:"";flex:none;width:9px;height:9px;border:solid var(--label-3);border-width:0 2px 2px 0;transform:rotate(45deg) translate(-2px,-2px);transition:transform .25s var(--ease)}
details[open]>summary::after{transform:rotate(-135deg) translate(-2px,-2px)!important}

/* Sheets: one presentation, full screen on phones, a dialog on larger screens */
.sheet{background:rgba(3,8,20,.45);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.sheet-panel{background:var(--bg-elev);border-radius:var(--r-xl) var(--r-xl) 0 0;padding:6px 20px calc(20px + env(safe-area-inset-bottom,0px));box-shadow:var(--elev-2);animation:rise .42s var(--spring)}
.sheet-panel::before{width:36px;height:5px;background:var(--separator-strong);margin:6px auto 12px}
.sh-head{margin-bottom:16px}
.sh-head h2,.form-head h2{font-family:var(--serif);font-weight:500;font-size:var(--t-title2);letter-spacing:-.015em}
.sh-head .icon,.form-head .form-close{background:var(--bg-sunk);width:34px;height:34px;min-width:34px}
.sh-head .icon svg,.form-head .form-close svg{width:16px;height:16px}
.form-back{color:var(--tint);font-weight:600}
.acts li button{min-height:52px;border-radius:var(--r-s)}
@media (min-width:700px){.sheet{align-items:center;padding:24px}.sheet-panel{max-width:480px;border-radius:var(--r-xl);max-height:86dvh}.sheet-panel::before{display:none}}

/* Toast: floating glass capsule */
.toast{border-radius:var(--r-pill);padding:12px 18px;background:color-mix(in srgb,var(--label) 92%,transparent);color:var(--bg-elev);box-shadow:var(--elev-2);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);font-weight:500;font-size:var(--t-subhead);max-width:min(92vw,440px)}
.toast button,.toast a{color:color-mix(in srgb,var(--gold) 80%,#fff);font-weight:700;text-decoration:none}

/* Tab bar: glass, four tabs and a central count button */
.nav{background:var(--glass);-webkit-backdrop-filter:saturate(180%) blur(24px);backdrop-filter:saturate(180%) blur(24px);border-top:0;box-shadow:0 calc(-1 * var(--hairline)) 0 var(--separator)}
.nav-in{max-width:640px;padding-inline:max(6px,env(safe-area-inset-left,0px)) max(6px,env(safe-area-inset-right,0px))}
.tab{font-size:var(--t-caption2);font-weight:600;letter-spacing:.01em;color:var(--label-3);gap:3px;padding:8px 2px 7px;transition:color .2s}
.tab svg{width:25px;height:25px;transition:transform .3s var(--spring)}
.tab[aria-current="page"]{color:var(--tint)}
.tab[aria-current="page"] svg{transform:translateY(-1px)}
.tab:active svg{transform:scale(.86)}
.tab.fab{padding-top:0}
.tab.fab .fab-c{width:58px;height:58px;margin-top:-22px;border:0;outline:0;box-shadow:0 10px 24px -8px rgba(5,15,40,.6),0 0 0 1px rgba(255,255,255,.12) inset;background:radial-gradient(120% 120% at 30% 20%,var(--sky-c),var(--sky-b) 45%,var(--sky-a))}
.tab.fab .fab-c svg{color:var(--gold);width:28px;height:28px}

/* Empty states */
.empty-art{display:grid;justify-items:center;gap:10px;text-align:center;padding:28px 24px;color:var(--label-2)}
.empty-art svg.art{width:120px;height:96px;color:var(--tint)}
.empty-art h2{font-family:var(--serif);font-weight:500;font-size:var(--t-title3);color:var(--label)}
.empty-art p{font-size:var(--t-subhead);max-width:32ch}

/* Section headings inside pages */
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:26px calc(var(--gutter) + 2px) 10px}
.section-head h2{font-family:var(--ui);font-size:var(--t-title3);font-weight:700;letter-spacing:-.02em}
.section-head .link,.section-head button{font-size:var(--t-subhead)}

/* ---------------------------------------------------------------------------
   4. Accessibility preferences
   ------------------------------------------------------------------------ */
@media (prefers-reduced-transparency:reduce){.nav,.is-scrolled .vhead,.toast,.glass{background:var(--bg-elev)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}}
@media (prefers-contrast:more){:root{--separator:var(--control-line);--label-3:var(--label-2)}.card,.zcard{box-shadow:0 0 0 1px var(--control-line)}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}

/* ---------------------------------------------------------------------------
   5. Carried-over fixes
   ------------------------------------------------------------------------ */
.rd-state.on,.plan-row .rd-state.on{color:#fff;background:var(--turquoise)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .rd-state.on{color:#06201D}}
:root[data-theme="dark"] .rd-state.on{color:#06201D}
.tracker-settings{padding:12px 16px}
#reader .counter-pronunciation,#counter .counter-pronunciation{color:#E3E9F5}
#reader .counter-pronunciation input,#counter .counter-pronunciation input{accent-color:var(--gold)}
.tour-focus{border-color:var(--gold)}
.c-count{font-family:var(--ui-rounded);font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.c-top{padding-inline:max(8px,env(safe-area-inset-left,0px)) max(8px,env(safe-area-inset-right,0px))}

/* ---------------------------------------------------------------------------
   6. Living sky art (Today hero, welcome, sessions)
   ------------------------------------------------------------------------ */
.sky-art{position:absolute;inset:0;pointer-events:none;overflow:hidden;border-radius:inherit}
.sky-stars{position:absolute;inset:-10% -10% 30%;opacity:var(--sky-stars);background-image:
  radial-gradient(1.2px 1.2px at 12% 22%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 28% 64%,#fff 50%,transparent 51%),
  radial-gradient(1.6px 1.6px at 46% 14%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 62% 40%,#fff 50%,transparent 51%),
  radial-gradient(1.3px 1.3px at 78% 70%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 90% 28%,#fff 50%,transparent 51%),
  radial-gradient(1.4px 1.4px at 6% 80%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 36% 36%,rgba(255,255,255,.8) 50%,transparent 51%);
  background-size:220px 160px;animation:skyTwinkle 6s ease-in-out infinite alternate;transition:opacity 1.2s var(--ease)}
.sky-haze{position:absolute;inset:auto 0 0;height:55%;background:linear-gradient(to top,var(--sky-haze),transparent)}
.sky-orb{position:absolute;left:var(--sky-orb-x);top:var(--sky-orb-y);width:var(--sky-orb-size);height:var(--sky-orb-size);border-radius:50%;transform:translate(-50%,-50%);
  background:radial-gradient(circle at 40% 38%,#fff,var(--sky-orb) 62%);box-shadow:0 0 34px 10px var(--sky-glow),0 0 80px 22px color-mix(in srgb,var(--sky-glow) 45%,transparent);transition:left 1.6s var(--ease),top 1.6s var(--ease),width 1.2s,height 1.2s}
[data-sky="isha"] .sky-orb,[data-sky="night"] .sky-orb,:root:not([data-sky]) .sky-orb{display:none}
[data-sky="isha"] .today-date .moon,[data-sky="night"] .today-date .moon,[data-sky="dawn"] .today-date .moon{filter:drop-shadow(0 0 22px rgba(246,236,203,.55))}
.sky-rosette{position:absolute;width:320px;height:320px;inset-inline-end:-96px;top:-84px;color:rgba(255,255,255,.085);animation:skyTurn 240s linear infinite}
@keyframes skyTwinkle{from{filter:brightness(.75)}to{filter:brightness(1.15)}}
@keyframes skyTurn{to{transform:rotate(1turn)}}

/* ---------------------------------------------------------------------------
   7. Today
   ------------------------------------------------------------------------ */
.today-page{padding-bottom:8px}
.today-hero,#main .today-page>.sky{position:relative;isolation:isolate;overflow:hidden;color:#fff;margin:0;padding:calc(env(safe-area-inset-top,0px) + 10px) 20px 44px;border-radius:0 0 32px 32px;
  background:linear-gradient(180deg,var(--sky-a) 0%,var(--sky-b) 62%,var(--sky-c) 100%);box-shadow:0 18px 40px -26px var(--sky-a);transition:background 1.2s var(--ease)}
.today-hero>*:not(.sky-art){position:relative}
.today-hero .sky-bar{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:48px}
.today-hero .sky-hello{font-family:var(--ui);font-size:var(--t-headline);font-weight:600;letter-spacing:-.01em;color:rgba(255,255,255,.92);margin:0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.today-hero .sky-actions{display:flex;align-items:center;gap:6px}
.today-hero .sky-actions .icon,.today-hero .user-switch{color:#fff;background:rgba(255,255,255,.14);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:0}
.today-hero .sky-actions .icon{width:40px;height:40px}
.today-hero .sky-actions .icon svg{width:20px;height:20px}
.today-hero .user-switch{min-height:36px;padding:6px 12px;border-radius:var(--r-pill);font-size:var(--t-footnote);font-weight:600;line-height:1.15}
.today-date{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:4px 16px;width:100%;margin-top:18px;padding:0;border:0;background:none;color:inherit;text-align:start}
.today-day{font-family:var(--serif);font-weight:400;font-size:clamp(3.6rem,17vw,4.6rem);line-height:.9;letter-spacing:-.04em;color:#FBE7B5;text-shadow:0 2px 24px rgba(0,0,0,.25);font-variant-numeric:lining-nums}
.today-date-copy{display:grid;gap:4px;min-width:0}
.today-hero .today-hijri{font-family:var(--serif);font-size:var(--t-title2);font-weight:500;line-height:1.15;letter-spacing:-.01em;color:#fff}
.today-hero .h-sub{font-size:var(--t-subhead);font-weight:500;color:rgba(255,255,255,.82);opacity:1}
.today-date .moon{filter:drop-shadow(0 0 18px rgba(246,236,203,.4));align-self:start}
.today-date .moon-dark{fill:rgba(255,255,255,.12)}.today-date .moon-lit{fill:#FBEFCB}
.hero-prayer{margin-top:18px}
.hero-prayer .prayer-card{margin:0;border:0;border-radius:var(--r-m);background:rgba(255,255,255,.13);-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.hero-prayer .prayer-next{color:#fff;min-height:56px;padding:10px 14px;background:none;border:0}
.hero-prayer .prayer-next b{color:#fff;font-size:var(--t-headline)}
.hero-prayer .prayer-next small,.hero-prayer .prayer-next-label,.hero-prayer .prayer-countdown{color:rgba(255,255,255,.82)}
.hero-prayer .prayer-clock{color:#FBE7B5;font-variant-numeric:tabular-nums}
.hero-prayer .link{color:#FBE7B5}

/* Summary: Activity-style ring */
#main .today-page>.today-summary,.today-summary{position:relative;z-index:2;margin:-26px var(--gutter) 0;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:16px;padding:16px 18px;border:0;border-radius:var(--r-l);background:var(--bg-elev);box-shadow:var(--elev-2);color:var(--label);text-align:start;--ring-track:color-mix(in srgb,var(--label) 9%,transparent);transition:transform .2s var(--ease)}
.today-summary:active{transform:scale(.985)}
.summary-ring{position:relative;display:grid;place-items:center}
.summary-ring-n{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--ui-rounded);font-weight:700;font-size:var(--t-subhead);font-variant-numeric:tabular-nums;color:var(--label)}
.goal-met .summary-ring{filter:drop-shadow(0 0 14px rgba(246,210,122,.55))}
.summary-copy{display:grid;grid-template-columns:auto auto;align-items:end;justify-content:start;gap:6px 20px;min-width:0}
.today-summary .metric{display:flex;align-items:baseline;gap:6px;min-width:0}
.today-summary .metric b{font-family:var(--ui-rounded);font-size:var(--t-title1);font-weight:700;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.today-summary .metric span{font-size:var(--t-footnote);color:var(--label-3);font-weight:500}
.today-summary .metric-streak{align-items:center;gap:4px}
.today-summary .metric-streak svg{width:18px;height:18px;color:#E8892E}
.today-summary .metric-streak b{font-size:var(--t-title3)}
.today-summary .week{grid-column:1/-1;display:flex;gap:6px;margin-top:6px}
.today-summary .wkd{display:grid;justify-items:center;gap:3px;font-size:var(--t-caption2);font-weight:600;color:var(--label-3);min-width:22px}
.today-summary .wkd i{width:9px;height:9px;border-radius:50%;background:color-mix(in srgb,var(--label) 12%,transparent)}
.today-summary .wkd.on i{background:linear-gradient(160deg,#F6D27A,#E79A3B)}
.today-summary .wkd.now{color:var(--label)}
.today-summary .wkd.now i{box-shadow:0 0 0 2px var(--bg-elev),0 0 0 3.5px var(--gold-ink)}

/* Today sections */
.today-page>.card,.today-page>section.card,#prayerTrackerToday,.today-page>div>.card{margin-top:14px}
.today-section{margin-top:22px}
.today-section-heading{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 calc(var(--gutter) + 4px) 10px}
.today-section-heading h2{font-family:var(--ui);font-size:var(--t-title3);font-weight:700;letter-spacing:-.02em}
.today-section-heading .link{font-size:var(--t-subhead);font-weight:600;color:var(--tint)}

/* Continue card */
#main .resume-card,.resume-card{margin-top:14px;border:0;border-radius:var(--r-l);overflow:hidden;background:var(--bg-elev);box-shadow:var(--elev-1)}
.resume-main{display:flex;align-items:center;gap:14px;width:100%;padding:16px 16px 14px 18px;border:0;background:none;color:inherit;text-align:start}
.resume-info{flex:1;min-width:0;display:grid;gap:3px}
.resume-info strong{font-size:var(--t-footnote);font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--label-3)}
:lang(ar) .resume-info strong{text-transform:none}
.resume-name{font-family:var(--serif);font-size:var(--t-title3);font-weight:500;color:var(--label);line-height:1.2}
.resume-count{font-size:var(--t-footnote);color:var(--label-2);font-variant-numeric:tabular-nums}
.resume-track{display:block;height:6px;border-radius:3px;background:color-mix(in srgb,var(--label) 9%,transparent);overflow:hidden;margin-top:6px}
.resume-track i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--sky-b),var(--sky-c))}
.resume-main .play{flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;color:#FBE7B5;background:radial-gradient(120% 120% at 30% 20%,var(--sky-c),var(--sky-b) 45%,var(--sky-a));box-shadow:0 10px 22px -10px var(--sky-a)}
.resume-main .play svg{width:22px;height:22px}
.resume-clear{display:block;width:100%;min-height:44px;border:0;border-top:var(--hairline) solid var(--separator);background:none;color:var(--label-3);font-size:var(--t-footnote);font-weight:600}
.resume-empty .resume-main{min-height:72px}
.resume-empty .resume-info strong{font-family:var(--serif);text-transform:none;letter-spacing:-.01em;font-size:var(--t-title3);font-weight:500;color:var(--label)}

/* Quick start carousel */
.today-favourites{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:2px var(--gutter) 10px;scroll-padding-inline:var(--gutter)}
.today-favourites::-webkit-scrollbar{display:none}
.today-zikr{position:relative;flex:none;width:164px;min-height:150px;display:flex;flex-direction:column;justify-content:space-between;gap:10px;padding:16px 14px 14px;border:0;border-radius:var(--r-l);scroll-snap-align:start;text-align:start;color:var(--label);
  background:linear-gradient(165deg,color-mix(in srgb,var(--sky-c) 16%,var(--bg-elev)),var(--bg-elev) 70%);box-shadow:var(--elev-1);transition:transform .2s var(--ease)}
.today-zikr:active{transform:scale(.97)}
.today-zikr-ar{font-family:var(--ar);font-size:1.45rem;line-height:1.55;color:var(--label);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-align:right}
.today-zikr-copy{display:grid;gap:2px;padding-inline-end:36px}
.today-zikr-copy b{font-size:var(--t-subhead);font-weight:650;line-height:1.25}
.today-zikr-copy small{font-size:var(--t-caption);color:var(--label-3);font-variant-numeric:tabular-nums}
.today-zikr .play{position:absolute;inset-inline-end:12px;bottom:12px;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--tint-soft);color:var(--tint)}
.today-zikr .play svg{width:15px;height:15px}

/* Plans and collapsed extras on Today */
.today-plan-list,.today-page details .card{overflow:hidden}
.today-extra{margin:10px var(--gutter) 0;border-radius:var(--r-l);background:var(--bg-elev);box-shadow:var(--elev-1);overflow:hidden}
.today-extra>summary{padding:6px 16px;font-weight:600;font-size:var(--t-callout)}
.today-extra>summary>svg:first-child{width:20px;height:20px;color:var(--tint);flex:none}
.today-extra>summary>span{flex:1}
.today-extra>summary>svg:last-of-type{display:none}
.today-extra>.card,.today-extra .today-extra-content{margin:0;box-shadow:none;border-radius:0;border-top:var(--hairline) solid var(--separator)}
.today-extra .today-extra-content{padding:8px 0 12px}
.today-extra .today-extra-content>.card{margin:8px 12px}
.charity-pattern img{content-visibility:auto}

/* Tradition prompt and settings */
.trad-ask{margin-top:14px;padding:18px;display:grid;gap:14px;background:linear-gradient(160deg,var(--bg-tint),var(--bg-elev) 70%)}
.trad-ask h2{font-family:var(--serif);font-weight:500;font-size:var(--t-title3);letter-spacing:-.01em}
.trad-ask p{font-size:var(--t-subhead);color:var(--label-2);margin-top:4px}
.trad-ask-actions{display:flex;flex-wrap:wrap;gap:8px}
.trad-setting,.goal-setting{flex-wrap:wrap}
.trad-setting>span,.goal-setting>span{flex:1 1 12rem}

/* Daily goal */
.goal-celebration{position:relative;display:grid;justify-items:center;gap:8px;text-align:center;padding:8px 0 4px;--ring-track:color-mix(in srgb,var(--label) 9%,transparent)}
.goal-celebration .goal-ring{position:relative;z-index:1;filter:drop-shadow(0 0 22px rgba(246,210,122,.6));animation:skinPop .7s var(--spring) both}
.goal-celebration-n{font-family:var(--ui-rounded);font-weight:700;font-size:var(--t-large);font-variant-numeric:tabular-nums;margin-top:4px}
.goal-celebration p:not(.goal-celebration-n){color:var(--label-2);max-width:30ch}
.goal-celebration .btn{margin-top:10px}
.goal-bloom{position:absolute;top:-20px;left:50%;width:260px;height:260px;margin-left:-130px;border-radius:50%;background:radial-gradient(circle,rgba(246,210,122,.35),transparent 65%);animation:skinPop .9s var(--ease) both}
.stats-goal{display:flex;align-items:center;gap:10px;margin:12px var(--gutter) 0;padding:12px 16px;border-radius:var(--r-m);background:var(--gold-soft);color:var(--label);font-weight:600;font-size:var(--t-subhead)}
.stats-goal svg{width:20px;height:20px;color:var(--gold-ink);flex:none}
@keyframes skinPop{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}
[dir="rtl"] .sky-orb{left:auto;right:var(--sky-orb-x);transform:translate(50%,-50%)}
[dir="rtl"] .sky-rosette{animation-direction:reverse}

/* ---------------------------------------------------------------------------
   8. Library
   ------------------------------------------------------------------------ */
.library-filters{display:grid;gap:8px;margin:0 0 6px}
.library-tabs .chip-btn[aria-pressed="true"]{background:var(--label);color:var(--bg-elev)}
.library-cats .chip-btn{min-height:32px;padding:5px 12px;font-size:var(--t-footnote);background:transparent;box-shadow:inset 0 0 0 1px var(--separator)}
.library-cats .chip-btn[aria-pressed="true"]{background:var(--tint-soft);color:var(--tint);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--tint) 40%,transparent)}
.library-create-actions{display:flex;gap:8px;margin:6px var(--gutter) 4px}
.library-bookmarks{margin:2px calc(var(--gutter) + 2px) 4px}
.zlist,#main .zlist{display:grid;gap:12px;padding:6px 0 4px;margin:0}
#main .zcard.lib-card,.lib-card{position:relative;display:flex;align-items:stretch;margin:0 var(--gutter);padding:0;border:0;border-radius:var(--r-l);overflow:hidden;background:var(--bg-elev);box-shadow:var(--elev-1);transition:transform .2s var(--ease)}
.lib-card:active{transform:scale(.985)}
.lib-card .zc-main{flex:1;min-width:0;display:grid;gap:10px;padding:16px 4px 14px 18px;border:0;background:none;color:inherit;text-align:start}
.lib-ar,#main .lib-card .zc-ar{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:0;font-family:var(--ar);font-size:1.6rem;line-height:1.75;color:var(--label);text-align:right;white-space:normal}
.lib-ar-title{font-family:'Amiri Quran',var(--ar);font-size:1.9rem;-webkit-line-clamp:1;color:var(--gold-ink)}
.lib-summary{color:var(--label-2);font-size:var(--t-subhead);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lib-meta{display:flex;align-items:baseline;justify-content:space-between;gap:10px;min-width:0}
.lib-card .zc-name{font-weight:650;font-size:var(--t-callout);color:var(--label);letter-spacing:-.01em;line-height:1.3;min-width:0}
.lib-goal{flex:none;font-size:var(--t-caption);font-weight:600;color:var(--label-3);font-variant-numeric:tabular-nums}
.zc-gloss{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;margin-top:2px;font-size:var(--t-caption);line-height:1.35;color:var(--label-2);text-align:start}
.lib-progress{display:block;height:4px;border-radius:2px;background:color-mix(in srgb,var(--label) 8%,transparent);overflow:hidden}
.lib-progress i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#F6D27A,#E79A3B)}
.lib-actions{display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:4px;padding:8px 10px 12px 2px}
.lib-actions .icon{width:40px;height:40px;color:var(--label-3)}
.lib-actions .icon svg{width:20px;height:20px}
.lib-actions .pin[aria-pressed="true"]{color:#E2A23B}
.lib-play{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:0;color:var(--on-tint);background:var(--tint);box-shadow:0 8px 18px -10px var(--tint);transition:transform .18s var(--spring)}
.lib-play:active{transform:scale(.9)}
.lib-play svg{width:18px;height:18px}
.lib-reading{background:linear-gradient(160deg,var(--gold-soft),var(--bg-elev) 65%)}
.lib-reading .lib-play{background:var(--gold-ink);color:var(--bg-elev)}
.library-foot{margin:18px calc(var(--gutter) + 4px);color:var(--label-3);font-size:var(--t-footnote);text-align:center}
.foot-note.empty-art{margin:12px var(--gutter);padding:28px 20px;border-radius:var(--r-l);background:var(--bg-elev);box-shadow:var(--elev-1)}
@media (min-width:900px){.app{max-width:960px}.zlist.library-results{grid-template-columns:repeat(2,minmax(0,1fr));margin-inline:var(--gutter)}.zlist.library-results>.lib-card{margin:0}.nav-in{max-width:720px}}

/* ---------------------------------------------------------------------------
   9. Counter and reader
   ------------------------------------------------------------------------ */
/* The box-shadow chin repeats the last sky colour below the layer: iOS home-screen apps can end a fixed inset:0 layer above the screen bottom. */
.counter.skybg,.reader.skybg{background-color:var(--sky1);background-image:linear-gradient(180deg,var(--sky1) 0%,var(--sky2) 70%,color-mix(in srgb,var(--sky2) 70%,#000) 100%);box-shadow:0 0 0 100vmax color-mix(in srgb,var(--sky2) 70%,#000)}
.counter[data-skin="classic"]{--sky1:var(--sky-a);--sky2:var(--sky-b)}
.counter .c-title,.reader .c-title{font-family:var(--serif);font-weight:500;font-size:var(--t-headline);letter-spacing:-.01em}
.counter .c-sub,.reader .c-sub{font-size:var(--t-caption);opacity:.78;font-variant-numeric:tabular-nums}
.counter .c-top .icon,.reader .r-top .icon,.reader .r-top button{background:rgba(255,255,255,.1);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.counter .c-foot,#counter .c-foot{border-top:0;background:linear-gradient(to top,rgba(0,0,0,.18),transparent);gap:10px}
.counter .c-foot .pill,.counter .c-foot button{min-height:44px;padding:8px 16px;border:0;border-radius:var(--r-pill);background:rgba(255,255,255,.12);color:#fff;font-weight:600;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);transition:transform .18s var(--spring),background-color .2s}
.counter .c-foot .pill:active{transform:scale(.94);background:rgba(255,255,255,.2)}
.counter .c-count{font-weight:300;letter-spacing:-.04em;text-shadow:0 4px 30px rgba(0,0,0,.25)}
.counter .c-of{letter-spacing:.02em;opacity:.8}
.counter .c-ar{text-shadow:0 2px 16px rgba(0,0,0,.25)}
.counter .steps li{border:0;background:rgba(255,255,255,.1);color:rgba(255,255,255,.85)}
.counter .steps li.cur{background:var(--gold);color:#2A1D05}
.counter .steps li.ok{background:rgba(255,255,255,.18);color:#fff}
/* Completion bloom */
#cStage.celebrate::before{content:"";position:absolute;left:50%;top:50%;width:min(130vw,720px);aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%) scale(.2);pointer-events:none;
  background:radial-gradient(circle,color-mix(in srgb,var(--gold) 55%,transparent) 0%,color-mix(in srgb,var(--gold) 18%,transparent) 32%,transparent 62%);animation:bloom 1.4s var(--ease) forwards}
#cStage.celebrate .bead{animation:beadShimmer 1.2s var(--ease) both}
@keyframes bloom{0%{opacity:0;transform:translate(-50%,-50%) scale(.2)}30%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(1.15)}}
@keyframes beadShimmer{40%{filter:brightness(1.6) drop-shadow(0 0 6px var(--gold))}}
.c-completion-copy b{font-family:var(--serif);font-weight:500;color:#FBE7B5}
/* Reader */
.reader .r-foot{border-top:0;background:var(--glass);background:rgba(4,10,28,.55);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
.reader .vblock{border-bottom:0;position:relative;padding-bottom:22px}
.reader .vblock+.vblock::before{content:"";display:block;width:56px;height:10px;margin:0 auto 18px;opacity:.35;background:
  radial-gradient(circle,var(--gold) 2px,transparent 2.5px) center/10px 10px no-repeat,linear-gradient(var(--gold),var(--gold)) left center/20px 1px no-repeat,linear-gradient(var(--gold),var(--gold)) right center/20px 1px no-repeat}
.reader .ayah-n{color:var(--gold)}
.reader .r-title{color:#FBE7B5}
#rTr[aria-pressed="true"]{background:rgba(243,212,147,.22);color:var(--gold)}
.reader{--sky1:#050B20;--sky2:#0F1B42}
.reader .verse-actions button,.reader .verse-bookmark,.reader [data-verse-save]{border:0;background:rgba(255,255,255,.08);color:rgba(255,255,255,.75);border-radius:10px}
.reader .verse-actions button[aria-pressed="true"],.reader .verse-bookmark[aria-pressed="true"]{color:var(--gold);background:rgba(243,212,147,.16)}
.reader #rDone,.reader .r-foot .btn.primary{background:linear-gradient(160deg,#F6D98E,#E2AE4B);color:#2A1D05;box-shadow:0 10px 24px -12px rgba(226,174,75,.8)}
.reader .vtr{color:rgba(255,255,255,.72);font-size:var(--t-subhead)}

/* ---------------------------------------------------------------------------
   10. Settings
   ------------------------------------------------------------------------ */
.settings-profile-actions{display:grid;gap:10px;margin:28px var(--gutter) 8px;padding:0}
.settings-profile-actions .btn{width:100%;min-height:50px;border-radius:var(--r-m)}
.settings-profile-actions .btn.danger{background:var(--bg-elev);box-shadow:var(--elev-1)}
.settings-disclosure{margin-top:12px}
.settings-disclosure>summary{padding:6px 18px;font-weight:500}

/* ---------------------------------------------------------------------------
   11. Welcome
   ------------------------------------------------------------------------ */
.ob-hero{position:relative;isolation:isolate;overflow:hidden;color:#fff;min-height:min(62vh,520px);display:flex;align-items:flex-end;padding:calc(env(safe-area-inset-top,0px) + 28px) 24px 64px;border-radius:0 0 36px 36px;background:linear-gradient(180deg,var(--sky-a) 0%,var(--sky-b) 58%,var(--sky-c) 100%);text-align:start}
.ob-hero .sky-rosette{width:420px;height:420px;inset-inline-end:-140px;top:-90px;color:rgba(255,255,255,.09)}
.ob-hero-in{position:relative;display:grid;gap:12px;max-width:520px;margin:0 auto;width:100%}
.ob-mark .moon{filter:drop-shadow(0 0 26px rgba(246,236,203,.55))}
.ob-mark .moon-dark{fill:rgba(255,255,255,.12)}.ob-mark .moon-lit{fill:#FBEFCB}
.ob-hero h1{font-family:var(--serif);font-weight:400;font-size:clamp(2.2rem,9vw,3rem);line-height:1.05;letter-spacing:-.03em;color:#FBE7B5;margin:6px 0 0}
.ob-tagline{font-size:var(--t-callout);color:rgba(255,255,255,.86);max-width:34ch}
.ob-points{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:10px}
.ob-points li{display:flex;align-items:center;gap:12px;font-size:var(--t-subhead);font-weight:500;color:rgba(255,255,255,.92)}
.ob-point-ic{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:11px;background:rgba(255,255,255,.14);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.ob-point-ic svg{width:19px;height:19px;color:#FBE7B5}
.ob-body{position:relative;z-index:1;max-width:520px;margin:-34px auto 0;padding:0 var(--gutter) 24px;display:grid;gap:14px}
.ob-body>.flabel{display:none}
.ob-languages{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:4px 2px 2px;order:2}
.ob-languages::-webkit-scrollbar{display:none}
.ob-language{flex:none;display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:6px 14px 6px 8px;border:0;border-radius:var(--r-pill);background:var(--bg-elev);color:var(--label-2);box-shadow:var(--elev-1);font-weight:600;font-size:var(--t-subhead)}
.ob-lang-code{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--bg-sunk);font-size:var(--t-caption2);font-weight:700;letter-spacing:.02em;color:var(--label-2)}
.ob-language[aria-pressed="true"]{background:var(--label);color:var(--bg-elev)}
.ob-language[aria-pressed="true"] .ob-lang-code{background:rgba(255,255,255,.18);color:inherit}
.ob-card,#main .ob-card{order:1;margin:0;padding:20px;border-radius:var(--r-xl);box-shadow:var(--elev-2);display:grid;gap:12px}
.ob-card .btn{width:100%;min-height:52px;font-size:var(--t-headline)}
.ob-card .ob-guest{background:transparent;color:var(--tint);text-decoration:none}
.ob-note{font-size:var(--t-footnote);color:var(--label-3);text-align:center}
.ob-guest-top{display:flex;align-items:center;gap:8px}
.ob-guest-top h2{font-family:var(--serif);font-weight:500;font-size:var(--t-title2)}
.ob-back{width:auto!important;min-height:36px!important;font-size:var(--t-subhead)!important}

/* Install */
.install-guide{display:grid;gap:14px;text-align:center;justify-items:center}
.install-hero img{border-radius:18px;box-shadow:var(--elev-2)}
.install-guide p{color:var(--label-2);max-width:34ch}
.install-steps{list-style:none;margin:0;padding:0;display:grid;gap:10px;width:100%;text-align:start;counter-reset:s}
.install-steps li{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--r-m);background:var(--bg-sunk);font-weight:500}
.install-step-ic{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:10px;background:var(--tint);color:var(--on-tint)}
.install-step-ic svg{width:18px;height:18px}
.install-card{display:flex;gap:14px;align-items:flex-start;margin-top:14px;padding:16px}
.install-card img{border-radius:12px;flex:none}
.install-card h2{font-size:var(--t-headline);font-weight:700}
.install-card p{font-size:var(--t-subhead);color:var(--label-2);margin-top:2px}
.install-card-actions{display:flex;gap:8px;margin-top:10px}
.move-card [hidden]{display:none!important}
.move-card .move-status{margin-top:6px;font-weight:600;color:var(--label)}
.move-card-actions{flex-wrap:wrap}
.install-row{width:100%;border:0;background:none;color:inherit;text-align:start;justify-content:space-between}
.install-row>svg{width:18px;height:18px;opacity:.5;flex:none}

/* ---------------------------------------------------------------------------
   12. Zikr details sheet
   ------------------------------------------------------------------------ */
.feature-details .detail-reading,.feature-details .feature-reading{border:0;border-radius:var(--r-l);padding:20px 18px;background:linear-gradient(165deg,var(--bg-tint),var(--bg-elev) 75%);box-shadow:inset 0 0 0 1px var(--separator);max-height:none}
.feature-details .feature-ar{font-family:'Amiri Quran',var(--ar);font-size:calc(var(--ar-size,2rem) * .95);line-height:2;color:var(--label);text-align:right}
.feature-details .feature-transliteration{color:var(--label-2);font-size:var(--t-subhead);line-height:1.55;margin-top:6px}
.feature-details>.link,.feature-details a.link{display:inline-flex;align-items:center;gap:6px;margin-top:4px;padding:6px 12px;border-radius:var(--r-pill);background:var(--bg-sunk);font-size:var(--t-footnote);font-weight:600;text-decoration:none;color:var(--tint)}
.feature-details .muted{font-size:var(--t-subhead);color:var(--label-2)}
.sh-foot{border-top:0;padding-top:12px;background:linear-gradient(to top,var(--bg-elev) 70%,transparent)}
.detail-goal .badge,.sh-foot .badge{background:var(--gold-soft);color:var(--gold-ink);border:0;border-radius:var(--r-pill);padding:4px 10px;font-weight:700;font-size:var(--t-caption)}
.feature-details [data-detail-start]{min-height:52px;font-size:var(--t-headline)}
.counter-pronunciation{font-size:var(--t-subhead)}

/* ---------------------------------------------------------------------------
   13. Stats, plans, calendar
   ------------------------------------------------------------------------ */
.stats-hero,#main .stats-hero{position:relative;overflow:hidden;margin:6px var(--gutter) 0;border:0;border-radius:var(--r-xl);padding:20px;color:#fff;background:linear-gradient(160deg,var(--sky-a),var(--sky-b) 70%,var(--sky-c) 140%);box-shadow:var(--elev-2)}
.stats-hero h2{font-family:var(--serif);font-weight:500;font-size:var(--t-title1);color:#fff}
.stats-hero .stats-active,.stats-hero .stats-streak,.stats-hero .stats-streak span{color:rgba(255,255,255,.85)}
.stats-hero .stats-streak b{color:#FBE7B5}
.stats-hero .stats-week-ring circle{stroke:rgba(255,255,255,.25)}
.stats-hero .stats-week-ring circle:last-of-type,.stats-hero .stats-week-ring .on{stroke:#FBE7B5}
.stats-hero .stats-week-ring text,.stats-hero .stats-week-ring{color:#fff;fill:#fff}
.stats-hero .stats-week-days span{color:rgba(255,255,255,.8)}
.stats-hero .stats-week-days i{border-color:rgba(255,255,255,.4);color:#fff}
.stats-hero .stats-week-days .active i{background:rgba(251,231,181,.25);border-color:#FBE7B5;color:#FBE7B5}
.stats-totals,#main .stats-totals{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:12px var(--gutter) 0;padding:0;border:0;background:none;box-shadow:none}
.stats-totals>div{display:grid;gap:2px;padding:14px;border-radius:var(--r-m);background:var(--bg-elev);box-shadow:var(--elev-1)}
.stats-totals b{font-family:var(--ui-rounded);font-size:var(--t-title2);font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.stats-totals span{font-size:var(--t-caption);color:var(--label-3);font-weight:600}
.stats-panel,#main .stats-panel{margin:12px var(--gutter) 0;border:0;border-radius:var(--r-l);background:var(--bg-elev);box-shadow:var(--elev-1)}
.chart rect{fill:color-mix(in srgb,var(--tint) 55%,transparent);rx:2px}
.chart rect.t{fill:#E79A3B}
.tpl,#main .tpl{border:0;border-radius:var(--r-l);background:var(--bg-elev);box-shadow:var(--elev-1);min-height:72px;transition:transform .2s var(--ease)}
.tpl:active{transform:scale(.985)}
.tp-ic,#main .tp-ic{border-radius:14px;background:linear-gradient(160deg,var(--gold-soft),color-mix(in srgb,var(--gold) 40%,var(--bg-elev)));color:var(--gold-ink);font-family:var(--ui-rounded);font-weight:800}
.tplist,#main .tplist{display:grid;gap:10px;padding:0 var(--gutter);margin:0}
.plan,#main .plan{border:0;border-radius:var(--r-l);box-shadow:var(--elev-1)}
.cal,#main .cal{border-radius:var(--r-xl);padding:14px 10px 12px}
.cal-nav h2,.cal-nav b{font-family:var(--serif);font-weight:500}
.cell{border-radius:12px;transition:background-color .15s,transform .15s var(--ease)}
.cell:active{transform:scale(.92)}
.cell.sel,#main .cell.sel{background:var(--tint);color:var(--on-tint)}
.cell.today:not(.sel){box-shadow:inset 0 0 0 2px var(--tint)}
.cell.sp::after{background:var(--gold-ink)}
.day-card,.special,#main .special{border:0;border-radius:var(--r-l)}

/* ---------------------------------------------------------------------------
   14. Qibla and prayer sheet
   ------------------------------------------------------------------------ */
.qibla-place{border:0;border-radius:var(--r-m);background:var(--bg-sunk)}
.qibla-dial,#main .qibla-dial{width:min(260px,76vw);border:0;box-shadow:var(--elev-2),inset 0 0 0 1px var(--separator);
  background:
   radial-gradient(circle,var(--bg-elev) 0 58%,transparent 58.5%),
   repeating-conic-gradient(from -.75deg,var(--label-2) 0 1.5deg,transparent 1.5deg 30deg),
   radial-gradient(circle,var(--bg-elev) 0 64%,transparent 64.5%),
   repeating-conic-gradient(from -.4deg,color-mix(in srgb,var(--label) 35%,transparent) 0 .8deg,transparent .8deg 6deg),
   radial-gradient(circle,var(--bg-tint),var(--bg-elev))}
.qibla-north{top:18px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:var(--t-caption2);color:var(--danger)}
.qibla-needle::before{border-bottom-color:var(--gold-ink)}
.qibla-needle::after{top:-30px;left:calc(50% - 11px);width:22px;height:22px;border-radius:4px;background:#111;box-shadow:inset 0 5px 0 -2px #E2B65A,0 2px 6px rgba(0,0,0,.35)}
.qibla-centre{background:var(--gold-ink);box-shadow:0 0 0 4px var(--bg-elev)}
.qibla-heading strong,[data-q-angle]{font-family:var(--ui-rounded);font-size:var(--t-large);font-weight:700;font-variant-numeric:tabular-nums}
.prayer-list,#prayerView .prayer-list{border:0;border-radius:var(--r-l);background:var(--bg-elev);box-shadow:var(--elev-1);overflow:hidden}
.prayer-list .next-prayer,#prayerView .next-prayer{background:linear-gradient(90deg,color-mix(in srgb,var(--sky-c) 30%,var(--bg-elev)),var(--bg-elev));font-weight:700}
.prayer-card,#main .prayer-card{border:0}
/* Labels wrap at word boundaries (older rule allowed mid-word breaks in buttons). */
.chip-btn,.today-zikr-copy b,.lib-card .zc-name,.srow>span,.tab span{overflow-wrap:normal;word-break:normal;-webkit-hyphens:auto;hyphens:auto}

/* ---------------------------------------------------------------------------
   15. Touch targets: the layout contract requires 44 × 44 for standalone actions
   ------------------------------------------------------------------------ */
.btn.sm,#main .btn.sm,.sheet-panel .btn.sm{min-height:44px}
.seg button{min-height:44px}
.chip-btn{position:relative}
.chip-btn::after{content:"";position:absolute;inset:-6px -2px}
.library-cats .chip-btn::after{inset:-7px -2px}
.today-hero .sky-actions .icon,.lib-actions .icon{width:44px;height:44px}
.today-hero .user-switch{min-height:44px}
.rec-main{min-height:44px}
.sh-head .icon,.form-head .form-close{position:relative}
.sh-head .icon::after,.form-head .form-close::after{content:"";position:absolute;inset:-5px}
.chip-row{padding-block:8px}

/* ---------------------------------------------------------------------------
   16. Settings rows, iOS style: icon · label (· caption) · trailing control
   ------------------------------------------------------------------------ */
#main .srow{display:flex;flex-wrap:wrap;align-items:center;column-gap:12px;row-gap:10px;min-height:52px;padding:10px 16px}
#main .srow>span:first-child{flex:1 1 9rem;min-width:0;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px;row-gap:1px;align-items:center;font-weight:500;font-size:var(--t-body);line-height:1.3}
#main .srow>span:first-child:not(:has(>.row-icon)){grid-template-columns:minmax(0,1fr)}
#main .srow>span:first-child>.row-icon{grid-column:1;grid-row:1 / span 2;align-self:center;width:30px;height:30px}
#main .srow>span:first-child>small{grid-column:-2;margin:0;color:var(--label-3);font-size:var(--t-footnote);font-weight:400;line-height:1.35}
.row-icon{display:inline-grid;place-items:center}
.row-icon svg{width:18px;height:18px;display:block}
/* Compact trailing values sit on the same line, right-aligned */
#main .srow>input.txt,#main .srow>select.inp,#main .srow>.language-select{flex:0 1 46%;min-width:0;min-height:40px;margin-inline-start:auto;padding:6px 4px;border:0;border-radius:var(--r-xs);background:transparent;color:var(--label-2);font-size:var(--t-body);text-align:end;text-align-last:end;box-shadow:none}
#main .srow>input.txt:focus,#main .srow>select.inp:focus{background:var(--bg-sunk);outline:0;box-shadow:0 0 0 2px var(--tint)}
#main .srow>select.inp,#main .srow>.language-select{appearance:none;-webkit-appearance:none;padding-inline-end:22px;background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%238A93A6' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 2px center/12px 12px}
[dir="rtl"] #main .srow>select.inp,[dir="rtl"] #main .srow>.language-select{background-position:left 2px center;padding-inline-end:22px}
#main .srow>.switch{margin-inline-start:auto;flex:none}
/* Wide controls (segmented choices) drop to their own line, aligned with the label text */
#main .srow>.seg{flex:1 1 100%;display:flex;width:auto;margin:0}
#main .srow:has(>span:first-child>.row-icon)>.seg{margin-inline-start:42px}
#main .srow>.seg button{flex:1 1 0;padding-inline:6px}
#main .srow>.btn,#main .srow>div:not(.seg){margin-inline-start:auto}
/* Tasbih row */
#main .srow.tasbih-row{flex-wrap:nowrap}
#main .srow.tasbih-row>span:not(.tasbih-preview){flex:1 1 auto;display:grid;grid-template-columns:minmax(0,1fr);gap:2px}
#main .srow.tasbih-row b{font-weight:500;font-size:var(--t-body)}
#main .srow.tasbih-row small{color:var(--label-3);font-size:var(--t-footnote)}
/* Disclosure rows inside cards */
#main .settings-advanced>summary,#main .settings-disclosure>summary{padding:12px 16px;font-weight:500;font-size:var(--t-body)}
#main .settings-advanced{border-top:var(--hairline) solid var(--separator)}
/* Section cards from modules match the grouped look */
#main .prayer-settings,#main .tracker-settings,#main .feature-reminder,#main .offline-summary,#main .cloud-account-entry{padding:14px 16px;gap:10px}
#main .prayer-settings b,#main .tracker-settings b{font-weight:600}
#main .srow>.seg button{white-space:nowrap;flex:1 1 auto}

/* Small phones (≤ 360 px): the summary card keeps the week row inside the card */
.summary-copy{min-width:0}
.today-summary .week{justify-content:space-between;gap:2px;min-width:0}
.today-summary .metric{flex-wrap:wrap}
@media (max-width:360px){
 #main .today-page>.today-summary,.today-summary{gap:12px;padding:14px}
 .summary-ring svg{width:70px;height:70px}
 .summary-copy{grid-template-columns:auto;gap:4px}
 .today-summary .metric b{font-size:var(--t-title2)}
 .today-summary .wkd{min-width:0}
 .adh-now-copy b{font-size:var(--t-headline)}
}
/* Counter background choice: the design's own sky (default) or the living sky */
.counter[data-bg="sky"]{--sky1:var(--sky-a);--sky2:var(--sky-b)}
.tasbih-bg{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;padding:12px 14px;border-radius:var(--r-m);background:var(--bg-sunk)}
.tasbih-bg>span{font-weight:600;font-size:var(--t-subhead)}
.tasbih-bg .seg{background:var(--bg-elev)}
.tasbih-bg .seg button{min-height:44px;white-space:nowrap}
.tasbih-bg .seg button[aria-pressed="true"]{background:var(--label);color:var(--bg-elev)}
/* Tasbih row in Settings: the preview stays a circle, text stacks beside it */
#main .srow.tasbih-row>.tasbih-preview{flex:0 0 48px;width:48px;height:48px;display:grid;place-items:center;grid-template-columns:none;border-radius:50%;box-shadow:0 4px 12px -6px rgba(0,0,0,.45),inset 0 0 0 1px rgba(255,255,255,.06)}
#main .srow.tasbih-row>.tasbih-preview svg{width:44px;height:44px}
#main .srow.tasbih-row{gap:14px;padding:12px 16px}
#main .srow.tasbih-row>span:not(.tasbih-preview) b{font-weight:600;font-size:var(--t-body);line-height:1.25}
#main .srow.tasbih-row>span:not(.tasbih-preview) small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#main .srow.tasbih-row>svg{flex:none;width:18px;height:18px;color:var(--label-3)}

/* ---------------------------------------------------------------------------
   17. Statistics
   ------------------------------------------------------------------------ */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.stats-page{padding-bottom:12px}
#main .stats-hero{display:grid;gap:16px;padding:22px 20px 18px;background:linear-gradient(155deg,var(--sky-a),var(--sky-b) 62%,var(--sky-c) 135%)}
#main .stats-hero::after{content:"";position:absolute;inset:auto -40px -60px auto;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(251,231,181,.22),transparent 65%);pointer-events:none}
.stats-hero-top{display:flex;align-items:center;justify-content:space-between;gap:16px}
.stats-hero-copy h2{margin:0}
.stats-hero .stats-active{margin-top:4px;font-size:var(--t-subhead)}
.stats-week-ring{position:relative;flex:none;width:88px;height:88px}
.stats-week-ring svg{width:100%;height:100%}
.stats-ring-track{fill:none;stroke:rgba(255,255,255,.18);stroke-width:8}
.stats-ring-fill{fill:none;stroke:#FBE7B5;stroke-width:8;stroke-linecap:round;filter:drop-shadow(0 0 6px rgba(251,231,181,.45));animation:ringDraw 1.1s var(--ease) both}
@keyframes ringDraw{from{stroke-dashoffset:var(--c)}to{stroke-dashoffset:var(--o)}}
.stats-week-ring>span{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--ui-rounded);font-size:var(--t-subhead);color:rgba(255,255,255,.8)}
.stats-week-ring>span b{font-size:var(--t-title2);color:#fff;font-weight:700}
.stats-week-days{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.stats-week-days span{display:grid;justify-items:center;gap:5px}
.stats-week-days i{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;font-style:normal;font-size:.8rem;font-weight:700;border:1.5px solid rgba(255,255,255,.35);color:#2A1D05}
.stats-week-days .active i{background:linear-gradient(160deg,#FBE7B5,#E8B54C);border-color:transparent}
.stats-week-days .today i{box-shadow:0 0 0 3px rgba(251,231,181,.35)}
.stats-week-days small{font-size:var(--t-caption2);font-weight:600;color:rgba(255,255,255,.75)}
.stats-streak{display:flex;flex-wrap:wrap;gap:8px}
.stats-badge{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:var(--r-pill);background:rgba(255,255,255,.14);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-size:var(--t-footnote);color:rgba(255,255,255,.88)}
.stats-badge em{display:inline-grid;width:18px;height:18px;color:#FBE7B5}
.stats-badge em svg{width:18px;height:18px}
.stats-badge b{color:#fff}
#main .stats-totals>div{position:relative;overflow:hidden}
#main .stats-totals>div::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,var(--sky-b),var(--sky-c))}
.stats-highlights{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:10px var(--gutter) 0}
.stats-kpi{display:grid;gap:2px;align-content:start;padding:12px;border-radius:var(--r-m);background:var(--bg-elev);box-shadow:var(--elev-1);min-width:0}
.stats-kpi span{font-size:var(--t-caption2);font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--label-3)}
:lang(ar) .stats-kpi span{text-transform:none;letter-spacing:0}
.stats-kpi b{font-family:var(--ui-rounded);font-size:var(--t-title3);font-weight:700;font-variant-numeric:tabular-nums}
.stats-kpi small{font-size:var(--t-caption);color:var(--label-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stats-kpi.up b{color:var(--success)}.stats-kpi.down b{color:var(--danger)}
.stats-section-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.stats-section-head h2{font-size:var(--t-headline);font-weight:700}
.stats-section-head b{font-family:var(--ui-rounded);font-size:var(--t-title3);color:var(--tint);font-variant-numeric:tabular-nums}
.stats-chart-panel .chart rect{fill:color-mix(in srgb,var(--tint) 45%,var(--bg-sunk));transform-box:fill-box;transform-origin:bottom;animation:barGrow .7s var(--ease) both;animation-delay:calc(var(--i) * 18ms)}
.stats-chart-panel .chart rect.met{fill:#E8B54C}
.stats-chart-panel .chart rect.t{fill:var(--tint)}
.stats-goal-line{stroke:#E8B54C;stroke-width:1.2;stroke-dasharray:4 4;fill:none;vector-effect:non-scaling-stroke}
@keyframes barGrow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.stats-date-axis{display:flex;justify-content:space-between}
.stats-ranking{display:grid;grid-template-columns:28px 1fr;gap:12px;align-items:center;padding:10px 0}
.stats-ranking+.stats-ranking{border-top:var(--hairline) solid var(--separator)}
.stats-rank{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--bg-sunk);font-family:var(--ui-rounded);font-weight:700;font-size:var(--t-footnote);color:var(--label-2)}
.stats-ranking.p1 .stats-rank{background:linear-gradient(160deg,#FBE7B5,#E2AE4B);color:#2A1D05}
.stats-ranking.p2 .stats-rank{background:linear-gradient(160deg,#EEF1F6,#B9C1CF);color:#1C2333}
.stats-ranking.p3 .stats-rank{background:linear-gradient(160deg,#F3D2B4,#C98B5A);color:#2E1A0B}
.stats-ranking-copy{display:grid;gap:5px;min-width:0}
.stats-ranking-copy>div:first-child{display:flex;justify-content:space-between;gap:10px}
.stats-ranking-copy b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stats-ranking-copy span{font-family:var(--ui-rounded);font-weight:700;font-variant-numeric:tabular-nums;color:var(--label-2)}
.stats-ranking-copy small{font-size:var(--t-caption);color:var(--label-3)}
.stats-ranking-track{height:6px;border-radius:3px;background:var(--bg-sunk);overflow:hidden}
.stats-ranking-track i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--sky-b),var(--sky-c));transform-origin:left;animation:barWide .8s var(--ease) both;animation-delay:calc(var(--i) * 60ms)}
[dir="rtl"] .stats-ranking-track i{transform-origin:right}
@keyframes barWide{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.stats-history .heat{display:grid;grid-template-rows:repeat(7,1fr);grid-auto-flow:column;gap:3px;margin-top:12px}
.stats-history .heat i{aspect-ratio:1;border-radius:3px;background:var(--bg-sunk)}
.stats-history .heat i.l1{background:color-mix(in srgb,var(--turquoise) 30%,var(--bg-sunk))}
.stats-history .heat i.l2{background:color-mix(in srgb,var(--turquoise) 55%,var(--bg-sunk))}
.stats-history .heat i.l3{background:color-mix(in srgb,var(--turquoise) 80%,var(--bg-sunk))}
.stats-history .heat i.l4{background:var(--turquoise)}
.stats-history .heat i.now{box-shadow:0 0 0 2px var(--gold-ink)}
.heat-legend{display:flex;align-items:center;justify-content:flex-end;gap:4px;margin-top:8px;font-size:var(--t-caption);color:var(--label-3)}
.heat-legend i{width:12px;height:12px;border-radius:3px;background:var(--bg-sunk)}
.heat-legend .l1{background:color-mix(in srgb,var(--turquoise) 30%,var(--bg-sunk))}.heat-legend .l2{background:color-mix(in srgb,var(--turquoise) 55%,var(--bg-sunk))}.heat-legend .l3{background:color-mix(in srgb,var(--turquoise) 80%,var(--bg-sunk))}.heat-legend .l4{background:var(--turquoise)}
@media (max-width:360px){.stats-highlights{grid-template-columns:1fr 1fr}}
.stats-week-ring>span{display:flex;align-items:baseline;justify-content:center;align-content:center;gap:1px;white-space:nowrap}
.stats-week-ring>span{position:absolute;inset:0;margin:auto;height:max-content}
#main .stats-hero h2{font-size:var(--t-title2);line-height:1.15}
#main .stats-totals b{font-size:clamp(1.05rem,5.2vw,var(--t-title2));white-space:nowrap}
.stats-ranking-copy>div:first-child b{flex:1;min-width:0}
.stats-ranking-copy>div:first-child span{flex:none}

/* ---------------------------------------------------------------------------
   18. Inner surfaces: forms, choices, steppers, action sheets, finders
   ------------------------------------------------------------------------ */
/* Form header: sticky glass bar inside full-screen forms and sheets */
.flow-form>.form-head,.discovery-view>.form-head{position:sticky;top:-6px;z-index:3;margin:-6px -20px 14px;padding:10px 20px 10px;background:var(--glass);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);box-shadow:0 var(--hairline) 0 var(--separator)}
.form-head{display:flex;align-items:center;gap:10px}
.form-head h2{flex:1;min-width:0}
.form-back{display:inline-flex;align-items:center;gap:2px;min-height:44px;padding:0 6px 0 0;border:0;background:none;color:var(--tint);font-weight:600;font-size:var(--t-callout)}
.form-back::before{content:"";width:9px;height:9px;border:solid currentColor;border-width:0 0 2px 2px;transform:rotate(45deg);margin-inline-end:4px}
[dir="rtl"] .form-back::before{transform:rotate(-135deg)}
.flabel{display:block;margin:0 0 6px;font-size:var(--t-footnote);font-weight:600;color:var(--label-2)}
.field{margin-bottom:16px}
.field .small.muted,.field>small{display:block;margin-top:6px;font-size:var(--t-caption);color:var(--label-3)}
textarea.inp{min-height:96px;resize:vertical;line-height:1.5}
/* Choice chips (plan type, weekdays) */
.pchips{gap:8px}
.pchip span,#main .pchip span,.sheet-panel .pchip span{display:inline-flex;align-items:center;min-height:40px;padding:8px 14px;border:0;border-radius:var(--r-pill);background:var(--bg-elev);box-shadow:inset 0 0 0 1px var(--separator-strong);color:var(--label-2);font-weight:600;font-size:var(--t-subhead);transition:background-color .2s,color .2s}
.pchip input:checked+span{background:var(--label);color:var(--bg-elev);box-shadow:none}
.pchip span{position:relative}.pchip span::after{content:"";position:absolute;inset:-2px 0}
/* Stepper: round − and + around a large value */
.stepper,.sheet-panel .stepper{display:flex;align-items:center;gap:10px;border:0;background:none;padding:0}
.stepper button{flex:none;width:44px;height:44px;border:0;border-radius:50%;background:var(--bg-sunk);color:var(--label);font-size:1.4rem;font-weight:500;line-height:1;transition:transform .15s var(--spring),background-color .2s}
.stepper button:active{transform:scale(.9);background:color-mix(in srgb,var(--tint) 15%,var(--bg-sunk))}
.stepper input,.stepper .inp{flex:1;min-width:0;text-align:center;font-family:var(--ui-rounded);font-size:var(--t-title2);font-weight:700;font-variant-numeric:tabular-nums;background:var(--bg-sunk);border:0;border-radius:var(--r-s);min-height:44px}
/* Quick values */
.qchips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.qchips button,.sheet-panel .qchips button{position:relative;min-height:36px;min-width:52px;padding:6px 12px;border:0;border-radius:var(--r-pill);background:var(--tint-soft);color:var(--tint);font-weight:700;font-size:var(--t-footnote);font-variant-numeric:tabular-nums}
.qchips button::after{content:"";position:absolute;inset:-4px 0}
.qchips button[aria-pressed="true"]{background:var(--tint);color:var(--on-tint)}
.swrow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-radius:var(--r-m);background:var(--bg-sunk)}
.sh-foot{position:sticky;bottom:calc(-20px - env(safe-area-inset-bottom,0px));margin:16px -20px calc(-20px - env(safe-area-inset-bottom,0px));padding:12px 20px calc(16px + env(safe-area-inset-bottom,0px));background:var(--glass);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);box-shadow:0 calc(-1 * var(--hairline)) 0 var(--separator)}
.sh-foot .summary{font-size:var(--t-footnote);color:var(--label-2);margin-bottom:8px}
/* Action sheets: grouped rows with icon tiles */
.acts{list-style:none;margin:0;padding:0;border-radius:var(--r-l);background:var(--bg-sunk);overflow:hidden}
.acts li+li{box-shadow:inset 0 var(--hairline) 0 var(--separator)}
.acts li button{display:flex;align-items:center;gap:14px;width:100%;min-height:54px;padding:8px 14px;border:0;border-radius:0;background:none;color:var(--label);font-weight:500;font-size:var(--t-body);text-align:start}
.acts li button:active{background:color-mix(in srgb,var(--label) 6%,transparent)}
.acts li button>svg:first-child{flex:none;width:32px;height:32px;padding:6px;border-radius:9px;background:var(--tint);color:#fff}
.acts li button.danger{color:var(--danger)}
.acts li button.danger>svg:first-child{background:var(--danger)}
.acts li button>span:not(.switch){flex:1}
/* Quick find and Help: grouped lists */
.find-shortcuts .discovery-section>div,.find-shortcuts .discovery-section{display:block}
.discovery-section{margin-top:14px}
.discovery-section h3{margin:0 4px 8px;font-size:var(--t-footnote);font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--label-3)}
:lang(ar) .discovery-section h3{text-transform:none;letter-spacing:0}
.discovery-result,.find-shortcuts .discovery-result{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:50px;margin:0;padding:10px 14px;border:0;border-radius:0;background:var(--bg-sunk);color:var(--label);font-weight:500;text-align:start;box-shadow:none}
.discovery-result:first-of-type{border-radius:var(--r-m) var(--r-m) 0 0}
.discovery-result:last-of-type{border-radius:0 0 var(--r-m) var(--r-m)}
.discovery-result:only-of-type{border-radius:var(--r-m)}
.discovery-result+.discovery-result{box-shadow:inset 0 var(--hairline) 0 var(--separator)}
.discovery-result>svg{flex:none;width:16px;height:16px;opacity:.45}
.find-shortcuts .discovery-section{display:grid!important;grid-template-columns:1fr;gap:0}
.help-article{margin:0;border:0;border-radius:0;background:var(--bg-sunk)}
.help-article:first-of-type{border-radius:var(--r-m) var(--r-m) 0 0}
.help-article:last-of-type{border-radius:0 0 var(--r-m) var(--r-m)}
.help-article+.help-article{box-shadow:inset 0 var(--hairline) 0 var(--separator)}
.help-article>summary{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:50px;padding:10px 14px;font-weight:500}
.help-article>summary::after{content:"";flex:none;width:8px;height:8px;border:solid var(--label-3);border-width:0 2px 2px 0;transform:rotate(45deg);transition:transform .25s var(--ease)}
.help-article[open]>summary::after{transform:rotate(-135deg)}
.help-article>:not(summary){padding:0 14px 14px;color:var(--label-2);font-size:var(--t-subhead)}
.discovery-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0}
/* Routine builder */
.routine-build-stages{list-style:none;margin:0 0 12px;display:flex;gap:2px;padding:2px;border-radius:10px;background:var(--bg-sunk)}
.routine-build-stages>*{border:0!important;box-shadow:none;flex:1;min-height:36px;display:grid;place-items:center;border:0;border-radius:8px;background:transparent;color:var(--label-3);font-weight:600;font-size:var(--t-footnote)}
.routine-build-stages>[aria-current="step"],.routine-build-stages>[aria-current="true"]{background:var(--bg-elev);color:var(--label);box-shadow:0 2px 6px rgba(0,0,0,.1)}
.routine-pick-row,.routine-result{border:0;border-radius:0;background:var(--bg-sunk)}
.routine-pick-row+.routine-pick-row{box-shadow:inset 0 var(--hairline) 0 var(--separator)}
.routine-results{border-radius:var(--r-m);overflow:hidden}
.routine-form-actions{gap:10px}
/* Prayer setup source switch */
.prayer-source{display:flex;gap:2px;padding:2px;border-radius:10px;background:var(--bg-sunk)}
.prayer-source .btn,.prayer-source button{flex:1;min-height:40px;border:0;border-radius:8px;background:transparent;color:var(--label-2);box-shadow:none;font-size:var(--t-subhead)}
.prayer-source .btn.primary,.prayer-source button[aria-pressed="true"]{background:var(--bg-elev);color:var(--label);box-shadow:0 2px 6px rgba(0,0,0,.1)}
/* Plans section heading and practice player */
#main .sec{margin:22px calc(var(--gutter) + 4px) 10px!important}
#main .sec h2{font-family:var(--ui);font-size:var(--t-title3);font-weight:700;letter-spacing:-.02em}
.practice-disclosure>summary{display:flex;align-items:center;justify-content:space-between}
.practice-disclosure>summary::after{content:""!important;flex:none;width:8px;height:8px;border:solid var(--label-3);border-width:0 2px 2px 0;transform:rotate(45deg);transition:transform .25s var(--ease)}
.practice-disclosure[open]>summary::after{transform:rotate(-135deg)}
/* Checkbox lists (tracker setup, routine picker) */
input[type="checkbox"]{accent-color:var(--tint);width:20px;height:20px}

/* Never let decorative layers widen the page on small phones (iPhone mini, SE). */
html,body{overflow-x:clip;max-width:100%}
.today-hero,.ob-hero,.stats-hero,.adh-set-card,.adh-now-main,.counter,.reader,.adhkar-session{overflow:hidden}
.counter.is-free .c-text{display:none}

/* ---------------------------------------------------------------------------
   19. Scrolling: no rubber-band of the whole app, no scroll chaining from panels
   ------------------------------------------------------------------------ */
html,body{overscroll-behavior-y:none}
.sheet-panel,.c-stage,.r-body,.adh-stage,.counter-reading-scroll,.detail-reading,.routine-results,.feature-reading{overscroll-behavior:contain}
.sheet{overscroll-behavior:contain;touch-action:pan-y}

/* Full-screen forms and sign-in on phones: the panel starts under the status bar, so the header carries the
   safe-area inset and stays pinned while the form scrolls. Back is always on screen. */
@media (max-width:719px){
 .sheet-panel.form-panel,.sheet-panel.auth-panel{padding-top:calc(env(safe-area-inset-top,0px) + 6px)}
 .flow-form>.form-head,.discovery-view>.form-head{top:calc(-6px - env(safe-area-inset-top,0px));margin-top:calc(-6px - env(safe-area-inset-top,0px));padding-top:calc(env(safe-area-inset-top,0px) + 10px)}
}
/* Bottom sheets: the title row with Close stays visible however long the sheet is. */
.sheet-panel:not(.form-panel):not(.auth-panel)>.sh-head{position:sticky;top:-6px;z-index:3;margin:-6px -20px 12px;padding:10px 20px 10px;background:var(--bg-elev);border-radius:var(--r-xl) var(--r-xl) 0 0}
.sheet-panel:not(.form-panel):not(.auth-panel)::before{position:relative;z-index:4}

/* ---------------------------------------------------------------------------
   20. Settings 2: identity header, navigation rows, footnotes, danger row
   ------------------------------------------------------------------------ */
.vhead h1:focus:not(:focus-visible),#main h1[tabindex="-1"]:focus:not(:focus-visible),#main h2[tabindex="-1"]:focus:not(:focus-visible){outline:none}
#main .srow[hidden]{display:none}
.set-hero{position:relative;isolation:isolate;overflow:hidden;margin:6px var(--gutter) 6px;padding:20px 18px 16px;border-radius:var(--r-xl);color:#fff;
 background:radial-gradient(120% 90% at 100% 0%,rgba(243,212,147,.28),transparent 55%),linear-gradient(160deg,var(--sky-a) 0%,var(--sky-b) 70%,var(--sky-c) 100%);box-shadow:var(--elev-2)}
.set-hero-art{position:absolute;inset-inline-end:-70px;top:-70px;width:220px;height:220px;opacity:.16;z-index:-1;pointer-events:none}
.set-hero-art svg{width:100%;height:100%}
.set-hero-id{display:flex;align-items:center;gap:14px;min-width:0}
.set-avatar{flex:none;display:grid;place-items:center;width:58px;height:58px;border-radius:50%;font-family:var(--serif);font-size:1.45rem;font-weight:600;letter-spacing:.02em;color:#1A2440;
 background:linear-gradient(150deg,#FBE7B5,#E2B862);box-shadow:0 0 0 3px rgba(255,255,255,.22),0 8px 20px -8px rgba(0,0,0,.55)}
.set-hero-copy{min-width:0;display:grid;gap:3px}
.set-hero-copy b{font-family:var(--serif);font-weight:500;font-size:var(--t-title2);line-height:1.15;overflow-wrap:anywhere}
.set-hero-copy small{font-size:var(--t-footnote);color:rgba(255,255,255,.78)}
.set-hero-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:16px 0 0}
.set-hero-stats>div{display:flex;flex-direction:column-reverse;gap:2px;padding:10px 10px 9px;border-radius:var(--r-m);background:rgba(255,255,255,.13);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);min-width:0}
.set-hero-stats dd{margin:0;font-family:var(--rounded,var(--ui));font-size:var(--t-title3,1.2rem);font-weight:700;font-variant-numeric:tabular-nums;line-height:1.1;overflow:hidden;text-overflow:ellipsis}
.set-hero-stats dt{font-size:var(--t-caption,.72rem);color:rgba(255,255,255,.76);line-height:1.25;overflow-wrap:anywhere}
/* Account entry right under the header: compact, same grouped look */
#main #settingsAccount .cloud-account-entry .cloud-eyebrow{display:none}
#main #settingsAccount .cloud-account-entry h2{font-family:var(--ui);font-size:var(--t-headline,1.05rem);font-weight:700;margin:0 0 2px}
#main #settingsAccount .cloud-account-entry .cloud-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
#main #settingsAccount .cloud-account-entry .cloud-actions .btn{min-height:44px;width:100%}
/* Navigation rows: whole row is the button, chevron at the end, hairline between rows */
#main .settings-links{padding:0;overflow:hidden}
#main .settings-links .nav-row,#main .nav-row{width:100%;border:0;background:transparent;color:inherit;text-align:start;flex-wrap:nowrap;cursor:pointer;font:inherit;border-radius:0}
#main .nav-row>svg{flex:none;width:16px;height:16px;color:var(--label-3);margin-inline-start:auto}
[dir="rtl"] #main .nav-row>svg{transform:scaleX(-1)}
#main .nav-row:active{background:var(--bg-sunk)}
@media (hover:hover){#main .nav-row:hover{background:color-mix(in srgb,var(--bg-sunk) 60%,transparent)}}
#main .settings-links>.srow+.srow,#main .settings-help-rows>.srow+.srow,#main .settings-links>*+.srow{box-shadow:inset 0 var(--hairline) 0 var(--separator)}
#main .settings-links .srow>span:first-child{font-weight:500}
#main .row-label{font-style:normal}
#main .danger-row,#main .danger-row>span:first-child{color:var(--danger,#C8324B)}
.row-icon.red{background:linear-gradient(160deg,#F2626F,#C02A3C)}
.group-foot{margin:8px calc(var(--gutter) + 18px) 0;color:var(--label-3);font-size:var(--t-footnote);line-height:1.4}
#main .settings-profile-actions{margin-top:28px}
/* Module-built rows */
#main .prayer-settings.settings-links,#main .tracker-settings.settings-links,#main .feature-reminder.settings-links{display:block;padding:0}
#main .tracker-show{cursor:pointer}
#main .row-switch{appearance:none;-webkit-appearance:none;position:relative;flex:none;width:51px;height:31px;margin:0 0 0 auto;border-radius:31px;background:var(--bg-sunk);box-shadow:inset 0 0 0 1px var(--separator);transition:background .2s var(--ease);cursor:pointer}
#main .row-switch::after{content:"";position:absolute;top:2px;inset-inline-start:2px;width:27px;height:27px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.25);transition:transform .22s var(--spring)}
#main .row-switch:checked{background:#34C759;box-shadow:none}
#main .row-switch:checked::after{transform:translateX(20px)}
[dir="rtl"] #main .row-switch:checked::after{transform:translateX(-20px)}
#main .row-switch:focus-visible{outline:3px solid var(--tint);outline-offset:2px}
#main .feature-reminder .reminder-prefs,#main .feature-reminder .reminder-retry,#main .offline-summary .offline-note,#main .offline-summary .offline-sync{margin:0;padding:0 16px 12px 58px;font-size:var(--t-footnote)}
[dir="rtl"] #main .feature-reminder .reminder-prefs,[dir="rtl"] #main .offline-summary .offline-note,[dir="rtl"] #main .offline-summary .offline-sync{padding:0 58px 12px 16px}
#main .feature-reminder .reminder-retry{min-height:44px}
#main .offline-summary{padding:0}
#main .offline-row{flex-wrap:wrap}
#main .offline-row .btn{margin-inline-start:42px}
#main .offline-row .offline-state{font-weight:600}
#main .offline-row>span:first-child{flex-basis:100%}
#main .offline-row .offline-state{hyphens:manual}
#main .offline-row small{hyphens:manual}
#main .install-row:disabled{opacity:1;cursor:default}
#main .install-row:disabled>svg{color:#34C759}
/* Hijri offset lives inside the Tradition card as a disclosure row */
#main .trad-card-calendar{border-top:0;box-shadow:inset 0 var(--hairline) 0 var(--separator);border-radius:0;margin:0;background:transparent}
#main .trad-card-calendar>summary{display:flex;align-items:center;gap:12px;min-height:52px}
#main .trad-card-calendar>summary{justify-content:flex-start;text-align:start}
#main .trad-card-calendar>summary>.row-label{flex:1;min-width:0}
#main .trad-card-calendar>summary>.row-icon{width:30px;height:30px}

/* ---------------------------------------------------------------------------
   21. Profile 2: living-sky cover, round avatar with a gold ring, metric tiles, grouped rows
   ------------------------------------------------------------------------ */
#main .cloud-profile-page{display:flex;flex-direction:column;gap:14px;padding:4px var(--gutter) 8px}
#main .cloud-profile-page>.card,#main .cloud-profile-page>.cloud-surface{margin:0;width:100%}
#main .cloud-profile-hero{border:0;border-radius:var(--r-xl);background:var(--bg-elev);box-shadow:var(--elev-1);overflow:hidden}
#main .cloud-cover{position:relative;isolation:isolate;overflow:hidden;height:118px;background:linear-gradient(160deg,var(--sky-a) 0%,var(--sky-b) 65%,var(--sky-c) 100%)}
#main .cloud-cover .sky-art{position:absolute;inset:0}
#main .cloud-cover .sky-rosette{width:240px;height:240px;inset-inline-end:-60px;top:-70px;opacity:.22}
#main .cloud-profile-identity{margin-top:-46px;padding:0 18px;align-items:flex-end}
#main .cloud-profile-identity>.cloud-avatar,#main .cloud-profile-identity>.feature-avatar,#main .cloud-profile-identity>span:first-child{width:92px;height:92px;border-radius:50%;border:4px solid var(--bg-elev);box-shadow:0 0 0 2px rgba(226,184,98,.9),0 10px 24px -10px rgba(0,0,0,.55)}
#main .cloud-profile-identity .cloud-avatar{background:linear-gradient(150deg,#FBE7B5,#E2B862);color:#1A2440;font-size:2rem}
#main .cloud-identity-actions{padding-bottom:6px;display:flex;gap:8px;flex-wrap:wrap}
#main .cloud-identity-actions .btn{min-height:40px;padding:8px 16px;font-size:var(--t-subhead);font-weight:600;background:var(--bg-sunk);color:var(--label)}
#main .cloud-identity-actions .btn.primary{background:var(--tint);color:var(--on-tint)}
#main .cloud-profile-copy{padding:12px 18px 16px}
#main .cloud-profile-copy h2{font-size:var(--t-title1,1.75rem);font-weight:500;letter-spacing:-.015em}
#main .cloud-handle{margin-top:2px;color:var(--label-3);font-size:var(--t-subhead);font-weight:500}
#main .cloud-bio{margin-top:10px;color:var(--label-2);font-size:var(--t-body);line-height:1.45}
#main .cloud-profile-metrics{border-top:0;padding:0 14px 16px;gap:8px}
#main .cloud-profile-metrics>*{border:0!important;border-radius:var(--r-m);background:var(--bg-sunk);min-height:64px;padding:10px 6px}
#main .cloud-profile-metrics>button{cursor:pointer}
#main .cloud-profile-metrics>button:active{background:var(--tint-soft)}
#main .cloud-profile-metrics b{font-family:var(--rounded,var(--ui));font-size:var(--t-title2);font-weight:700;color:var(--label)}
#main .cloud-profile-metrics span{font-size:var(--t-caption,.72rem);color:var(--label-3);font-weight:500}
/* Sections */
#main .cloud-profile-page .cloud-surface{border:0;border-radius:var(--r-l,18px);background:var(--bg-elev);box-shadow:var(--elev-1);padding:16px}
#main .cloud-profile-page .cloud-section-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
#main .cloud-profile-page .cloud-section-head h2,#main .cloud-personal-zikrs>summary h2{font-family:var(--ui);font-size:var(--t-headline,1.05rem);font-weight:700;letter-spacing:0;margin:0}
#main .cloud-pill{display:inline-flex;align-items:center;min-height:24px;padding:2px 10px;border-radius:var(--r-pill);background:var(--bg-sunk);color:var(--label-2);font-size:var(--t-caption,.72rem);font-weight:600;white-space:nowrap}
#main .cloud-pill.active{background:color-mix(in srgb,#34C759 16%,transparent);color:#1E8E45}
:root[data-theme="dark"] #main .cloud-pill.active{color:#5BD681}
#main .cloud-preference{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:var(--hairline) solid var(--separator)}
#main .cloud-preference>span{flex:1;min-width:0;display:grid;gap:2px}
#main .cloud-preference small{color:var(--label-3);font-size:var(--t-footnote)}
#main .cloud-privacy-note{margin-top:8px;color:var(--label-3);font-size:var(--t-footnote);line-height:1.4}
#main .cloud-progress-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#main .cloud-progress-grid>div{display:flex;flex-direction:column;gap:2px;padding:14px;border-radius:var(--r-m);background:linear-gradient(160deg,var(--bg-tint),var(--bg-sunk))}
#main .cloud-progress-grid b{font-family:var(--rounded,var(--ui));font-size:var(--t-title1,1.75rem);font-weight:700;font-variant-numeric:tabular-nums;color:var(--label)}
#main .cloud-progress-grid span{font-size:var(--t-footnote);color:var(--label-3)}
#main .cloud-footnote{display:flex;align-items:center;gap:6px;margin-top:8px;color:var(--label-3);font-size:var(--t-footnote)}
#main .cloud-personal-zikrs{padding:0}
#main .cloud-personal-zikrs>summary{display:flex;align-items:center;gap:10px;min-height:56px;padding:12px 16px;list-style:none;cursor:pointer}
#main .cloud-personal-zikrs>summary::-webkit-details-marker{display:none}
#main .cloud-personal-zikrs>summary h2{flex:1}
#main .cloud-personal-zikrs .cloud-disclosure-icon svg{width:16px;height:16px;color:var(--label-3);transition:transform .2s var(--ease)}
#main .cloud-personal-zikrs[open] .cloud-disclosure-icon svg{transform:rotate(90deg)}
#main .cloud-personal-zikrs-body{padding:0 16px 16px}
#main .cloud-zikr-card{border:0;border-radius:var(--r-m);background:var(--bg-sunk);padding:12px 14px;margin-top:8px}
#main .cloud-zikr-card h3{font-size:var(--t-body);font-weight:600}
#main .cloud-private-account{padding:16px 0 0}
#main .cloud-private-account>.cloud-section-head,#main .cloud-private-account>p{padding:0 16px}
#main .profile-account-rows{margin-top:12px;border-top:var(--hairline) solid var(--separator)}
#main .profile-links .srow,#main .profile-account-rows .srow{min-height:52px}
#main .cloud-email{font-weight:600;color:var(--label);overflow-wrap:anywhere}
#main .cloud-status-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#34C759;flex:none}
#main .cloud-status-dot.pending{background:#E7B64D}
#main .cloud-profile-page .cloud-surface.cloud-personal-zikrs{padding:0}
#main .cloud-profile-page .cloud-surface.cloud-private-account{padding:16px 0 0}
#main .cloud-personal-zikrs .cloud-disclosure-icon{transform:none;display:inline-grid}

/* ---------------------------------------------------------------------------
   22. Add personal zikr: search first (Zikry library + Qur'an online), then the form
   ------------------------------------------------------------------------ */
.zikr-finder .finder-intro{margin:0 0 12px}
.finder-search{position:relative;display:flex;align-items:center}
.finder-search>svg{position:absolute;inset-inline-start:14px;width:18px;height:18px;color:var(--label-3);pointer-events:none}
.finder-search input{width:100%;min-height:48px;padding-inline-start:42px!important;border-radius:var(--r-m);background:var(--bg-sunk);border:0;box-shadow:none;font-size:var(--t-body)}
.finder-search input:focus{outline:0;box-shadow:0 0 0 2px var(--tint)}
.finder-create-card{margin:12px 0 4px;padding:0;overflow:hidden;border-radius:var(--r-l,18px);background:var(--bg-elev);box-shadow:inset 0 0 0 1px var(--separator)}
.finder-create-card .nav-row{display:flex;align-items:center;gap:12px;width:100%;min-height:58px;padding:10px 14px;border:0;background:transparent;color:inherit;text-align:start;font:inherit;cursor:pointer}
.finder-create-card .nav-row>span:first-child{flex:1;min-width:0;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px;align-items:center;font-weight:600}
.finder-create-card .nav-row .row-icon{grid-row:1 / span 2;width:30px;height:30px;border-radius:8px;color:#fff}
.finder-create-card .nav-row small{grid-column:2;color:var(--label-3);font-weight:400;font-size:var(--t-footnote)}
.finder-create-card .nav-row>svg{width:16px;height:16px;color:var(--label-3);flex:none}
[dir="rtl"] .finder-create-card .nav-row>svg{transform:scaleX(-1)}
.finder-group{display:flex;align-items:center;gap:8px;margin:20px 2px 8px;font-family:var(--ui);font-size:var(--t-footnote);font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--label-3)}
.finder-group svg{width:16px;height:16px}
.finder-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.finder-item{display:flex;align-items:center;gap:12px;padding:12px 12px 12px 14px;border-radius:var(--r-m);background:var(--bg-elev);box-shadow:inset 0 0 0 1px var(--separator)}
.finder-copy{flex:1;min-width:0;display:grid;gap:4px}
.finder-copy b{font-weight:600;font-size:var(--t-subhead);line-height:1.3;overflow-wrap:anywhere}
.finder-ar{margin:0;font-family:var(--ar);font-size:1.15rem;line-height:1.9;color:var(--label);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.finder-copy small{color:var(--label-3);font-size:var(--t-footnote);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.finder-actions{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.finder-actions .btn{display:inline-flex;align-items:center;gap:4px;min-height:36px;padding:6px 12px;font-size:var(--t-footnote);font-weight:700;white-space:nowrap}
.finder-actions .btn svg{width:14px;height:14px}
.finder-actions .finder-count{width:36px;height:36px;min-width:36px;border-radius:50%;background:var(--tint-soft);color:var(--tint)}
.finder-actions .finder-count svg{width:14px;height:14px}
.finder-status{margin:4px 2px;color:var(--label-3);font-size:var(--t-footnote)}
.finder-credit{margin:10px 2px 0;color:var(--label-3);font-size:var(--t-caption,.72rem)}
.finder-source{display:flex;gap:8px;align-items:flex-start;margin:0 0 12px;padding:10px 12px;border-radius:var(--r-m);background:var(--bg-tint);color:var(--label-2);font-size:var(--t-footnote);line-height:1.4}
.finder-source svg{flex:none;width:16px;height:16px;margin-top:1px;color:var(--tint)}
.set-hero-stats dd{overflow:visible;text-overflow:clip;white-space:normal;overflow-wrap:anywhere}

/* ---------------------------------------------------------------------------
   23. Share cards: preview, style choice and actions
   ------------------------------------------------------------------------ */
.share-btn{flex:none;width:40px;height:40px;min-width:40px;border-radius:50%;background:var(--bg-sunk);color:var(--tint)}
.share-btn svg{width:18px;height:18px}
.share-preview{position:relative;margin:0 auto 14px;width:min(100%,340px);aspect-ratio:1080/1350;border-radius:var(--r-l,18px);overflow:hidden;background:var(--bg-sunk);box-shadow:0 18px 40px -22px rgba(0,0,0,.55),0 0 0 1px var(--separator)}
.share-preview img{display:block;width:100%;height:100%;object-fit:cover}
.share-wait{position:absolute;inset:auto 0 12px;text-align:center;color:var(--label-3);font-size:var(--t-footnote)}
.share-options{display:grid;gap:4px;margin:0 auto;max-width:420px}
.share-style{display:flex;margin-bottom:6px}
.share-style button{flex:1;min-height:40px;white-space:nowrap}
.share-style button[aria-pressed="true"]{background:var(--bg-elev);color:var(--label);box-shadow:0 1px 4px rgba(0,0,0,.12)}
.share-opt{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;padding:4px 2px;border-bottom:var(--hairline) solid var(--separator);font-weight:500}
.share-opt .row-switch{appearance:none;-webkit-appearance:none;position:relative;flex:none;width:51px;height:31px;margin:0;border-radius:31px;background:var(--bg-sunk);box-shadow:inset 0 0 0 1px var(--separator);transition:background .2s var(--ease);cursor:pointer}
.share-opt .row-switch::after{content:"";position:absolute;top:2px;inset-inline-start:2px;width:27px;height:27px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.25);transition:transform .22s var(--spring)}
.share-opt .row-switch:checked{background:#34C759;box-shadow:none}
.share-opt .row-switch:checked::after{transform:translateX(20px)}
[dir="rtl"] .share-opt .row-switch:checked::after{transform:translateX(-20px)}
.share-privacy{margin:12px auto 0;max-width:420px;text-align:center}
.share-actions{display:grid;gap:8px}
.share-actions [data-share-go]{display:inline-flex;align-items:center;justify-content:center;gap:8px}
.share-actions [data-share-go] svg{width:18px;height:18px}
.share-secondary{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.share-secondary .btn{min-height:44px;white-space:normal}
.adh-moment-foot .adh-share{width:36px;height:36px;min-width:36px;border-radius:50%;background:var(--tint-soft);color:var(--tint)}
.adh-moment-foot .adh-share svg{width:16px;height:16px}
@media (max-height:700px){.share-preview{width:min(100%,260px)}}

/* ---------------------------------------------------------------------------
   24. Social 2 — list rows used in pages and sheets (account, challenge actions, menus)
   ------------------------------------------------------------------------ */
.lrows{padding:0;overflow:hidden;border-radius:var(--r-l,18px);background:var(--bg-elev);box-shadow:inset 0 0 0 var(--hairline) var(--separator)}
#main .lrows{margin-inline:var(--gutter);box-shadow:var(--elev-1)}
.sheet-panel .lrows{margin:12px 0}
.lrow{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:10px 14px;border:0;background:transparent;color:var(--label);text-align:start;font:inherit;cursor:pointer;border-radius:0}
button.lrow:active{background:var(--bg-sunk)}
@media (hover:hover){button.lrow:hover{background:color-mix(in srgb,var(--bg-sunk) 60%,transparent)}}
.lrow+.lrow{box-shadow:inset 0 var(--hairline) 0 var(--separator)}
.lrow .row-icon{flex:none;width:30px;height:30px;border-radius:8px;color:#fff;display:grid;place-items:center}
.lrow .row-icon svg{width:17px;height:17px}
.lrow-copy{flex:1;min-width:0;display:grid;gap:2px}
.lrow-copy b{font-weight:600;font-size:var(--t-body);line-height:1.25;overflow-wrap:anywhere}
.lrow-copy small{display:flex;align-items:center;gap:6px;color:var(--label-3);font-size:var(--t-footnote);line-height:1.35}
.lrow-chev{flex:none;display:grid;color:var(--label-3)}
.lrow-chev svg{width:16px;height:16px}
[dir="rtl"] .lrow-chev svg{transform:scaleX(-1)}
.lrow-static{cursor:default}
.lrow .switch{flex:none;margin-inline-start:auto}
.lrow.danger-row b{color:var(--danger,#C8324B)}
.row-badge{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 7px;border-radius:11px;background:#E5484D;color:#fff;font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1}
.account-rows{margin-top:10px}
.account-email{text-align:center}
/* Settings header as the account identity */
.set-hero-id.is-account{width:100%;border:0;background:transparent;color:inherit;font:inherit;text-align:start;padding:0;cursor:pointer}
.set-hero-chev{margin-inline-start:auto;opacity:.8}
.set-hero-chev svg{width:18px;height:18px}
[dir="rtl"] .set-hero-chev svg{transform:scaleX(-1)}
.set-avatar.has-photo{overflow:hidden;padding:0}
.set-avatar.has-photo>*{width:100%!important;height:100%!important;min-width:0!important;border-radius:50%!important;border:0!important;font-size:1.3rem}
.set-avatar.has-photo img{width:100%;height:100%;object-fit:cover}

/* ---------------------------------------------------------------------------
   25. Social 2 — profile, friends, invitations
   ------------------------------------------------------------------------ */
#main .social-profile{display:flex;flex-direction:column;gap:14px;padding:4px var(--gutter) 8px}
.sp-head{position:relative;border-radius:var(--r-xl);background:var(--bg-elev);box-shadow:var(--elev-1);overflow:hidden;padding-bottom:16px}
.sp-cover{position:relative;isolation:isolate;overflow:hidden;height:104px;background:linear-gradient(160deg,var(--sky-a) 0%,var(--sky-b) 65%,var(--sky-c) 100%)}
.sp-cover .sky-art{position:absolute;inset:0}
.sp-cover .sky-rosette{width:220px;height:220px;inset-inline-end:-60px;top:-70px;opacity:.22}
.sp-top{display:flex;align-items:flex-end;gap:14px;margin-top:-44px;padding:0 16px;position:relative}
.sp-top>.cloud-avatar,.sp-top>.feature-avatar,.sp-top>span:first-child{flex:none;width:88px!important;height:88px!important;border-radius:50%!important;border:4px solid var(--bg-elev)!important;box-shadow:0 0 0 2px rgba(226,184,98,.9),0 10px 24px -10px rgba(0,0,0,.55);overflow:hidden}
.sp-top .cloud-avatar{background:linear-gradient(150deg,#FBE7B5,#E2B862);color:#1A2440;font-size:1.9rem}
.sp-top img{width:100%;height:100%;object-fit:cover}
.sp-stats{flex:1;min-width:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:4px;padding-bottom:4px}
.sp-stat{display:flex;flex-direction:column;align-items:center;gap:1px;min-width:0;padding:6px 2px;border:0;background:transparent;color:var(--label);font:inherit;border-radius:var(--r-s,10px)}
button.sp-stat{cursor:pointer}
button.sp-stat:active{background:var(--bg-sunk)}
.sp-stat b{font-family:var(--rounded,var(--ui));font-size:var(--t-title3,1.2rem);font-weight:700;font-variant-numeric:tabular-nums;line-height:1.1}
.sp-stat span{font-size:var(--t-caption,.72rem);color:var(--label-3);text-align:center;line-height:1.2}
.sp-private{margin:0;color:var(--label-3);font-size:var(--t-footnote);text-align:center;padding-bottom:8px}
.sp-id{padding:12px 18px 0}
.sp-id h2{font-family:var(--serif);font-weight:500;font-size:var(--t-title2);letter-spacing:-.01em;line-height:1.2;overflow-wrap:anywhere}
.sp-id .cloud-handle{margin-top:2px;color:var(--label-3);font-size:var(--t-subhead);font-weight:500}
.sp-id .cloud-bio{margin-top:8px;color:var(--label-2);font-size:var(--t-body);line-height:1.45}
.sp-actions{display:flex;gap:8px;padding:14px 16px 0}
.sp-actions .btn{flex:1;min-height:40px;padding:8px 12px;font-size:var(--t-subhead);font-weight:600;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;gap:6px;background:var(--bg-sunk);color:var(--label);white-space:nowrap}
.sp-actions .btn.primary{background:var(--tint);color:var(--on-tint)}
.sp-actions .btn svg{width:15px;height:15px}
.sp-actions .sp-more{flex:none;width:40px;height:40px;min-width:40px;border-radius:12px;background:var(--bg-sunk);color:var(--label)}
.sp-tabs,.people-tabs,.ch-tabs{display:flex;margin:0}
.sp-tabs button,.people-tabs button,.ch-tabs button{flex:1;min-height:40px;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.sp-body{display:flex;flex-direction:column;gap:10px}
.sp-body>.lrows{margin-inline:0}
#main .social-people{display:flex;flex-direction:column;gap:12px;padding:4px var(--gutter) 8px}
.sub-tabs{display:flex;gap:8px}
.person-list{display:grid;gap:8px}
.person-item{display:flex;flex-direction:column;gap:8px;padding:10px 12px;border-radius:var(--r-l,18px);background:var(--bg-elev);box-shadow:var(--elev-1)}
.sheet-panel .person-item{box-shadow:inset 0 0 0 var(--hairline) var(--separator)}
.person-item:has(.person-actions){flex-direction:row;align-items:center;flex-wrap:wrap}
.person-row{display:flex;align-items:center;gap:12px;width:100%;flex:1 1 12rem;min-width:0;border:0;background:transparent;color:inherit;font:inherit;text-align:start;padding:0;cursor:pointer}
div.person-row{cursor:default}
.person-row>.cloud-avatar,.person-row>.feature-avatar,.person-row>span:first-child{flex:none;width:46px!important;height:46px!important;border-radius:50%!important;overflow:hidden}
.person-row img{width:100%;height:100%;object-fit:cover}
.person-copy{flex:1;min-width:0;display:grid;gap:1px}
.person-copy b{font-weight:600;font-size:var(--t-body);overflow-wrap:anywhere}
.person-copy span{color:var(--label-3);font-size:var(--t-footnote)}
.person-copy small{color:var(--label-2);font-size:var(--t-footnote);display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.person-actions{display:flex;gap:6px;flex-wrap:wrap;margin-inline-start:auto}
.person-actions .btn{min-height:36px;padding:6px 14px;font-size:var(--t-footnote);font-weight:700;border-radius:18px}
.invite-card{display:flex;flex-direction:column;gap:12px;padding:16px;border-radius:var(--r-l,18px);background:linear-gradient(160deg,var(--bg-tint),var(--bg-elev));box-shadow:var(--elev-1)}
.invite-card-copy{display:grid;gap:4px}
.invite-card-copy small{color:var(--label-2);font-size:var(--t-footnote);line-height:1.4}
#main .cloud-search{display:flex;gap:8px;align-items:flex-end}
#main .cloud-search .field{flex:1;margin:0}

/* ---------------------------------------------------------------------------
   26. Social 2 — challenges: cards, day dots, detail, invite preview, celebration
   ------------------------------------------------------------------------ */
#main .cloud-challenges-page{display:flex;flex-direction:column;gap:12px;padding:4px var(--gutter) 8px}
.ch-invites{display:grid;gap:8px}
.ch-invites .group-t{margin:4px 4px 0}
.ch-invite{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;padding:14px;border:0;border-radius:var(--r-l,18px);background:linear-gradient(160deg,color-mix(in srgb,#E7B64D 16%,var(--bg-elev)),var(--bg-elev));box-shadow:var(--elev-1)}
.ch-invite-copy{flex:1 1 12rem;min-width:0;display:grid;gap:2px}
.ch-invite-copy small{color:var(--label-3);font-size:var(--t-footnote)}
.ch-list{display:grid;gap:10px}
.ch-item{display:block}
.ch-card{display:flex;align-items:center;gap:12px;width:100%;padding:12px 14px;border:0;border-radius:var(--r-l,18px);background:var(--bg-elev);box-shadow:var(--elev-1);color:var(--label);font:inherit;text-align:start;cursor:pointer}
.ch-card:active{transform:scale(.99)}
.ch-ring{flex:none;display:grid;place-items:center;width:48px;height:48px}
.ch-ring .row-icon{width:40px;height:40px;border-radius:12px}
.ch-copy{flex:1;min-width:0;display:grid;gap:3px}
.ch-copy b{font-weight:650;font-size:var(--t-body);overflow-wrap:anywhere}
.ch-copy small{color:var(--label-3);font-size:var(--t-footnote)}
.ch-status{display:inline-flex;align-items:center;gap:4px;width:fit-content;padding:2px 9px;border-radius:var(--r-pill);font-size:var(--t-caption,.72rem);font-weight:700;background:var(--bg-sunk);color:var(--label-2)}
.ch-status svg{width:12px;height:12px}
.ch-status.live{background:var(--tint-soft);color:var(--tint)}
.ch-status.ok{background:color-mix(in srgb,#34C759 18%,transparent);color:#1E8E45}
.ch-status.warn{background:color-mix(in srgb,#E7B64D 22%,transparent);color:#8A5A0C}
:root[data-theme="dark"] .ch-status.ok{color:#5BD681}
:root[data-theme="dark"] .ch-status.warn{color:#F1C66B}
.ch-count{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--bg-sunk);font-size:11px;font-weight:700}
.avatar-stack{flex:none;display:flex;align-items:center;padding-inline-start:8px}
.avatar-stack>*:not(em){width:26px!important;height:26px!important;min-width:26px!important;border-radius:50%!important;margin-inline-start:-8px;border:2px solid var(--bg-elev)!important;overflow:hidden;font-size:.6rem!important}
.avatar-stack img{width:100%;height:100%;object-fit:cover}
.avatar-stack em{font-style:normal;font-size:var(--t-caption,.72rem);color:var(--label-3);margin-inline-start:4px}
/* Day dots: booleans only */
.day-dots{display:flex;flex-wrap:wrap;gap:5px;margin-top:4px}
.day-dots i{width:10px;height:10px;border-radius:50%;background:var(--bg-sunk);box-shadow:inset 0 0 0 1px var(--separator)}
.day-dots i.done{background:linear-gradient(150deg,#F6D27A,#E79A3B);box-shadow:none}
.day-dots i.missed{background:transparent;box-shadow:inset 0 0 0 1.5px var(--label-3);opacity:.6}
.day-dots i.today{background:transparent;box-shadow:inset 0 0 0 2px var(--tint)}
.day-dots i.future{opacity:.5}
/* Detail */
.ch-detail{display:flex;flex-direction:column;gap:14px}
.ch-hero{display:flex;align-items:center;gap:16px;padding:16px;border-radius:var(--r-l,18px);background:linear-gradient(160deg,var(--bg-tint),var(--bg-elev));box-shadow:inset 0 0 0 var(--hairline) var(--separator)}
.ch-hero-ring{flex:none}
.ch-hero-copy{flex:1;min-width:0;display:grid;gap:4px}
.ch-hero-copy>b{font-weight:650;font-size:var(--t-headline,1.05rem)}
.ch-hero-copy small{color:var(--label-3);font-size:var(--t-footnote)}
.ch-ar{margin:0;font-family:var(--ar);font-size:1.3rem;line-height:1.9;color:var(--label)}
.ch-today{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-radius:var(--r-l,18px);background:var(--bg-elev);box-shadow:inset 0 0 0 var(--hairline) var(--separator)}
.ch-today small{display:block;color:var(--label-3);font-size:var(--t-footnote)}
.ch-today b{font-family:var(--rounded,var(--ui));font-size:var(--t-title2);font-weight:700;font-variant-numeric:tabular-nums}
.ch-today .btn{min-height:44px;padding:8px 18px}
.ch-days h3,.ch-members h3{font-family:var(--ui);font-size:var(--t-footnote);font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--label-3);margin:0 2px 8px}
.ch-days{padding:0 2px}
.ch-members ul{list-style:none;margin:0;padding:0;display:grid;gap:2px;border-radius:var(--r-l,18px);background:var(--bg-elev);box-shadow:inset 0 0 0 var(--hairline) var(--separator);overflow:hidden}
.ch-member{display:flex;align-items:center;gap:12px;padding:10px 14px}
.ch-member+.ch-member{box-shadow:inset 0 var(--hairline) 0 var(--separator)}
.ch-member>.cloud-avatar,.ch-member>.feature-avatar,.ch-member>span:first-child{flex:none;width:40px!important;height:40px!important;border-radius:50%!important;overflow:hidden}
.ch-member img{width:100%;height:100%;object-fit:cover}
.ch-member-copy{flex:1;min-width:0;display:grid;gap:2px}
.ch-member-copy b{font-weight:600;font-size:var(--t-subhead)}
.ch-owner{font-style:normal;font-size:var(--t-caption,.72rem);font-weight:700;color:#8A5A0C;background:color-mix(in srgb,#E7B64D 22%,transparent);padding:1px 7px;border-radius:var(--r-pill);margin-inline-start:4px}
.ch-member-n{flex:none;font-family:var(--rounded,var(--ui));font-weight:700;font-variant-numeric:tabular-nums;color:var(--label-2)}
.ch-member.is-invited{opacity:.75}
.ch-members>.muted{margin:8px 4px 0}
.ch-actions{margin-top:2px}
/* Invite preview and signed-out gate */
.join-view{display:flex;flex-direction:column;gap:14px}
.join-hero{display:flex;align-items:center;gap:12px}
.join-hero>.cloud-avatar,.join-hero>.feature-avatar,.join-hero>span:first-child{flex:none;width:52px!important;height:52px!important;border-radius:50%!important;overflow:hidden}
.join-hero p{margin:0;font-weight:600}
.join-actions,.link-gate-actions,.ch-celebrate-actions{display:grid;gap:8px}
.link-gate{text-align:center}
.link-gate-art{display:grid;place-items:center;color:var(--tint);margin:12px 0}
.link-gate-art svg{width:120px;height:96px}
/* Celebration */
.ch-celebrate{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:12px 4px 0}
.ch-bloom{position:absolute;top:-20px;left:50%;width:280px;height:280px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(circle,rgba(246,210,122,.55),rgba(246,210,122,0) 65%);pointer-events:none;animation:chBloom 1.6s var(--ease) both}
@keyframes chBloom{from{transform:translateX(-50%) scale(.4);opacity:0}to{transform:translateX(-50%) scale(1);opacity:1}}
@media (prefers-reduced-motion:reduce){.ch-bloom{animation:none}}
.ch-celebrate-ring{position:relative}
.ch-celebrate h2{font-family:var(--serif);font-weight:500;font-size:var(--t-title1,1.75rem)}
.ch-celebrate-name{margin:0;font-weight:600}
.ch-celebrate .sh-foot{width:100%}

/* ---------------------------------------------------------------------------
   27. Counter: centre the beads between header and footer
   ------------------------------------------------------------------------ */
/* An invisible spacer above mirrors the hint below the ring, so the ring's auto margins centre it in the whole stage;
   it shrinks first when content is tall, so scrolling is unchanged. */
#counter:not(.counter-side) .c-stage::before{content:"";order:-2;flex:0 1 calc(.875rem * 1.47 + 8px);margin-bottom:-8px;pointer-events:none}
#counter.counter-dense .c-stage::before,#counter:has(#cHint[hidden]) .c-stage::before{display:none}
#counter:not(.counter-side):not(.counter-dense):has(#cDone:not([hidden])) .c-stage{justify-content:center}
.row-count{flex:none;color:var(--label-3);font-size:var(--t-subhead);font-variant-numeric:tabular-nums}
.set-avatar.has-photo .cloud-avatar{background:linear-gradient(150deg,#FBE7B5,#E2B862);color:#1A2440}
.sp-top{align-items:flex-start}
.sp-stats{margin-top:50px;padding-bottom:0}
.ch-item.swipe-row{position:relative;border-radius:var(--r-l,18px);background:var(--bg-elev);box-shadow:var(--elev-1);overflow:hidden}
.ch-item.swipe-row .swipe-content{display:flex;align-items:center;gap:4px;padding-inline-end:6px;background:var(--bg-elev)}
.ch-item.swipe-row .ch-card{flex:1;min-width:0;box-shadow:none;background:transparent}
.ch-item.swipe-row .swipe-more{flex:none;width:36px;height:36px;border-radius:50%;color:var(--label-3)}
.avatar-stack .cloud-avatar{background:linear-gradient(150deg,#FBE7B5,#E2B862);color:#1A2440}
#main .ch-invite,#main .invite-card{margin:0;width:100%}
.ch-hero-ring,.ch-celebrate-ring{position:relative;display:grid;place-items:center}
.ch-hero-ring>b,.ch-celebrate-ring>b{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--rounded,var(--ui));font-weight:700;font-size:var(--t-headline,1.05rem);font-variant-numeric:tabular-nums;color:var(--label)}
.ch-celebrate-ring>b{font-size:var(--t-title2)}
.ch-member .cloud-avatar,.person-row .cloud-avatar,.join-hero .cloud-avatar{background:linear-gradient(150deg,#FBE7B5,#E2B862);color:#1A2440;font-size:.95rem}
.person-item>.person-row{flex:none}
.person-item:has(.person-actions)>.person-row{flex:1 1 12rem}

/* ---------------------------------------------------------------------------
   28. Compact buttons, round account avatar
   ------------------------------------------------------------------------ */
.sheet-panel .btn,#main .cloud-page .btn,#main .social-profile .btn{min-height:44px;padding:9px 18px;font-size:15px;font-weight:600;border-radius:var(--r-pill);line-height:1.2}
.sheet-panel .btn.sm,#main .btn.sm{min-height:36px;padding:7px 14px;font-size:13px}
.sheet-panel .btn.block{width:auto}
@media (max-width:719px){.sheet-panel .sh-foot>.btn.block:only-child,.sheet-panel .sh-foot>.btn.primary.block{width:100%}}
.join-actions,.link-gate-actions,.ch-celebrate-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.join-actions .btn,.link-gate-actions .btn,.ch-celebrate-actions .btn{flex:1 1 9rem;max-width:16rem}
#main #settingsAccount .cloud-account-entry .cloud-actions .btn{min-height:42px}
.person-actions .btn{min-height:34px;padding:6px 14px;font-size:13px}
.ch-today .btn{min-height:40px;padding:8px 18px;font-size:15px}
/* Account avatar in the Today header and the counter: a plain round photo with a gold ring and a request badge */
.account-shortcut{position:relative;display:grid!important;place-items:center;width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important;padding:0!important;border-radius:50%!important;background:transparent!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;box-shadow:none!important;gap:0}
.account-shortcut-avatar{display:block;width:40px;height:40px;border-radius:50%;overflow:hidden;box-shadow:0 0 0 2px rgba(243,212,147,.9),0 6px 16px -6px rgba(0,0,0,.55)}
.account-shortcut-avatar>*{width:100%!important;height:100%!important;min-width:0!important;border:0!important;border-radius:50%!important;margin:0!important}
.account-shortcut-avatar img{width:100%;height:100%;object-fit:cover}
.account-shortcut-avatar .cloud-avatar{background:linear-gradient(150deg,#FBE7B5,#E2B862);color:#1A2440;font-size:.8rem;font-weight:700}
.account-shortcut .cloud-requests-badge{position:absolute;top:-2px;inset-inline-end:-2px;display:grid;place-items:center;min-width:18px;height:18px;margin:0;padding:0 5px;border-radius:9px;background:#E5484D;color:#fff;font-size:11px;font-weight:700;line-height:1;box-shadow:0 0 0 2px var(--bg)}
.account-shortcut:active .account-shortcut-avatar{transform:scale(.94)}

/* ---------------------------------------------------------------------------
   29. Edit profile (iOS-style groups), profile polish, share sheet bar and chips
   ------------------------------------------------------------------------ */
.ep-form .form-head .ep-save{margin-inline-start:auto;flex:none}
@media (min-width:720px){.ep-form .form-head .ep-save{display:none}}
@media (max-width:719px){.ep-form .ep-footer{display:none}}
.ep-photo-section{display:flex;justify-content:center;padding:6px 0 4px}
.ep-form .feature-photo{display:flex;flex-direction:column;align-items:center;text-align:center;margin:0}
.ep-form .feature-photo>.flabel,.ep-form .feature-photo>.muted.small{display:none}
.ep-form .feature-photo-row{flex-direction:column;gap:8px;margin:0}
.ep-avatar-wrap{position:relative;display:block;width:104px;height:104px;cursor:pointer}
.ep-form .feature-photo-preview{width:104px!important;height:104px!important;border-radius:50%!important;overflow:hidden;box-shadow:0 0 0 3px rgba(226,184,98,.9),0 12px 28px -12px rgba(0,0,0,.6)}
.ep-form .feature-photo-preview img{width:100%;height:100%;object-fit:cover}
.ep-form .feature-photo-preview.cloud-avatar,.ep-form .feature-photo-preview .cloud-avatar{background:linear-gradient(150deg,#FBE7B5,#E2B862);color:#1A2440;font-size:2rem}
.ep-cam{position:absolute;bottom:2px;inset-inline-end:2px;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--tint);color:var(--on-tint);box-shadow:0 0 0 3px var(--bg-elev)}
.ep-cam svg{width:16px;height:16px}
.ep-form .feature-photo-actions{flex-direction:row;align-items:center;gap:14px}
.ep-form .feature-photo-actions .btn{min-height:32px;padding:4px 10px;background:transparent;color:var(--tint);font-size:var(--t-subhead);font-weight:600}
.ep-form .feature-photo-actions .link{min-height:32px;font-size:var(--t-subhead);color:var(--danger,#C8324B);font-weight:500}
.ep-group{margin-top:16px;border-radius:var(--r-l,16px);background:var(--bg-elev);box-shadow:inset 0 0 0 var(--hairline) var(--separator);overflow:hidden}
.ep-row{display:flex;align-items:center;gap:10px;min-height:52px;padding:8px 16px;cursor:text}
.ep-row+.ep-row{box-shadow:inset 0 var(--hairline) 0 var(--separator)}
.ep-label{flex:0 0 32%;min-width:0;color:var(--label);font-weight:500;font-size:var(--t-body)}
.ep-input{flex:1;min-width:0;border:0!important;background:transparent!important;box-shadow:none!important;padding:6px 0!important;color:var(--label);font:inherit;font-size:var(--t-body);outline:0;min-height:0!important}
.ep-input:focus{outline:0}
.ep-row:focus-within{background:color-mix(in srgb,var(--tint) 6%,transparent)}
.ep-at{color:var(--label-3);margin-inline-end:-6px}
.ep-bio{flex-wrap:wrap;align-items:flex-start;padding-top:12px}
.ep-bio textarea{flex:1 1 100%;resize:none;min-height:66px!important;line-height:1.45}
.ep-count{margin-inline-start:auto;color:var(--label-3);font-size:var(--t-caption,.72rem)}
.ep-select{appearance:none;-webkit-appearance:none;text-align:end;text-align-last:end;color:var(--label-2)}
.ep-switch{cursor:pointer}
.ep-switch .ep-label{flex:1;display:grid;gap:2px}
.ep-switch .ep-label small{color:var(--label-3);font-size:var(--t-footnote);font-weight:400;line-height:1.35}
.ep-switch .row-switch{appearance:none;-webkit-appearance:none;position:relative;flex:none;width:51px;height:31px;margin:0;border-radius:31px;background:var(--bg-sunk);box-shadow:inset 0 0 0 1px var(--separator);transition:background .2s var(--ease);cursor:pointer}
.ep-switch .row-switch::after{content:"";position:absolute;top:2px;inset-inline-start:2px;width:27px;height:27px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.25);transition:transform .22s var(--spring)}
.ep-switch .row-switch:checked{background:#34C759;box-shadow:none}
.ep-switch .row-switch:checked::after{transform:translateX(20px)}
[dir="rtl"] .ep-switch .row-switch:checked::after{transform:translateX(-20px)}
.ep-foot{margin:8px 16px 0;color:var(--label-3);font-size:var(--t-footnote);line-height:1.4}
.ep-foot.bad{color:var(--danger,#C8324B)}
/* Profile page polish */
.sp-stats{gap:0}
.sp-stat+.sp-stat{box-shadow:inset var(--hairline) 0 0 var(--separator)}
[dir="rtl"] .sp-stat+.sp-stat{box-shadow:inset calc(-1 * var(--hairline)) 0 0 var(--separator)}
.sp-stat b{font-size:var(--t-title2)}
.sp-id .cloud-bio{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.sp-actions .btn{min-height:36px;padding:6px 12px;font-size:14px;border-radius:10px}
.sp-actions .sp-more{width:36px;height:36px;min-width:36px;border-radius:10px}
.sp-tabs{background:transparent!important;box-shadow:inset 0 calc(-1 * var(--hairline)) 0 var(--separator)!important;border-radius:0!important;padding:0!important}
.sp-tabs button{min-height:42px;border-radius:0!important;background:transparent!important;box-shadow:none!important;color:var(--label-3);font-weight:600;position:relative}
.sp-tabs button[aria-pressed="true"]{color:var(--label)}
.sp-tabs button[aria-pressed="true"]::after{content:"";position:absolute;left:25%;right:25%;bottom:0;height:2.5px;border-radius:2px;background:var(--tint)}
/* Share sheet: one compact bar and toggle chips */
.share-preview{width:min(100%,300px)}
.share-options{gap:10px}
.share-style button{min-height:34px;font-size:13px}
.share-chips-title{margin:4px 2px 0;color:var(--label-3);font-size:var(--t-footnote);font-weight:600}
.share-chips{display:flex;flex-wrap:wrap;gap:6px}
.share-chip{min-height:32px;padding:5px 12px;border:0;border-radius:var(--r-pill);background:var(--bg-sunk);color:var(--label-2);font:inherit;font-size:13px;font-weight:600;cursor:pointer;box-shadow:inset 0 0 0 1px var(--separator)}
.share-chip[aria-pressed="true"]{background:var(--tint-soft);color:var(--tint);box-shadow:inset 0 0 0 1.5px var(--tint)}
.share-chip[aria-pressed="true"]::before{content:"✓ ";font-weight:700}
.share-privacy{margin-top:8px}
.share-bar{display:flex!important;align-items:flex-start;justify-content:space-between;gap:12px}
.share-bar .share-main{flex:0 1 auto;width:auto!important;min-width:132px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:9px 20px}
.share-bar .share-main svg{width:17px;height:17px}
.share-tools{display:flex;gap:14px}
.share-tool{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:52px;padding:0;border:0;background:transparent;color:var(--label);font:inherit;cursor:pointer}
.share-tool:disabled{opacity:.45;cursor:default}
.share-tool-ic{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--bg-sunk);box-shadow:inset 0 0 0 1px var(--separator)}
.share-tool-ic svg{width:19px;height:19px}
.share-tool:active .share-tool-ic{transform:scale(.94)}
.share-tool small{font-size:11px;font-weight:600;color:var(--label-3);line-height:1.15;text-align:center;max-width:64px}
.ep-form .ep-photo-section{border:0!important;box-shadow:none!important;padding-top:6px!important;margin:0!important}
.sp-stat+.sp-stat{box-shadow:none!important;position:relative}
.sp-stat+.sp-stat::before{content:"";position:absolute;inset-inline-start:0;top:22%;bottom:22%;width:var(--hairline);background:var(--separator)}
/* ---------------------------------------------------------------------------
   30. Challenge lifecycle: hints, today chip, life line, plan badge, week strip
   --------------------------------------------------------------------------- */
.ch-hint{margin:2px var(--gutter) 10px;color:var(--label-3);font-size:var(--t-footnote);line-height:1.4}
.ch-life{margin:10px 0 0;padding:10px 12px;border-radius:12px;background:var(--bg-sunk);color:var(--label-2);font-size:var(--t-footnote);line-height:1.45}
.ch-today-chip{display:inline-flex;align-items:center;gap:4px;margin-inline-start:6px;padding:2px 8px;border-radius:var(--r-pill);background:var(--gold-soft);color:var(--gold-ink);font-size:11px;font-weight:700;vertical-align:middle;white-space:nowrap}
.ch-today-chip.ok{background:var(--turquoise-soft);color:var(--turquoise)}
.plan-kind{display:inline-block;margin-inline-start:6px;padding:1px 7px;border-radius:var(--r-pill);background:var(--gold-soft);color:var(--gold-ink);font-size:11px;font-weight:700;letter-spacing:.02em;vertical-align:middle}
.plans-challenges{margin:10px var(--gutter) 0}
.sp-week{margin:14px var(--gutter) 6px;padding:12px 14px 10px;border-radius:var(--r-m);background:var(--bg-elev);box-shadow:inset 0 0 0 var(--hairline) var(--separator)}
.sp-week-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px;font-size:var(--t-footnote)}
.sp-week-head b{color:var(--label-2);font-weight:600}
.sp-week-head span{color:var(--gold-ink);font-weight:700;font-variant-numeric:tabular-nums}
.sp-week-bars{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;align-items:end;height:74px}
.sp-bar{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:5px;height:100%}
.sp-bar i{display:block;width:100%;max-width:22px;height:var(--h);min-height:3px;border-radius:6px;background:color-mix(in srgb,var(--gold-ink) 45%,transparent)}
.sp-bar.is-today i{background:var(--gold-ink)}
.sp-bar small{color:var(--label-3);font-size:10px;font-weight:600;line-height:1}
.sp-bar.is-today small{color:var(--label)}
/* In-app confirmation dialog (replaces native confirm) */
.zk-confirm{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:24px var(--gutter);background:rgba(4,10,24,.48);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);animation:zkFade .16s var(--ease) both}
.zk-confirm-card{width:min(100%,340px);padding:20px 18px 16px;border-radius:var(--r-l);background:var(--bg-elev);box-shadow:0 24px 60px -20px rgba(0,0,0,.55)}
.zk-confirm-card p{margin:0 0 16px;color:var(--label);font-size:var(--t-body);line-height:1.45;text-align:center}
.zk-confirm-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.zk-confirm-actions .btn{min-height:44px;width:100%}
.zk-confirm-actions .btn.danger{background:var(--danger,#C8324B);color:#fff}
@keyframes zkFade{from{opacity:0}to{opacity:1}}
/* Qur'an facts dropdown on Today */
.today-facts>summary>svg:first-child{display:block;color:var(--gold-ink)}
.qf-card{padding:2px 16px 14px}
/* Inside a Today dropdown the generic .today-extra-content rule (padding:8px 0 12px) used to win and left the fact flush with the card edge. */
.today-extra .qf-card{padding:14px 16px 16px}
.qf-kicker{margin:0 0 4px;color:var(--gold-ink);font-size:var(--t-caption,12px);font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.qf-title{margin:0 0 6px;font-size:var(--t-headline,17px);line-height:1.3}
.qf-body{margin:0;color:var(--label-2);font-size:var(--t-subhead,15px);line-height:1.55}
.qf-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;flex-wrap:wrap}
.qf-refs{display:flex;flex-wrap:wrap;gap:6px}
.qf-ref{display:inline-flex;align-items:center;min-height:28px;padding:2px 10px;border-radius:var(--r-pill);background:var(--gold-soft);color:var(--gold-ink);font-size:12px;font-weight:700;text-decoration:none;font-variant-numeric:tabular-nums}
.qf-next{margin-inline-start:auto}
/* One-time "See what's new" offer for the new Quick guide */
.guide-offer{display:grid;gap:10px;margin:0 var(--gutter);padding:14px 16px;border-radius:var(--r-l);background:linear-gradient(150deg,var(--gold-soft),var(--bg-elev) 70%)}
.guide-offer h2{margin:0 0 4px;font-size:var(--t-headline,17px)}
.guide-offer p{margin:0;color:var(--label-2);font-size:var(--t-subhead,15px);line-height:1.45}
.guide-offer-actions{display:flex;justify-content:flex-end;gap:8px}

/* ---------------------------------------------------------------------------
   31. System: one rhythm for pages (16px gutter, 14px between blocks, 8px inside a group of dropdowns)
   --------------------------------------------------------------------------- */
.today-page{gap:14px}
.today-page>:not(.today-hero):not(.today-summary){margin-top:0}
.today-page>.today-section{padding-inline:0;margin-top:6px}
.today-page>.today-section .today-section-heading{margin-inline:calc(var(--gutter) + 4px)}
.today-page>.today-extra+.today-extra{margin-top:-6px}
.today-page>.pinned-empty{margin-block:-4px}
#main .today-page>.resume-card{margin-top:0}
#main .page-actions-moved{display:none}
/* Settings jump bar: sticky under the page header, current section highlighted */
.set-jump{position:sticky;top:var(--set-head,56px);z-index:8;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:10px 0 2px;padding:8px var(--gutter);background:color-mix(in srgb,var(--bg) 82%,transparent);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);box-shadow:0 var(--hairline) 0 var(--separator);scroll-padding-inline:var(--gutter)}
.set-jump::-webkit-scrollbar{display:none}
.set-jump .chip-btn{flex:none;min-height:34px;padding:6px 13px;border:0;border-radius:var(--r-pill);background:var(--bg-elev);color:var(--label-2);font:inherit;font-size:13px;font-weight:600;white-space:nowrap;box-shadow:inset 0 0 0 var(--hairline) var(--separator);cursor:pointer;transition:background .2s var(--ease),color .2s var(--ease)}
.set-jump .chip-btn[aria-current="true"]{background:var(--tint);color:var(--on-tint,#fff);box-shadow:none}
/* 99 Names (Figma › 02 · 99 Names): list with name of the day and progress; opened name with calligraphy */
.nm-panel{background:linear-gradient(180deg,color-mix(in srgb,var(--tint) 16%,var(--bg)) 0,var(--bg) 340px)}
.nm-view{padding-bottom:96px}
.nm-hero{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:2px var(--gutter) 14px}
.nm-sub{margin:0;color:var(--label-2);font-size:var(--t-subhead,15px)}
.nm-ring{position:relative;display:grid;place-items:center;width:56px;height:56px;flex:none}
.nm-ring svg{position:absolute;inset:0}
.nm-ring-bg{fill:none;stroke:var(--separator-strong);stroke-width:5}
.nm-ring-fg{fill:none;stroke:var(--gold-ink);stroke-width:5;stroke-linecap:round;transition:stroke-dashoffset .4s var(--ease)}
.nm-ring b{font-size:15px;line-height:1;margin-top:6px}.nm-ring small{font-size:9px;color:var(--label-3);margin-top:-8px}
.nm-day{position:relative;overflow:hidden;margin:0 var(--gutter) 16px;padding:16px;border-radius:var(--r-l);background:linear-gradient(140deg,var(--gold-soft),var(--bg-elev) 75%);box-shadow:inset 0 0 0 .8px color-mix(in srgb,var(--gold-ink) 40%,transparent)}
.nm-day::before{content:"";position:absolute;width:240px;height:240px;right:-60px;top:-110px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--gold-ink) 26%,transparent),transparent 70%);pointer-events:none}
.nm-kicker{margin:0 0 6px;color:var(--gold-ink);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.nm-day-main{position:relative;display:flex;align-items:center;justify-content:space-between;gap:10px}
.nm-day-main h3{margin:0;font-family:var(--serif);font-size:22px;font-weight:500}
.nm-day-main p{margin:4px 0 0;color:var(--label-2);font-size:14px}
.nm-day-ar{font-family:'Amiri Quran',var(--ar);font-size:44px;line-height:1.4;color:var(--gold-ink)}
.nm-actions{position:relative;display:flex;gap:8px;margin-top:12px}
.nm-actions .btn,.nm-detail-actions .btn{border-radius:var(--r-pill)}
.nm-actions .btn.primary,.nm-detail-actions .btn.primary,.nm-cta .btn.primary{background:var(--gold-ink);color:var(--bg)}
[data-learn][aria-pressed="true"]{color:var(--gold-ink)!important;box-shadow:inset 0 0 0 1px var(--gold-ink)}
.nm-filter{margin:0 var(--gutter) 12px}
.nm-list{list-style:none;margin:0 var(--gutter);padding:0;border-radius:var(--r-l);background:var(--bg-elev);overflow:hidden}
.nm-list li+li .nm-row{box-shadow:inset 0 var(--hairline) 0 var(--separator)}
.nm-row{display:flex;align-items:center;gap:12px;width:100%;min-height:62px;padding:10px 16px 10px 14px;border:0;background:none;color:inherit;font:inherit;text-align:start;cursor:pointer}
.nm-num{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--separator-strong);color:var(--label-3);font-size:12px;font-weight:700;font-variant-numeric:tabular-nums}
.nm-row.is-learned .nm-num{background:var(--gold-ink);color:var(--bg);box-shadow:none}
.nm-copy{display:grid;gap:2px;flex:1;min-width:0}.nm-copy b{font-size:15px}.nm-copy small{color:var(--label-3);font-size:13px}
.nm-ar{font-family:'Amiri Quran',var(--ar);font-size:24px;line-height:1.5;color:var(--gold-ink)}
.nm-empty{margin:20px var(--gutter);color:var(--label-2);text-align:center}
.nm-note{margin:14px calc(var(--gutter) + 4px) 0;color:var(--label-3);font-size:12px;line-height:1.45}
.nm-cta{position:sticky;bottom:0;padding:18px var(--gutter) calc(env(safe-area-inset-bottom,0px) + 14px);background:linear-gradient(to bottom,transparent,var(--bg) 40%)}
.nm-cta .btn{width:100%;min-height:52px;border-radius:var(--r-pill);font-size:16px}
.nm-detail{position:relative;display:flex;flex-direction:column;align-items:center;min-height:100%;padding:0 var(--gutter) calc(env(safe-area-inset-bottom,0px) + 20px);text-align:center}
.nm-detail-top{display:flex;align-items:center;justify-content:space-between;width:100%;padding-top:calc(env(safe-area-inset-top,0px) + 10px);color:var(--label-3);font-size:14px;font-weight:600}
.nm-spacer{width:40px}
.nm-callig{position:relative;display:grid;place-items:center;width:250px;height:250px;margin:18px 0 8px}
.nm-callig::before{content:"";position:absolute;inset:-40px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--gold-ink) 22%,transparent),transparent 65%)}
.nm-orn{position:absolute;inset:0;border-radius:50%;border:1px dashed color-mix(in srgb,var(--gold-ink) 45%,transparent);box-shadow:inset 0 0 0 14px transparent,inset 0 0 0 15px color-mix(in srgb,var(--gold-ink) 20%,transparent)}
.nm-big{position:relative;font-family:'Amiri Quran',var(--ar);font-size:clamp(56px,20vw,86px);line-height:1.3;color:var(--gold-ink)}
.nm-title{margin:6px 0 0;font-family:var(--serif);font-size:32px;font-weight:500}
.nm-mean{margin:6px 0 0;color:var(--label-2);font-size:18px}
.nm-src{max-width:320px;margin:16px 0 0;color:var(--label-3);font-size:12.5px;line-height:1.5}
.nm-detail-actions{display:grid;grid-template-columns:1fr 1.2fr;gap:10px;width:100%;max-width:360px;margin-top:auto;padding-top:24px}
.nm-detail-actions .btn{min-height:52px}
.nm-pager{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:360px;margin-top:12px;color:var(--label-3)}
.nm-pager .icon{font-size:22px}
#counter.names-recite #cSteps{display:none}
#counter.names-recite .c-ar{font-size:clamp(40px,12vw,56px)}
.nm-view .nm-list{margin-bottom:8px}
#counter.names-recite #cReadingDisclosure{display:none}
#counter.names-recite #cMean:not([hidden]){display:block;margin-top:4px;color:rgba(255,255,255,.72);font-size:15px}
#counter.names-recite .c-tr{font-family:var(--serif);font-size:22px;font-weight:500}
.names-next{margin:8px 0 0;color:rgba(255,255,255,.45);font-size:13px;font-weight:600;letter-spacing:.02em}
/* Today v2 (Figma › 03 · Today) */
.today-hero .today-summary.in-hero{position:relative;z-index:1;width:auto;margin:16px 0 0!important;background:rgba(6,16,42,.42)!important;box-shadow:inset 0 0 0 .6px rgba(255,255,255,.12)!important;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#EEF2F9}
.today-hero .today-summary.in-hero *{color:inherit}
.today-hero .today-summary.in-hero .wkd i{background:rgba(255,255,255,.22)}
.today-hero .today-summary.in-hero .wkd.on i{background:var(--gold)}
.today-page>.today-hero{padding-bottom:18px}
.today-page .resume-card{background:linear-gradient(120deg,color-mix(in srgb,var(--tint) 18%,var(--bg-elev)),var(--bg-elev) 70%)}
.today-more{margin:0 var(--gutter);border-radius:var(--r-l);background:var(--bg-elev);box-shadow:var(--elev-1);overflow:hidden}
.today-more>.today-extra{margin:0!important;border-radius:0;background:transparent;box-shadow:none}
.today-more>.today-extra+.today-extra{box-shadow:inset 0 var(--hairline) 0 var(--separator)}
.today-more>.today-extra>summary{min-height:56px;padding:8px 16px}
.today-more>.today-extra>summary>svg:first-child{display:block;box-sizing:content-box;width:18px;height:18px;padding:7px;border-radius:9px;background:var(--bg-sunk);color:var(--gold-ink);flex:none}
.today-more .charity-note{width:auto;margin:0 16px 16px}
/* Opened rows inside the grouped card keep the same 16px inset as the row titles. */
.today-more .today-extra-content>.card{width:auto;margin:8px 16px}
.today-more .today-upcoming{padding:4px 16px 0}
/* Cards keep the design-system gutter as margin; the legacy layer also forced width:100% on these, which pushed
   Today’s plan list (and dropdown cards outside the grouped card) 32px past the right edge on iPhone. */
.today-section>.card,.today-extra .today-extra-content>.card{width:auto}
.today-page>.today-more{margin-top:4px}
.nm-tools{display:flex;align-items:center;gap:8px;margin:0 var(--gutter) 12px}
.nm-tools .nm-filter{flex:1;margin:0}
.nm-select[aria-pressed="true"]{color:var(--gold-ink)}
.nm-pickhelp{margin:-4px calc(var(--gutter) + 4px) 10px;color:var(--label-3);font-size:13px;line-height:1.4}
.nm-row.is-picked .nm-num{background:var(--tint);color:var(--on-tint);box-shadow:none}
.nm-cta .btn:disabled{opacity:.5}
.nm-howmany{display:flex;align-items:center;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:22px}
.nm-howmany>span{width:100%;color:var(--label-3);font-size:13px;font-weight:600}
.nm-howmany button{min-width:56px;min-height:38px;padding:6px 14px;border:0;border-radius:var(--r-pill);background:var(--bg-sunk);color:var(--label);font:inherit;font-weight:700;box-shadow:inset 0 0 0 var(--hairline) var(--separator);cursor:pointer}
.nm-howmany button[aria-pressed="true"]{background:var(--gold-ink);color:var(--bg)}
.nm-own input{width:84px;min-height:38px;padding:6px 12px;border:0;border-radius:var(--r-pill);background:var(--bg-sunk);color:var(--label);font:inherit;font-weight:700;text-align:center;box-shadow:inset 0 0 0 var(--hairline) var(--separator)}
.nm-own.is-on input{box-shadow:inset 0 0 0 1.5px var(--gold-ink)}

/* ---------------------------------------------------------------------------
   32. Performance: no continuous repaints. Blur behind fixed/sticky bars and filter-animated layers made every
   scroll frame and every count repaint large areas; near-opaque fills look the same and composite cheaply.
   --------------------------------------------------------------------------- */
.nav,.is-scrolled .vhead,.set-jump{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.nav{background:var(--bg-elev)!important}
.is-scrolled .vhead{background:color-mix(in srgb,var(--bg) 96%,transparent)!important}
.set-jump{background:color-mix(in srgb,var(--bg) 97%,transparent)!important}
.today-hero .icon,.today-hero .user-switch,.today-hero .today-summary.in-hero,.set-hero *,.sky .icon{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
/* Stars twinkle with opacity (compositor only) instead of a brightness filter repainting the whole layer. */
.sky-stars{animation-name:skyTwinkleO;will-change:opacity}
@keyframes skyTwinkleO{from{opacity:calc(var(--sky-stars,1) * .7)}to{opacity:var(--sky-stars,1)}}
.sky-rosette{will-change:transform}
/* Ring shimmer: plain alpha instead of a blend mode over the beads, on its own layer. */
.counter[data-skin] .ring-wrap::after{mix-blend-mode:normal!important;will-change:transform}
/* While counting, the counter is the only thing on screen: pause the page-sky animations underneath. */
body.counting .sky-stars,body.counting .sky-rosette,body.counting .sky-art *{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.sky-stars,.sky-rosette{animation:none!important}}
/* Reset choice dialog */
.zk-reset .zk-confirm-card{width:min(100%,360px)}
.zk-reset-title{margin:0 0 14px!important;font-weight:700}
.zk-reset-options{display:grid;gap:8px}
.zk-reset-opt{display:grid;gap:3px;width:100%;padding:12px 14px;border:0;border-radius:var(--r-m);background:var(--bg-sunk);color:var(--label);font:inherit;text-align:start;cursor:pointer;box-shadow:inset 0 0 0 var(--hairline) var(--separator)}
.zk-reset-opt b{font-size:15px}
.zk-reset-opt small{color:var(--label-2);font-size:13px;line-height:1.4}
.zk-reset-opt.danger b{color:var(--danger,#C8324B)}
.zk-reset-cancel{width:100%;margin-top:10px}
/* Status notice (offline / sync / update): a compact solid pill below the iPhone status bar, never under it. */
.offline-banner{position:fixed!important;z-index:60;top:calc(env(safe-area-inset-top,0px) + 8px);left:12px;right:12px;max-width:520px;margin:0 auto!important;padding:10px 14px!important;border:0!important;border-radius:16px!important;background:var(--bg-elev)!important;color:var(--label);box-shadow:0 8px 24px -10px rgba(0,0,0,.45),inset 0 0 0 var(--hairline) var(--separator);font-size:13px!important;line-height:1.4;-webkit-backdrop-filter:none;backdrop-filter:none}
/* Focus rings only for keyboard use; the app's own focus on page headings shows nothing on touch. */
:focus:not(:focus-visible){outline:none}
body:not(.kbd) [tabindex="-1"]:focus{outline:none!important;box-shadow:none}
/* Small iPhones (13 mini, SE): keep the Hijri month on one line and the big day number in proportion. */
@media (max-width:390px){.today-hero .today-hijri{font-size:clamp(17px,5.4vw,22px);white-space:nowrap}.today-day{font-size:clamp(3.2rem,15vw,4.2rem)}}
.offline-banner{cursor:pointer}
/* 99 Names fixes (from the iPhone recording) */
.nm-cta{position:fixed!important;left:0;right:0;bottom:0;z-index:5;padding:28px var(--gutter) calc(env(safe-area-inset-bottom,0px) + 12px)!important;background:linear-gradient(to bottom,color-mix(in srgb,var(--bg) 0%,transparent),var(--bg) 42%)!important;pointer-events:none}
.nm-cta .btn{pointer-events:auto;max-width:520px;margin:0 auto;display:flex}
.nm-view{padding-bottom:calc(env(safe-area-inset-bottom,0px) + 110px)!important}
.nm-tools .nm-filter{display:flex;flex-wrap:nowrap}
.nm-tools .nm-filter button{flex:1 1 0;min-width:0;white-space:nowrap;padding-inline:6px;font-size:13px}
.nm-tools .nm-select{flex:none;white-space:nowrap}
.nm-day-main h3,.nm-title,#counter.names-recite .c-tr{font-family:var(--ui)!important;font-weight:700;letter-spacing:-.01em}
.nm-day-main h3{font-size:21px}.nm-title{font-size:30px}
/* While typing, the tab bar would ride above the iOS keyboard: hide it. */
body.typing .nav{display:none!important}
/* Status notices never sit over the counter. */
body.counting .offline-banner{display:none!important}
/* Screen edge (hig.js measures --edge-gap / --edge-gap-vv; both 0px except in an iPhone home-screen app whose layers stop
   short of the screen). Every full-screen view and bottom bar is stretched back to the real bottom edge. */
.counter,.reader{height:calc(var(--surface-height,100dvh) + var(--edge-gap-vv,0px))}
.sheet,.sheet.form-surface{height:calc(var(--surface-height,100dvh) + var(--edge-gap-vv,0px))}
@media(max-width:719px){.sheet.auth-surface{height:calc(var(--auth-viewport-height,100dvh) + var(--edge-gap-vv,0px))}}
.adhkar-session,.tour,.zk-confirm{bottom:calc(-1 * var(--edge-gap,0px))}
.nav,.nm-cta{bottom:calc(-1 * var(--edge-gap,0px))!important}

/* ==========================================================================
   27. Multi-item challenge form (challenge-items.js) — HIG inset-grouped lists on the form surface.
   Logical properties only, so Arabic mirrors. No backdrop-filter on the sticky Create bar.
   ========================================================================== */
.chf{--chf-card:var(--bg);--chf-row:56px}
.chf .group-t{margin:24px 4px 8px}
.chf-sr{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.chf-hero{position:relative;overflow:hidden;display:grid;gap:10px;margin-block:8px 4px;padding:18px 18px 16px;border-radius:var(--r-l);color:#fff;
 background:radial-gradient(110% 80% at 100% 0%,rgba(199,110,124,.7),transparent 55%),linear-gradient(160deg,#0B1736,#22336C 62%,#3C3A78);box-shadow:var(--elev-2)}
:dir(rtl) .chf-hero{background:radial-gradient(110% 80% at 0% 0%,rgba(199,110,124,.7),transparent 55%),linear-gradient(200deg,#0B1736,#22336C 62%,#3C3A78)}
.chf-hero::after{content:"";position:absolute;inset-block-start:16px;inset-inline-end:18px;inline-size:28px;block-size:28px;border-radius:50%;background:#F3E7C2;box-shadow:0 0 0 14px rgba(243,231,194,.12),0 0 28px rgba(243,231,194,.35);pointer-events:none}
.chf-kicker{font-size:var(--t-caption);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#F3E7C2;padding-inline-end:52px}
:lang(ar) .chf-kicker{letter-spacing:0;text-transform:none}
.chf-name{inline-size:100%;min-inline-size:0;min-height:48px;padding:10px 14px;border:1px solid rgba(255,255,255,.26);border-radius:var(--r-s);background:rgba(255,255,255,.12);color:#fff;font:700 var(--t-title3)/1.25 var(--ui);caret-color:#F3E7C2}
.chf-name::placeholder{color:rgba(255,255,255,.62)}
.chf-name:focus{outline:0;border-color:#F3E7C2;box-shadow:0 0 0 3px rgba(243,231,194,.35)}
.chf-sum{margin:0;font-size:var(--t-subhead);font-weight:500;color:rgba(255,255,255,.92);font-variant-numeric:tabular-nums}
.chf-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.chf-head .group-t{margin-inline-end:auto}
.chf-link{min-height:44px;padding:0 4px;border:0;background:none;color:var(--tint);font:500 var(--t-callout) var(--ui)}
.chf-link:focus-visible,.chf-main:focus-visible,.chf-pick:focus-visible,.chf-add button:focus-visible{outline:2px solid var(--tint);outline-offset:-2px;border-radius:var(--r-s)}
.chf-card{overflow:hidden;border-radius:var(--r-m);background:var(--chf-card)}
.chf-list,.chf-picks,.chi-list{list-style:none;margin:0;padding:0}
.chf-picks{overflow:hidden;border-radius:var(--r-m);background:var(--chf-card)}
.chf-row,.chf-picks>li,.chi-row{position:relative;display:flex;align-items:center;gap:12px;min-height:var(--chf-row);padding-inline-start:14px}
.chf-row+.chf-row::before,.chf-picks>li+li::before,.chi-row+.chi-row::before{content:"";position:absolute;inset-block-start:0;inset-inline:62px 0;border-block-start:.5px solid var(--separator)}
.chf-ic{flex:none;display:grid;place-items:center;inline-size:36px;block-size:36px;border-radius:50%}
.chf-ic svg{inline-size:20px;block-size:20px}
.chf-ic.z{background:var(--tint-soft);color:var(--tint)}
.chf-ic.p{background:var(--gold-soft);color:var(--gold-ink)}
.chf-main{flex:1;min-inline-size:0;display:flex;align-items:center;gap:10px;min-height:var(--chf-row);padding:8px 14px 8px 0;padding-inline:0 14px;border:0;background:none;color:inherit;text-align:start;font:inherit}
.chf-copy,.chi-copy{flex:1;min-inline-size:0;display:grid;gap:2px}
.chf-copy b,.chi-copy b{font-weight:500;font-size:var(--t-body);overflow-wrap:anywhere}
.chf-copy small,.chi-copy small{color:var(--label-3);font-size:var(--t-footnote);font-variant-numeric:tabular-nums}
.chf-pill{flex:none;min-inline-size:44px;padding:4px 12px;border-radius:var(--r-pill);background:var(--tint-soft);color:var(--tint);font:700 var(--t-subhead) var(--ui-rounded);font-variant-numeric:tabular-nums;text-align:center}
.chf-pill.daily{background:var(--turquoise-soft);color:var(--turquoise);font-family:var(--ui);font-size:var(--t-footnote)}
.chf-chev{flex:none;display:grid;color:var(--label-3);opacity:.7}
.chf-chev svg{inline-size:16px;block-size:16px}
:dir(rtl) .chf-chev svg{transform:scaleX(-1)}
.chf-empty{display:grid;justify-items:center;gap:6px;padding:22px 24px;text-align:center}
.chf-empty b{font-size:var(--t-headline)}
.chf-empty small{color:var(--label-3);font-size:var(--t-subhead);line-height:1.4;max-inline-size:30ch}
.chf-add{display:flex;border-block-start:.5px solid var(--separator);background:color-mix(in srgb,var(--tint-soft) 45%,transparent)}
.chf-add button{flex:1;min-inline-size:0;display:flex;align-items:center;justify-content:center;gap:4px;min-height:48px;padding:6px 8px;border:0;background:none;color:var(--tint);font:600 var(--t-subhead) var(--ui);line-height:1.2}
.chf-add button+button{border-inline-start:.5px solid var(--separator)}
.chf-add svg{flex:none;inline-size:17px;block-size:17px}
.chf-add button:active,.chf-main:active,.chf-pick:active{background:color-mix(in srgb,var(--tint) 8%,transparent)}
.chf-full{margin:0;padding:14px;color:var(--label-3);font-size:var(--t-footnote);text-align:center}
.chf-del{flex:none;display:grid;place-items:center;inline-size:44px;block-size:44px;margin-inline:-10px -4px;border:0;background:none}
.chf-del i{inline-size:22px;block-size:22px;border-radius:50%;background:var(--danger);display:grid;place-items:center}
.chf-del i::after{content:"";inline-size:11px;block-size:2.5px;border-radius:2px;background:#fff}
.chf-move{display:flex;gap:2px}
/* Move buttons stay available to VoiceOver and the keyboard, and appear when focused; touch uses the grip. */
.chf-move:not(:focus-within){position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip:rect(0 0 0 0)}
.chf-step{inline-size:36px;block-size:44px;border:0;border-radius:var(--r-xs);background:none;color:var(--tint);font-size:.8rem}
.chf-step:disabled{color:var(--label-3);opacity:.35}
.chf-grip{flex:none;display:grid;gap:4px;align-content:center;inline-size:44px;block-size:44px;justify-items:center;cursor:grab;touch-action:none}
.chf-grip i{display:block;inline-size:18px;block-size:2px;border-radius:1px;background:var(--label-3);opacity:.6}
.chf-row.dragging{z-index:2;background:var(--bg-elev);border-radius:var(--r-s);box-shadow:var(--elev-2);transform:scale(1.02)}
.chf-note{margin:10px 4px 0;line-height:1.45}
.chf-sched .chf-srow{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:6px 14px}
.chf-sched .chf-srow+.chf-srow::before{content:"";position:absolute;inset-block-start:0;inset-inline:14px 0;border-block-start:.5px solid var(--separator)}
.chf-srow label{font-size:var(--t-body)}
.chf-date{flex:0 1 auto;min-inline-size:0;max-inline-size:60%;min-height:36px;padding:6px 12px;border:0;border-radius:var(--r-xs);background:var(--bg-sunk);color:var(--tint);font:600 var(--t-subhead) var(--ui);text-align:center}
.chf-stepper{flex:none;gap:4px}
.chf-stepper input.inp{inline-size:54px;flex:none;min-height:40px;padding-inline:4px;font-size:var(--t-headline)}
.chf-stepper button{inline-size:44px;block-size:44px}
.chf-chips{margin:0;padding:4px 14px 14px}
.chf-cta{position:sticky;inset-block-end:calc(-20px - env(safe-area-inset-bottom,0px));z-index:3;margin-block-start:20px;padding-block:12px calc(16px + env(safe-area-inset-bottom,0px));background:var(--bg-elev);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:0 -1px 0 var(--separator)}
.chf-sub .form-head{position:relative}
.chf-done{font-weight:600}
.chf-seg{display:flex;inline-size:100%;margin-block:8px 12px}
.chf-seg button{flex:1;min-inline-size:0}
.chf-search{margin-block-end:4px}
.chf-pick{flex:1;min-inline-size:0;display:flex;align-items:center;gap:12px;min-height:var(--chf-row);padding:8px 14px 8px 0;padding-inline:0 14px;border:0;background:none;color:inherit;text-align:start;font:inherit}
.chf-picks>li{padding-inline-start:14px}
.chf-pick:disabled{opacity:.45}
.chf-check{flex:none;display:grid;place-items:center;inline-size:26px;block-size:26px;border-radius:50%;border:1.5px solid color-mix(in srgb,var(--label-3) 55%,transparent);color:var(--on-tint)}
.chf-pick[aria-checked="true"] .chf-check{border-color:var(--tint);background:var(--tint)}
.chf-check svg{inline-size:15px;block-size:15px}
.chf-none{padding:18px 14px;color:var(--label-3);font-size:var(--t-subhead)}
.chf-big{display:flex;align-items:center;justify-content:center;gap:16px;margin-block:18px 2px}
.chf-round{flex:none;inline-size:56px;block-size:56px;border:0;border-radius:50%;background:var(--tint-soft);color:var(--tint);font-size:1.7rem;line-height:1;transition:transform .15s var(--spring)}
.chf-round:active{transform:scale(.92)}
.chf-n{inline-size:min(160px,40vw);min-inline-size:0;border:0;background:none;color:var(--label);text-align:center;font:700 3.25rem/1.1 var(--ui-rounded);font-variant-numeric:tabular-nums;-moz-appearance:textfield;appearance:textfield}
.chf-n::-webkit-inner-spin-button,.chf-n::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.chf-n:focus{outline:0;border-radius:var(--r-s);box-shadow:0 0 0 3px color-mix(in srgb,var(--tint) 25%,transparent)}
.chf-per{margin:0;text-align:center;color:var(--label-3);font-size:var(--t-subhead)}
.chf-count .chf-chips{justify-content:center;padding-inline:0}
.chf-count .chf-card{margin-block-start:16px}
.chf-switch{cursor:pointer}
.chf-switch input{flex:none;inline-size:51px;block-size:31px}
/* Challenge detail: today's items and members' per-item dots (booleans only). */
.ch-items h3{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 12px}
.chi-sum{font-weight:500;font-size:var(--t-footnote);color:var(--label-3)}
.chi-list{overflow:hidden;border-radius:var(--r-m);background:var(--bg)}
.chi-row{padding-block:8px;padding-inline-end:12px}
.chi-bar{display:block;block-size:6px;max-inline-size:160px;border-radius:3px;background:var(--bg-sunk);overflow:hidden;margin-block:4px 2px}
.chi-bar i{display:block;block-size:100%;border-radius:3px;background:var(--tint)}
.chi-tick{flex:none;display:grid;place-items:center;inline-size:44px;block-size:44px;border:0;background:none;color:var(--on-tint)}
.chi-tick::before{content:"";grid-area:1/1;inline-size:30px;block-size:30px;border-radius:50%;border:1.5px solid color-mix(in srgb,var(--label-3) 55%,transparent)}
.chi-tick[aria-checked="true"]::before,.chi-tick.is-done::before{border-color:var(--success);background:var(--success)}
.chi-tick svg{grid-area:1/1;inline-size:16px;block-size:16px;position:relative}
.chi-start{flex:none;min-height:36px;padding:6px 14px}
.chi-dots{display:flex;gap:4px;margin-block:4px 2px}
.chi-dots i{inline-size:10px;block-size:10px;border-radius:50%;background:color-mix(in srgb,var(--label-3) 28%,transparent)}
.chi-dots i.done{background:var(--success)}
.chi-dots i.p.done{background:var(--gold-ink)}

/* Date and time inputs: WebKit sizes them from the formatted value and ignores width:100%, so a long localized
   date pushed past the form's right edge at 375pt. appearance:none lets them shrink to their container. */
input[type="date"],input[type="time"]{-webkit-appearance:none;appearance:none;min-inline-size:0;max-inline-size:100%;box-sizing:border-box}
input[type="date"].inp,input[type="time"].inp{display:block;inline-size:100%}
input[type="date"]::-webkit-date-and-time-value,input[type="time"]::-webkit-date-and-time-value{text-align:start;min-height:1.4em}
.chf-date::-webkit-date-and-time-value{text-align:center}
.field.row2>*,.row2>*{min-inline-size:0}
@media (max-width:399px){.flow-form .row2,.field.row2{grid-template-columns:minmax(0,1fr)}}