/* حبُّه غيّرني — prototype design system (Phase-1 polished)
   Warm sand + green, calligraphic Arabic, bead-path motif. RTL/LTR via logical properties. */

:root{
  --sand:      #e7d9bf;
  --sand-2:    #ddc9a6;
  --cream:     #f6efe2;
  --paper:     #fffdf8;
  --green:     #357056;
  --green-deep:#274f3d;
  --green-soft:#6aa888;
  --brown:     #7d6038;
  --brown-soft:#a98a62;
  --amber:     #c98a2e;
  --amber-deep:#8f5e13;   /* text/border amber — 5.5:1 on paper (the lighter amber is for fills) */
  --ink:       #352b20;
  --ink-soft:  #5c4d3b;
  --line:      #d6c29c;
  --shadow:    0 10px 30px rgba(74,55,30,.18);
  --radius:    18px;
  --maxw:      460px;
  --ease:      cubic-bezier(.22,.61,.36,1);
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; }

body{
  font-family: var(--font-body, "Tajawal", system-ui, sans-serif);
  color: var(--ink);
  background: radial-gradient(120% 90% at 50% -10%, #f0e7d4 0%, var(--sand) 55%, var(--sand-2) 100%) fixed;
  min-height:100vh; min-height:100dvh; line-height:1.7; /* dvh: mobile dynamic toolbars */
}
/* Three type registers per language:
   body    = UI chrome + journaling inputs (Tajawal / EB Garamond)
   display = short calligraphic headers — logo, cartouches, one-word inputs (Aref Ruqaa / Cormorant)
   reading = long-form + sacred passages — Naskh-class with room for tashkeel stacks (Amiri / Cormorant).
   Aref Ruqaa is a display face: beautiful at header sizes, poor harakat stacking in paragraphs. */
html[lang="ar"]{ --font-body:"Tajawal", system-ui, sans-serif; --font-display:"Aref Ruqaa", serif; --font-reading:"Amiri", "Noto Naskh Arabic", serif; }
/* 106.25% root: EB Garamond's small x-height reads two sizes under the Arabic at equal rem. */
html[lang="en"]{ --font-body:"EB Garamond", Georgia, serif; --font-display:"Cormorant Garamond", Georgia, serif; --font-reading:"Cormorant Garamond", Georgia, serif; font-size:106.25%; }

.sr-only{ position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* Phone presentation frame */
#phone{
  max-width:var(--maxw); margin-inline:auto; min-height:100vh; min-height:100dvh;
  background:linear-gradient(180deg, var(--paper), var(--cream));
  box-shadow:var(--shadow); position:relative; overflow:hidden;
  display:flex; flex-direction:column;
}
@media(min-width:520px){ body{ padding-block:24px; } #phone{ min-height:calc(100vh - 48px); min-height:calc(100dvh - 48px); border-radius:28px; } }

/* Focus visibility (a11y) */
:focus-visible{ outline:3px solid var(--green); outline-offset:2px; border-radius:6px; } /* green-soft was ~2.4:1 — fails WCAG non-text contrast */
h1,h2,h3{ outline:none; }
/* On each view change, focus is moved to the view's heading (tabindex="-1") so screen
   readers announce it. Those headings are NOT keyboard-tabbable, so the visible
   :focus-visible ring there is misleading (it shows as a green box on first load and
   vanishes after any pointer click). Suppress it — interactive controls keep their ring.
   ([tabindex="-1"]:focus = (0,2,0) outranks :focus-visible = (0,1,0).) */
[tabindex="-1"]:focus{ outline:none; }

/* Topbar */
#topbar{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 16px; border-block-end:1px solid var(--line);
  background:linear-gradient(180deg, rgba(255,253,248,.92), rgba(246,239,226,.75));
  backdrop-filter:blur(6px); position:sticky; top:0; z-index:10;
}
.brand{ font-family:var(--font-display); font-size:1.5rem; color:var(--green-deep); line-height:1; background:none; border:none; cursor:pointer; padding:0; }
.meta{ font-size:.78rem; color:var(--ink-soft); margin-inline-end:6px; }
.right{ display:flex; align-items:center; gap:8px; }
.langbtn,.iconbtn{
  font-family:var(--font-body); border:1px solid var(--line); background:var(--paper); color:var(--green-deep);
  border-radius:999px; padding:6px 12px; font-size:.85rem; cursor:pointer; line-height:1; transition:background .15s, transform .1s;
}
.langbtn:hover,.iconbtn:hover{ background:var(--cream); } .langbtn:active,.iconbtn:active{ transform:scale(.95); }

/* Views */
#app{ flex:1; overflow-y:auto; }
.view{ padding:22px 20px 40px; animation:fade .45s var(--ease); }
@keyframes fade{ from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;} }
.center{ text-align:center; }
.muted{ color:var(--ink-soft); } .small{ font-size:.83rem; }

/* Cartouche header */
.cartouche{
  position:relative; text-align:center; margin:6px auto 18px; max-width:90%;
  font-family:var(--font-display); color:var(--green-deep); font-weight:400;
  font-size:1.5rem; padding:9px 26px; border:2px solid var(--green); border-radius:14px;
  background:linear-gradient(180deg, #fff, var(--cream));
}
.cartouche.soft{ border-color:var(--sand-2); font-size:1.15rem; color:var(--brown); }
.cartouche::before,.cartouche::after{
  content:""; position:absolute; inset-block-start:50%; inline-size:9px; block-size:9px;
  background:var(--green); transform:translateY(-50%) rotate(45deg); border-radius:2px;
}
.cartouche.soft::before,.cartouche.soft::after{ background:var(--sand-2); }
.cartouche::before{ inset-inline-start:-5px; } .cartouche::after{ inset-inline-end:-5px; }

/* Hero */
.hero{ text-align:center; padding-block:18px 8px; }
.logo{ font-family:var(--font-display); font-size:3.1rem; color:var(--green-deep); line-height:1.1; margin:0; }
.sub{ color:var(--ink-soft); margin:6px 0 0; font-size:1rem; }
.heart-path{ font-size:2.1rem; color:var(--green-soft); margin:18px 0 6px; letter-spacing:.3em; }
.heart-path.lit{ color:var(--green); }
.byline{ margin-top:14px; font-size:.92rem; color:var(--brown); }

/* Buttons */
.btn{
  font-family:var(--font-body); font-size:1.02rem; cursor:pointer; border:none; border-radius:999px;
  padding:13px 22px; inline-size:100%; background:linear-gradient(180deg, var(--green), var(--green-deep));
  color:#fff; box-shadow:0 6px 16px rgba(39,79,61,.3); transition:transform .1s, filter .15s;
}
.btn:hover{ filter:brightness(1.06); } .btn:active{ transform:scale(.98); }
.btn:disabled{ opacity:.45; cursor:not-allowed; filter:grayscale(.3); box-shadow:none; }
.btn.ghost{ background:none; color:var(--green-deep); border:1px solid var(--green); box-shadow:none; }
.btn.ghost:hover{ background:var(--cream); }
.btn.row{ inline-size:auto; padding:9px 16px; font-size:.9rem; margin-top:8px; }
.btnrow{ display:flex; gap:10px; margin-top:18px; }
.btnrow.stack{ flex-direction:column; }
.btnrow .btn{ inline-size:auto; flex:1; }
.badge{ display:inline-flex; align-items:center; padding:11px 16px; border-radius:999px; background:var(--cream); color:var(--green-deep); border:1px solid var(--green-soft); font-size:.92rem; }

/* Cards & prompts — the DAY form is numbered like the booklet's six prompts; other forms
   (e.g. the renewal fields) keep the quiet bullet. Room to breathe between prompts. */
.view{ counter-reset:prompt; }
.prompt{ margin-block:22px; }
.prompt .q{ display:block; font-weight:500; color:var(--ink); margin-block-end:7px; }
.prompt .q::before{ content:"۰ "; color:var(--brown-soft); }
.dayform .prompt .q::before{ counter-increment:prompt; content:counter(prompt, arabic-indic) ". "; }
html[lang="en"] .dayform .prompt .q::before{ content:counter(prompt) ". "; }
.ta,.word,input.txt{
  font-family:var(--font-body); font-size:1rem; color:var(--ink); inline-size:100%;
  border:1px solid var(--line); border-radius:12px; padding:10px 12px; background:var(--cream);
  resize:vertical; line-height:1.6; transition:background .15s, border-color .15s;
}
textarea.ta{ field-sizing:content; } /* grow with the writing (JS fallback for Safari/Firefox) */
.no-field-sizing textarea.ta{ resize:none; } /* manual drag would fight the JS auto-grow */
.ta:focus,.word:focus,input.txt:focus{ background:#fff; border-color:var(--green-soft); }
.ta+.ta{ margin-top:8px; }
.word{ text-align:center; font-size:1.18rem; font-family:var(--font-display); color:var(--green-deep); }

/* Devotional "letter" */
.devotional{ margin-top:18px; padding:16px; border-radius:var(--radius); background:linear-gradient(180deg, #f3ede0, #efe6d3); border:1px solid var(--sand-2); }
.devotional .q{ font-family:var(--font-display); font-size:1.25rem; color:var(--green-deep); text-align:center; display:block; margin-block-end:8px; }
.devotional .q::before{ content:none; }
.devotional .ta{ background:rgba(255,255,255,.7); border-style:dashed; min-block-size:62px; }

/* Period tabs */
.tabs{ display:flex; gap:8px; margin-block:6px 14px; }
.tab{ flex:1; text-align:center; padding:9px; border-radius:12px; cursor:pointer; border:1px solid var(--line); background:var(--cream); color:var(--ink-soft); font-size:.95rem; font-family:var(--font-body); transition:background .15s; }
.tab.active{ background:var(--green); color:#fff; border-color:var(--green); }

/* Schedule */
details.sched{ margin-top:14px; border:1px solid var(--line); border-radius:12px; background:var(--cream); padding:6px 12px; }
details.sched summary{ cursor:pointer; color:var(--ink-soft); font-size:.92rem; padding:6px 0; }
.srow{ display:flex; align-items:center; gap:10px; margin-block:6px; }
.srow .time{ inline-size:54px; color:var(--brown); font-size:.85rem; text-align:start; }
.srow .ta{ padding:6px 10px; min-block-size:0; }

/* Journey / bead path */
.journey-head{ text-align:center; margin-bottom:8px; }
.commit{ color:var(--ink); margin:2px 0 10px; }
.commit b{ color:var(--green-deep); }
.progress{ inline-size:80%; max-width:280px; height:7px; border-radius:999px; background:var(--sand-2); margin:6px auto; overflow:hidden; }
.progress>span{ display:block; block-size:100%; background:linear-gradient(90deg,var(--green-soft),var(--green)); transition:inline-size .5s var(--ease); }
.streak{ font-size:.85rem; color:var(--brown); margin:6px 0; }

/* Journey map: ONE tasbīḥ thread — the splash's fine dashed line, serpentining through all
   40 beads, turning at alternating edges (checkpoints sit at the turns) down to the heart. */
.path{ display:flex; flex-direction:column; align-items:center; gap:8px; margin-top:14px; }
.path-row{ display:flex; gap:14px; align-items:center; justify-content:center; position:relative; }
/* DOM stays in logical day order (a11y); even rows fold back visually via row-reverse */
.path-row:nth-child(even){ flex-direction:row-reverse; }
.path-row::before{ content:""; position:absolute; inset-inline:14px; inset-block-start:50%; block-size:0; border-block-start:1.5px dashed var(--line); opacity:.8; z-index:0; }
/* row 8: the ghost spacer occupies the inline-start side — end the thread at bead 40's
   center (ghost 28 + gap 14 + link 14 + gap 14 + half-bead 17 = 87px), not in empty space */
.path-row:nth-child(8)::before{ inset-inline-start:87px; }
/* turn connectors: a C-arc hanging off the turn edge, spanning this row's middle to the next's */
.path-row:nth-child(-n+7)::after{
  content:""; position:absolute; inset-block-start:50%; block-size:calc(100% + 8px); inline-size:16px;
  border:1.5px dashed var(--line); opacity:.8; pointer-events:none; z-index:0;
}
.path-row:nth-child(odd):nth-child(-n+7)::after{  /* rows 1,3,5,7 turn at the inline-end edge */
  inset-inline-end:-13px; border-inline-start:none;
  border-start-end-radius:14px; border-end-end-radius:14px;
}
.path-row:nth-child(even):nth-child(-n+7)::after{ /* rows 2,4,6 turn at the inline-start edge */
  inset-inline-start:-13px; border-inline-end:none;
  border-start-start-radius:14px; border-end-start-radius:14px;
}
/* the heart hangs from the strand's center like a tasbīḥ pendant — a short drop thread */
.path-row:nth-child(8)::after{
  content:""; position:absolute; inset-block-start:100%; inset-inline-start:calc(50% - 1px);
  block-size:14px; inline-size:0; border:none; border-inline-start:1.5px dashed var(--line);
  border-radius:0; opacity:.8; pointer-events:none;
}
.bead{
  position:relative; z-index:1; inline-size:34px; block-size:34px; border-radius:50%;
  border:2px solid var(--brown-soft); background:var(--paper); color:var(--ink-soft);
  font-family:var(--font-body); font-size:.8rem; cursor:pointer; line-height:1;
  display:flex; align-items:center; justify-content:center; transition:transform .12s var(--ease), background .25s;
}
.bead:hover:not(:disabled){ transform:scale(1.14); }
.bead.done{ background:linear-gradient(180deg,var(--green-soft),var(--green)); border-color:var(--green-deep); color:#fff; }
.bead.current{ border-color:var(--green); color:var(--green-deep); font-weight:700; box-shadow:0 0 0 4px rgba(106,168,136,.35); animation:pulse 2.2s var(--ease) infinite; }
@keyframes pulse{ 0%,100%{ box-shadow:0 0 0 4px rgba(106,168,136,.32);} 50%{ box-shadow:0 0 0 7px rgba(106,168,136,.12);} }
.bead.catchup{ border-color:var(--amber-deep); color:var(--amber-deep); border-style:dashed; }
.bead.locked{ opacity:.45; cursor:not-allowed; border-style:dotted; }
.cp{ position:relative; z-index:1; inline-size:28px; block-size:28px; border-radius:7px; transform:rotate(45deg); border:2px solid var(--brown-soft); background:var(--cream); color:var(--brown); cursor:pointer; font-size:.7rem; display:flex; align-items:center; justify-content:center; }
.cp:disabled{ opacity:.4; cursor:not-allowed; }
.cp>span{ transform:rotate(-45deg); }
.cp.done{ background:var(--sand-2); border-color:var(--green); color:var(--green-deep); }
.path-row .link{ inline-size:14px; } /* pure spacer — the ::before thread already runs beneath */
.cp-ghost{ inline-size:28px; block-size:28px; visibility:hidden; } /* row-8 spacer: keeps bead columns aligned */
.path-heart{ font-size:2.1rem; color:var(--brown-soft); margin-top:6px; cursor:pointer; transition:color .3s, transform .3s; }
.path-heart.lit{ color:var(--green); transform:scale(1.18); }
.path-heart:hover{ transform:scale(1.12); }

/* static (non-animating) tasbīḥ for the welcome hero — resting frame is fully lit */
.tasbih-static{ display:flex; justify-content:center; margin:18px 0 6px; }
.tasbih-static .beads-svg{ inline-size:min(64vw,250px); }
.tasbih-static .tb-fill, .tasbih-static .tb-halo, .tasbih-static .tb-heart-fill,
.tasbih-static .tb-heart-halo, .tasbih-static .tb-heart-line{ animation:none; }
.motif{ display:flex; justify-content:center; margin-block-end:6px; }

.demo{ text-align:center; margin-top:22px; }
.demo .iconbtn{ font-size:.78rem; color:var(--brown); opacity:.85; }

/* Setup chips */
.group{ margin-block:16px; }
.group h3{ font-family:var(--font-display); color:var(--green-deep); font-size:1.18rem; margin:0 0 8px; font-weight:400; }
.chips{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:8px; }
.chip{ border:1px solid var(--line); background:var(--paper); color:var(--ink); border-radius:999px; padding:6px 13px; font-size:.9rem; cursor:pointer; font-family:var(--font-body); transition:background .15s, transform .1s; }
.chip:hover{ background:var(--cream); } .chip:active{ transform:scale(.96); }
.chip.sel{ background:var(--green); color:#fff; border-color:var(--green); }

/* Quote / checkpoint — reading face: these are vocalised passages, not headers */
.quote{
  margin:20px 4px; padding:26px 22px; border-radius:var(--radius); text-align:center; border:none;
  background:linear-gradient(160deg, var(--green), var(--green-deep)); color:#fff;
  font-family:var(--font-reading); font-size:1.4rem; line-height:1.75; box-shadow:var(--shadow);
}
html[lang="ar"] .quote{ line-height:1.9; } /* headroom for tashkeel stacks */
.quote::before{ content:"“"; font-size:3rem; opacity:.4; display:block; line-height:.4; margin-bottom:6px; }
/* « matches the content's «» pairs; guillemet ink sits at x-height (the “ metrics would
   drop it into the first text line), so it gets its own size/leading */
html[lang="ar"] .quote::before{ content:"«"; font-size:2.4rem; line-height:1; margin-bottom:2px; }

/* Story / sacred — reading face. The TALL leading is an Arabic need (shadda+vowel stacks
   clip at UI line-heights); English keeps book leading or Cormorant's lines drift apart. */
.story{ font-size:1.12rem; line-height:1.75; white-space:pre-line; color:var(--ink); padding:6px 4px; }
html[lang="ar"] .story{ line-height:2; font-size:1.18rem; } /* Amiri runs optically small */
.story.display{ font-family:var(--font-reading); }
.sacred{
  font-family:var(--font-reading); border-inline-start:3px solid var(--green); background:var(--cream);
  padding:14px 16px; white-space:pre-line; font-size:1.05rem; line-height:1.75; text-align:start;
  border-start-start-radius:0; border-end-start-radius:0; border-start-end-radius:12px; border-end-end-radius:12px;
}
html[lang="ar"] .sacred{ font-size:1.15rem; line-height:2.05; }
.tag{ display:inline-block; font-size:.7rem; background:var(--sand-2); color:var(--ink-soft); border-radius:999px; padding:2px 9px; margin-inline-start:6px; vertical-align:middle; }

/* Locked day */
.locked-card{ background:var(--cream); border:1px solid var(--line); border-radius:var(--radius); padding:28px 20px; margin:18px 0; }
.locked-card h3{ font-family:var(--font-display); color:var(--green-deep); margin:6px 0; font-weight:400; }

/* Keepsakes */
.sec{ font-family:var(--font-display); color:var(--green-deep); font-size:1.2rem; font-weight:400; margin:22px 0 10px; text-align:center; }
.garden{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; padding:10px; background:linear-gradient(180deg,#eff0e0,#e9ecd6); border-radius:var(--radius); border:1px solid #d6d9b8; } /* warm sage soil — the green lives in the leaves, not a minty bed */
.leaf{ font-family:var(--font-display); color:var(--green-deep); background:#fff; border:1px solid var(--green-soft); border-radius:999px; padding:5px 14px; line-height:1.3; }
.thread-item{
  display:flex; gap:10px; align-items:baseline; padding:9px 12px; border-inline-start:2px solid var(--green-soft);
  background:var(--cream); margin-block:6px;
  border-start-start-radius:0; border-end-start-radius:0; border-start-end-radius:10px; border-end-end-radius:10px;
}
.thread-item .d{ font-size:.78rem; color:var(--brown); white-space:nowrap; }
.letter{ background:linear-gradient(180deg,#f3ede0,#efe6d3); border:1px solid var(--sand-2); border-radius:12px; padding:12px 14px; margin-block:8px; font-family:var(--font-reading); line-height:1.7; color:var(--green-deep); font-size:1.08rem; }
html[lang="ar"] .letter{ line-height:1.9; }
.letter .d{ display:block; font-family:var(--font-body); font-size:.76rem; color:var(--brown); margin-bottom:4px; }

/* Completion */
.done-hero{ text-align:center; padding-block:10px; }
.done-hero .big{ font-family:var(--font-display); font-size:2rem; color:var(--green-deep); margin:6px 0; font-weight:400; }

.note{ margin-top:26px; text-align:center; font-size:.77rem; color:var(--ink-soft); }
/* save-status line (day/checkpoint) — fixed height so it never shifts the form while typing */
.savestate{ min-block-size:1.3em; margin:2px 0 8px; font-size:.78rem; text-align:center; color:var(--ink-soft); opacity:.85; }
.ornament{ display:flex; gap:4px; justify-content:center; margin:14px 0; opacity:.7; }
.ornament i{ inline-size:6px; block-size:6px; border-radius:50%; background:var(--brown-soft); display:block; }
.ornament i:nth-child(2){ inline-size:9px; block-size:9px; } .ornament i:nth-child(3){ inline-size:12px; block-size:12px; }

/* auth / loading */
.otp{ text-align:center; letter-spacing:.6em; font-size:1.5rem; font-family:var(--font-display); color:var(--green-deep); }
.error{ color:#9c3a2b; background:#f7e7e1; border:1px solid #e2b8a8; border-radius:10px; padding:8px 12px; margin:10px 0; font-size:.9rem; text-align:center; }
.hint{ margin-top:14px; font-size:.8rem; color:var(--ink-soft); background:var(--cream); border:1px dashed var(--line); border-radius:10px; padding:8px 12px; text-align:center; }

@media (prefers-reduced-motion: reduce){
  *{ animation:none!important; transition:none!important; }
}

/* ====================================================================
   Boot / loading splash — tasbīḥ count toward the heart
   (the app's own bead→heart progress motif, used as the loader).
   Painted statically in index.html so it appears on first paint,
   independent of the supabase-js CDN module; app.js reuses it via vLoading().
   ==================================================================== */

/* An empty topbar must leave NO chrome — otherwise its border + padding
   render as a stray hairline across a blank frame before JS boots. */
#topbar:empty{ padding:0; border:0; background:none; backdrop-filter:none; }

/* Let the splash fill #app's flex-resolved height so it can truly centre
   (a percentage min-height collapses here — #app's height is flex-grown, not explicit). */
#app:has(.splash){ display:flex; }
.splash{
  position:relative; flex:1;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:clamp(30px, 7vh, 58px);
  min-block-size:100%;
  padding:24px 20px; overflow:hidden;
}
/* soft green glow, breathing behind the focal area (depth without noise) */
.splash::before{
  content:""; position:absolute; inset-block-start:52%; inset-inline-start:50%;
  inline-size:min(80vw,340px); block-size:min(80vw,340px);
  transform:translate(-50%,-50%);
  background:radial-gradient(circle at 50% 50%,
    rgba(106,168,136,.30) 0%, rgba(53,112,86,.12) 40%, rgba(53,112,86,0) 70%);
  filter:blur(2px); pointer-events:none; z-index:0; opacity:.7;
  animation:splashGlow 6.4s var(--ease) infinite;
}
.splash-logo,.splash-tasbih,.splash-load{ position:relative; z-index:1; }

.splash-logo{ display:flex; flex-direction:column; align-items:center; gap:12px; }
.splash-title{
  font-family:var(--font-display); color:var(--green-deep); font-weight:700;
  font-size:clamp(2.7rem,12vw,3.35rem); line-height:1.1; margin:0;
}
.splash-rule{
  inline-size:min(56vw,224px); block-size:1px; opacity:.9;
  background:linear-gradient(90deg,transparent,var(--line) 18%,var(--brown-soft) 50%,var(--line) 82%,transparent);
}
.splash-sub{
  font-family:var(--font-body); color:var(--ink-soft);
  font-size:.92rem; line-height:1.8; max-inline-size:30ch; margin:0; text-align:center;
}
.splash-tasbih{ display:flex; flex-direction:column; align-items:center; gap:clamp(22px,5vh,34px); }
.beads-svg{ display:block; inline-size:min(80vw,290px); height:auto; overflow:visible; }
/* the count travels toward the heart in reading order */
html[dir="rtl"] .beads-svg{ transform:scaleX(-1); }

.tb-thread{ fill:none; stroke:var(--line); stroke-width:1.4; stroke-linecap:round; opacity:.7; stroke-dasharray:2 5; }
.tb-base{ fill:var(--cream); stroke:var(--brown-soft); stroke-width:1.3; }
/* resting state = "lit" (so prefers-reduced-motion shows a complete tasbīḥ);
   animation-fill-mode:backwards reveals the empty 0% frame during each bead's delay. */
.tb-fill{ fill:var(--green); transform-box:fill-box; transform-origin:center; opacity:1; transform:scale(1);
          animation:tbLight 7.2s var(--ease) infinite backwards; }
.tb-halo{ fill:var(--green-soft); transform-box:fill-box; transform-origin:center; opacity:0;
          animation:tbHalo 7.2s var(--ease) infinite backwards; }
.b1 .tb-fill,.b1 .tb-halo{ animation-delay:0s; }
.b2 .tb-fill,.b2 .tb-halo{ animation-delay:.62s; }
.b3 .tb-fill,.b3 .tb-halo{ animation-delay:1.24s; }
.b4 .tb-fill,.b4 .tb-halo{ animation-delay:1.86s; }
.b5 .tb-fill,.b5 .tb-halo{ animation-delay:2.48s; }
.b6 .tb-fill,.b6 .tb-halo{ animation-delay:3.10s; }
.b7 .tb-fill,.b7 .tb-halo{ animation-delay:3.72s; }

.tb-heart-line{ fill:none; stroke:var(--green-soft); stroke-width:2.4; stroke-linejoin:round; stroke-linecap:round;
  transform-box:fill-box; transform-origin:center 58%; animation:tbHeartPulse 7.2s var(--ease) infinite; }
.tb-heart-fill{ fill:var(--green); transform-box:fill-box; transform-origin:center 58%;
  opacity:1; transform:scale(1); animation:tbHeartFill 7.2s var(--ease) infinite backwards; }
.tb-heart-halo{ fill:none; stroke:var(--green-soft); stroke-width:2; transform-box:fill-box; transform-origin:center 58%;
  opacity:0; animation:tbHeartHalo 7.2s var(--ease) infinite backwards; }

.splash-load{ font-family:var(--font-body); color:var(--ink-soft); font-size:.9rem; letter-spacing:.03em; margin:0;
  opacity:.82; animation:tbLabel 3s ease-in-out infinite; }

@keyframes splashGlow{ 0%,100%{ opacity:.5; transform:translate(-50%,-50%) scale(.94);} 50%{ opacity:.92; transform:translate(-50%,-50%) scale(1.06);} }
@keyframes tbLight{ 0%{transform:scale(0);opacity:0;} 7%{transform:scale(1.18);opacity:1;} 12%{transform:scale(1);opacity:1;} 62%{transform:scale(1);opacity:1;} 78%{transform:scale(.55);opacity:0;} 100%{transform:scale(0);opacity:0;} }
@keyframes tbHalo{ 0%{transform:scale(.4);opacity:0;} 7%{transform:scale(1.9);opacity:.5;} 20%{transform:scale(2.4);opacity:0;} 100%{transform:scale(2.4);opacity:0;} }
@keyframes tbHeartPulse{ 0%,55%{transform:scale(1);} 62%{transform:scale(1.12);} 70%{transform:scale(.98);} 76%{transform:scale(1.03);} 82%,100%{transform:scale(1);} }
@keyframes tbHeartFill{ 0%,55%{transform:scale(.2);opacity:0;} 63%{transform:scale(1.06);opacity:1;} 72%{transform:scale(1);opacity:1;} 88%{opacity:1;} 97%{transform:scale(.6);opacity:0;} 100%{transform:scale(.2);opacity:0;} }
@keyframes tbHeartHalo{ 0%,57%{transform:scale(.9);opacity:0;} 64%{transform:scale(1.15);opacity:.55;} 80%{transform:scale(1.8);opacity:0;} 100%{transform:scale(1.8);opacity:0;} }
@keyframes tbLabel{ 0%,100%{opacity:.5;} 50%{opacity:.95;} }

/* ---------- settings ---------- */
.settings .group .btn{ margin-block-start:8px; }
.settings select.txt{ margin-block-end:8px; appearance:auto; }
.btn.danger{ background:none; color:#9c3a2b; border:1px solid #e2b8a8; box-shadow:none; }
.btn.danger:hover{ background:#f7e7e1; filter:none; }
.settings .rt-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-block:8px; }
.settings .rt-row label{ color:var(--ink-soft); font-size:.95rem; }
.settings .rt-row input[type="time"]{ inline-size:auto; min-inline-size:130px; }