/* Members' area — same look as the leaders' system (navy header, gold church name, avatar chip),
   phone-first, self-contained so the folder can be its own subdomain. */
:root { --navy:#1a3a6b; --navy-2:#24519e; --navy-deep:#0f2347; --gold:#f0b429; --gold-soft:#f6cf6a;
        --ink:#1a1a2e; --muted:#64748b; --line:#e2e8f0; --bg:#f5f7fa; --ok:#1f8a4c; --err:#b42318;
        --r:14px; --shadow:0 1px 2px rgba(16,24,40,.04), 0 6px 18px rgba(16,24,40,.07); --ease:cubic-bezier(.2,.7,.2,1); }
*, *::before, *::after { box-sizing:border-box; }
[hidden] { display:none !important; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; font:15px/1.5 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; color:var(--ink); background:var(--bg); }
.ic { width:1em; height:1em; vertical-align:-.15em; }
a { color:inherit; }

/* ── Sign-in ─────────────────────────────────────────────── */
body.p-auth { min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:24px 16px max(24px, env(safe-area-inset-bottom));
  background:radial-gradient(900px 520px at 50% 0%, #24519e 0%, #1a3a6b 38%, #0f2347 100%) fixed; }
.p-brand { text-align:center; color:#fff; margin-bottom:18px; animation:pUp .5s var(--ease) both; }
.p-brand img { display:block; margin:0 auto 10px; filter:drop-shadow(0 6px 16px rgba(0,0,0,.25)); }
.p-brand .name { font-size:16px; font-weight:700; letter-spacing:1.5px; }
.p-brand .sub { font-size:12.5px; color:var(--gold-soft); margin-top:2px; font-weight:600; }
.p-card { width:100%; max-width:400px; background:#fff; border-radius:18px; padding:24px 22px 20px; box-shadow:0 20px 50px rgba(5,15,40,.35); }
.p-enter { animation:pUp .45s .05s var(--ease) both; }
.p-card h1 { margin:6px 0 2px; font-size:21px; color:var(--navy); }
.p-card .lead { margin:0 0 16px; font-size:13.5px; color:var(--muted); }
.p-steps { display:flex; gap:6px; }
.p-steps i { flex:1; height:4px; border-radius:4px; background:#e6ebf3; }
.p-steps i.on { background:var(--gold); }
.p-label { display:block; font-size:12.5px; font-weight:600; margin-bottom:6px; }
.p-phone { display:flex; align-items:stretch; border:1.5px solid #cfd8e6; border-radius:12px; overflow:hidden; background:#f8fafc; transition:border-color .2s, box-shadow .2s; }
.p-phone:focus-within { border-color:var(--navy); box-shadow:0 0 0 4px rgba(26,58,107,.12); background:#fff; }
.p-phone span { display:flex; align-items:center; padding:0 12px; font-weight:600; color:var(--muted); background:#eef2f8; border-right:1px solid #dbe3ef; }
.p-phone input { flex:1; min-width:0; border:0; background:transparent; font:inherit; font-size:17px; padding:12px; outline:none; letter-spacing:.5px; }
.p-code { display:block; width:100%; border:1.5px solid #cfd8e6; border-radius:12px; background:#f8fafc; font:inherit; font-size:26px; font-weight:600;
  text-align:center; letter-spacing:.55em; padding:12px 0 12px .55em; outline:none; font-variant-numeric:tabular-nums; transition:border-color .2s, box-shadow .2s; }
.p-code:focus { border-color:var(--navy); box-shadow:0 0 0 4px rgba(26,58,107,.12); background:#fff; }
.p-btn { position:relative; display:flex; align-items:center; justify-content:center; width:100%; min-height:50px; margin-top:14px; border:0; border-radius:12px;
  font:inherit; font-size:15.5px; font-weight:600; color:#fff; background:var(--navy); cursor:pointer; transition:background .2s, transform .1s; -webkit-tap-highlight-color:transparent; }
.p-btn:hover { background:var(--navy-2); }
.p-btn:active { transform:scale(.985); }
.p-spin { display:none; width:20px; height:20px; border-radius:50%; border:2.5px solid rgba(255,255,255,.35); border-top-color:#fff; animation:pSpin .7s linear infinite; }
.p-btn.busy .p-btn-txt { display:none; } .p-btn.busy .p-spin { display:block; } .p-btn.busy { pointer-events:none; }
.p-msg { display:flex; gap:8px; align-items:flex-start; padding:10px 12px; border-radius:10px; background:#fef3f2; color:var(--err); font-size:13px; margin-bottom:12px; animation:pShake .35s; }
.p-row { display:flex; justify-content:space-between; gap:8px; margin-top:12px; }
.p-row form { margin:0; }
.p-link { background:none; border:0; padding:8px 2px; font:inherit; font-size:13px; font-weight:600; color:var(--navy); cursor:pointer; }
.p-link:disabled { color:#9aa6b8; cursor:default; }
.p-foot { color:#c9d6ee; font-size:12px; margin-top:16px; text-align:center; opacity:.85; }

/* ── App: header identical in spirit to the leaders' topbar ── */
body.p-app { min-height:100vh; padding-bottom:max(24px, env(safe-area-inset-bottom)); }
.topbar { position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:12px; height:62px; padding:0 14px;
  background:var(--navy); color:#fff; box-shadow:0 2px 10px rgba(15,23,42,.18); }
.tb-logo { flex-shrink:0; border-radius:9px; background:rgba(255,255,255,.1); padding:3px; }
.tb-brand { flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.2; }
.tb-church { font-size:11px; font-weight:600; letter-spacing:1.2px; color:var(--gold-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tb-page { font-size:16px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:opacity .15s; }
.tb-user { display:flex; align-items:center; gap:9px; padding:5px 12px 5px 5px; border-radius:24px; background:rgba(255,255,255,.08); }
.tb-avatar { width:32px; height:32px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; background:var(--gold); color:#1a2a44; font-weight:700; font-size:14px; flex-shrink:0; }
.tb-user-txt { display:flex; flex-direction:column; line-height:1.15; }
.tb-name { font-size:12.5px; font-weight:600; max-width:170px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tb-role { font-size:10.5px; opacity:.7; }
.tb-logout-form { margin:0; }
.tb-logout { display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border:0; border-radius:10px; background:transparent; color:#fff; font-size:21px; cursor:pointer; }
.tb-logout:hover { background:rgba(255,255,255,.12); }

/* Tabs */
.p-tabs { position:sticky; top:62px; z-index:15; background:#fff; border-bottom:1px solid var(--line); }
.p-tabs-in { position:relative; display:grid; grid-template-columns:repeat(var(--n,3),1fr); max-width:760px; margin:0 auto; }
.p-tabs a { display:flex; align-items:center; justify-content:center; gap:7px; padding:13px 6px; text-decoration:none; color:var(--muted); font-size:13.5px; font-weight:600; -webkit-tap-highlight-color:transparent; transition:color .2s; }
.p-tabs a.on { color:var(--navy); }
.p-tabs a .ic { font-size:17px; }
.p-ink { position:absolute; bottom:-1px; left:0; height:3px; width:calc(100% / var(--n,3)); background:var(--gold); border-radius:3px 3px 0 0; transition:transform .3s var(--ease); }

.p-wrap { max-width:760px; margin:0 auto; padding:16px 16px 8px; }
.p-pane { animation:pIn .28s var(--ease) both; }
.p-hero { position:relative; overflow:hidden; color:#fff; border-radius:var(--r); padding:18px 18px 16px; margin-bottom:14px;
  background:linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 100%); box-shadow:var(--shadow); }
.p-hero::after { content:''; position:absolute; right:-50px; top:-60px; width:180px; height:180px; border-radius:50%; background:rgba(240,180,41,.14); }
/* Church logo watermark, as on the staff dashboard banner */
.p-hero-logo { position:absolute; right:-30px; bottom:-60px; width:200px; height:auto; opacity:.08; transform:rotate(-8deg); pointer-events:none; z-index:0; }
.p-hero > :not(.p-hero-logo) { position:relative; z-index:1; }
.p-hero span { display:block; font-size:11px; text-transform:uppercase; letter-spacing:1px; color:var(--gold-soft); font-weight:600; }
.p-hero b { display:block; font-size:30px; line-height:1.2; margin:4px 0 2px; font-variant-numeric:tabular-nums; }
.p-hero small { opacity:.8; font-size:12.5px; }
.p-years { position:relative; z-index:1; display:flex; gap:6px; margin-top:12px; overflow-x:auto; }
.p-years a { text-decoration:none; font-size:12.5px; font-weight:600; padding:6px 12px; border-radius:999px; background:rgba(255,255,255,.12); color:#fff; }
.p-years a.on { background:var(--gold); color:#1a2a44; }
.p-card-in { background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:14px 16px; margin-bottom:14px; box-shadow:var(--shadow); }
.p-card-in h2 { font-size:12px; text-transform:uppercase; letter-spacing:.7px; color:var(--muted); margin:0 0 8px; }
.p-types { list-style:none; margin:0; padding:0; }
.p-types li { padding:8px 0; }
.p-types li div { display:flex; justify-content:space-between; gap:10px; font-size:14px; margin-bottom:5px; }
.p-types b { font-variant-numeric:tabular-nums; white-space:nowrap; }
.p-types i { display:block; height:6px; border-radius:6px; background:#eef1f6; position:relative; overflow:hidden; }
.p-types i::after { content:''; position:absolute; inset:0 auto 0 0; width:var(--w); background:var(--navy-2); border-radius:6px; animation:pGrow .6s var(--ease) both; }
.p-month { font-size:12px; font-weight:700; color:var(--navy); margin:12px 0 2px; }
.p-list { list-style:none; margin:0; padding:0; }
.p-list li { display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid #eef1f6; }
.p-list li:last-child { border-bottom:0; }
.p-day { width:38px; height:38px; flex-shrink:0; border-radius:10px; background:#eef3fb; display:flex; align-items:center; justify-content:center; color:var(--navy); }
.p-what { flex:1; min-width:0; } .p-what b { display:block; font-size:14px; } .p-what small { color:var(--muted); font-size:12px; }
.p-amt { font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap; }
.p-pledge { background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:14px 16px; margin-bottom:12px; box-shadow:var(--shadow); }
.p-ph { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:8px; }
.p-ph span { font-size:12px; font-weight:700; color:var(--navy); background:#eef3fb; padding:3px 10px; border-radius:999px; }
.p-ph span.done { color:var(--ok); background:#ecfdf3; }
.p-bar { height:10px; border-radius:10px; background:#eef1f6; overflow:hidden; }
.p-bar i { display:block; height:100%; width:var(--w); border-radius:10px; background:linear-gradient(90deg, var(--ok), #34b46b); animation:pGrow .7s var(--ease) both; }
.p-pnums { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:12px; }
.p-pnums span { display:block; font-size:10.5px; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); font-weight:600; }
.p-pnums b { font-size:13.5px; font-variant-numeric:tabular-nums; }
.p-report { display:flex; align-items:center; gap:12px; background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:14px; margin-bottom:10px;
  text-decoration:none; box-shadow:var(--shadow); transition:transform .15s, border-color .15s; }
.p-report:hover { border-color:#c9d6ee; transform:translateY(-1px); }
/* Report kinds: own colour + date tile, grouped under their heading */
.p-report { --k:var(--navy); --kt:#eef3fb; border-left:4px solid var(--k); }
.p-rk-mwezi  { --k:#1a3a6b; --kt:#eaf0fa; }
.p-rk-robo   { --k:#b7791f; --kt:#fff4dc; }
.p-rk-mwaka  { --k:#1f8a4c; --kt:#e7f6ed; }
.p-rk-maalum { --k:#6b4fb3; --kt:#f1ecfb; }
.p-ri { width:52px; height:52px; border-radius:12px; background:var(--kt); color:var(--k); display:flex; flex-direction:column; align-items:center; justify-content:center; flex-shrink:0; line-height:1.05; }
.p-ri b { font-size:15px; font-weight:800; letter-spacing:.3px; }
.p-ri small { font-size:10.5px; font-weight:600; opacity:.85; margin-top:2px; }
.p-rt { flex:1; min-width:0; } .p-rt b { display:block; font-size:14px; line-height:1.35; }
.p-rt em { display:inline-block; font-style:normal; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.6px; color:var(--k); background:var(--kt); padding:1px 8px; border-radius:999px; margin-bottom:3px; }
.p-rt small { display:block; color:var(--muted); font-size:12px; margin-top:2px; }
.p-rgroup { display:flex; align-items:center; gap:8px; font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.8px; color:var(--muted); margin:18px 2px 8px; }
.p-rgroup:first-child { margin-top:2px; }
.p-rgroup::before { content:''; width:4px; height:14px; border-radius:2px; background:var(--gold); }
.p-rgroup span { margin-left:auto; font-size:11px; background:#eef1f6; color:var(--ink); border-radius:999px; padding:0 8px; }
.p-rg-mwezi::before { background:#1a3a6b; } .p-rg-robo::before { background:#b7791f; } .p-rg-mwaka::before { background:#1f8a4c; } .p-rg-maalum::before { background:#6b4fb3; }
.p-go { font-size:24px; color:#9aa6b8; }
.p-empty { text-align:center; color:var(--muted); padding:36px 12px; } .p-empty .ic { font-size:34px; opacity:.4; } .p-empty p { margin:8px 0 0; }
.p-note { color:var(--muted); font-size:12px; text-align:center; margin:8px 0 0; }

@media (max-width:640px) {
  .topbar { height:56px; padding:0 8px 0 10px; gap:8px; }
  .p-tabs { top:56px; }
  .tb-user { padding:0; background:transparent; }
  .tb-user-txt { display:none; }
  .tb-page { font-size:15px; }
  .p-hero b { font-size:26px; }
}
@keyframes pUp { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }
@keyframes pIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
@keyframes pGrow { from { width:0; } }
@keyframes pSpin { to { transform:rotate(360deg); } }
@keyframes pShake { 20%, 60% { transform:translateX(-4px); } 40%, 80% { transform:translateX(4px); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation:none !important; transition:none !important; } }

/* ── Greeting ─────────────────────────────────────────────── */
.p-hello { display:flex; align-items:center; gap:14px; margin:2px 0 14px; animation:pUp .45s var(--ease) both; }
.p-hello h1 { margin:0; font-size:19px; line-height:1.25; color:var(--navy); }
.p-hello p { margin:2px 0 0; font-size:12.5px; color:var(--muted); }
.p-sky { position:relative; flex-shrink:0; width:46px; height:46px; border-radius:14px; overflow:hidden; box-shadow:var(--shadow); }
.p-sky::before, .p-sky::after { content:''; position:absolute; }
.p-sky-sun { background:linear-gradient(160deg,#fff6db,#ffe6a3); }
.p-sky-sun::before { width:20px; height:20px; left:13px; top:13px; border-radius:50%; background:#f0b429; box-shadow:0 0 0 5px rgba(240,180,41,.25); animation:pGlow 3s ease-in-out infinite; }
.p-sky-dusk { background:linear-gradient(180deg,#ffd29a 0%,#f08a5d 55%,#7a4fd0 100%); }
.p-sky-dusk::before { width:22px; height:22px; left:12px; top:20px; border-radius:50%; background:#ffe08a; }
.p-sky-dusk::after { left:0; right:0; bottom:0; height:14px; background:rgba(26,58,107,.55); }
.p-sky-moon { background:linear-gradient(180deg,#1a3a6b,#0f2347); }
.p-sky-moon::before { width:20px; height:20px; left:12px; top:12px; border-radius:50%; background:#f6e7b0; }
.p-sky-moon::after { width:18px; height:18px; left:19px; top:9px; border-radius:50%; background:#16305a; }
@keyframes pGlow { 50% { box-shadow:0 0 0 9px rgba(240,180,41,.12); } }

/* ── Code verification overlay: rings while checking → drawn tick or cross ── */
.p-verify { position:fixed; inset:0; z-index:9999; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px;
  background:radial-gradient(700px 420px at 50% 40%, rgba(36,81,158,.96), rgba(15,35,71,.97)); color:#fff; animation:pFade .2s ease both; }
.p-verify.out { animation:pFadeOut .25s ease forwards; }
.pv-stage { position:relative; width:120px; height:120px; }
.pv-stage svg { position:absolute; inset:0; width:120px; height:120px; }
.pv-track { fill:none; stroke:rgba(255,255,255,.12); stroke-width:5; }
.pv-arc { fill:none; stroke:var(--gold); stroke-width:5; stroke-linecap:round; stroke-dasharray:90 237; transform-origin:60px 60px; animation:pSpin .9s linear infinite; }
.pv-logo { position:absolute; left:28px; top:28px; width:64px; height:64px; border-radius:50%; animation:pBreath 1.6s ease-in-out infinite; }
.pv-ok, .pv-no { opacity:0; }
.pv-ok circle, .pv-no circle { fill:none; stroke-width:5; stroke-dasharray:327; stroke-dashoffset:327; }
.pv-ok path, .pv-no path { fill:none; stroke-width:7; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:90; stroke-dashoffset:90; }
.pv-ok circle, .pv-ok path { stroke:#4ade80; }
.pv-no circle, .pv-no path { stroke:#f87171; }
.p-verify.ok .pv-ring, .p-verify.no .pv-ring, .p-verify.ok .pv-logo, .p-verify.no .pv-logo { opacity:0; transition:opacity .2s; }
.p-verify.ok .pv-ok, .p-verify.no .pv-no { opacity:1; }
.p-verify.ok .pv-ok circle, .p-verify.no .pv-no circle { animation:pDraw .45s ease-out forwards; }
.p-verify.ok .pv-ok path, .p-verify.no .pv-no path { animation:pDraw .35s .35s ease-out forwards; }
.p-verify.ok .pv-stage { animation:pPop .4s .6s var(--ease); }
.p-verify.no .pv-stage { animation:pShake .4s .55s; }
.pv-text { margin:0; font-size:15px; font-weight:600; letter-spacing:.3px; min-height:22px; text-align:center; padding:0 20px; }
@keyframes pDraw { to { stroke-dashoffset:0; } }
@keyframes pPop { 50% { transform:scale(1.08); } }
@keyframes pBreath { 50% { transform:scale(.94); } }
@keyframes pFade { from { opacity:0; } }
@keyframes pFadeOut { to { opacity:0; visibility:hidden; } }
@media (prefers-reduced-motion: reduce) {
  .pv-ok circle, .pv-no circle, .pv-ok path, .pv-no path { stroke-dashoffset:0; }
}

/* ── Six-box code entry (only when JavaScript runs; otherwise the plain field above) ── */
.p-hint { display:none; margin:10px 0 0; font-size:12px; color:var(--muted); text-align:center; }
.js .p-hint { display:block; }
.js .p-btn-fallback { display:none; }
.js .p-btn-fallback.show { display:flex; animation:pUp .3s var(--ease) both; }
.p-boxes { display:none; }
.js .p-otp { position:relative; }
.js .p-boxes { display:grid; grid-template-columns:repeat(6,1fr); gap:8px; }
.js .p-boxes span { position:relative; display:flex; align-items:center; justify-content:center; aspect-ratio:1 / 1.12; max-height:64px;
  border-radius:12px; background:#f1f4f9; border:2px solid transparent; font-size:24px; font-weight:700; color:var(--gold-soft);
  font-variant-numeric:tabular-nums; transition:background .18s, border-color .18s, transform .18s, box-shadow .18s; }
/* the real field covers the boxes: taps, paste and autofill go to it; its own text and caret are invisible */
.js .p-otp .p-code { position:absolute; inset:0; z-index:2; width:100%; height:100%; padding:0; margin:0; border:0; border-radius:12px;
  background:transparent; box-shadow:none; color:transparent; caret-color:transparent; font-size:16px; letter-spacing:0; text-align:left; outline:none; }
.js .p-otp .p-code::selection { background:transparent; color:transparent; }
/* box being typed into: yellow frame and a blinking caret */
.js .p-boxes span.a { background:#fffaf0; border-color:var(--gold); box-shadow:0 0 0 4px rgba(240,180,41,.18); }
.js .p-boxes span.a::after { content:''; width:2px; height:46%; border-radius:2px; background:var(--gold); animation:pBlink 1s steps(1) infinite; }
/* filled box: dark blue with a gold digit, popping in */
.js .p-boxes span.f { background:var(--navy); border-color:var(--navy); color:var(--gold-soft); box-shadow:0 4px 10px rgba(26,58,107,.25); animation:pPopIn .22s var(--ease); }
.js .p-otp.good .p-boxes span { background:#1f8a4c; border-color:#1f8a4c; color:#fff; box-shadow:none; }
@keyframes pPopIn { 0% { transform:scale(.8); } 60% { transform:scale(1.08); } 100% { transform:scale(1); } }
@keyframes pBlink { 50% { opacity:0; } }
@media (max-width:360px) { .js .p-boxes { gap:6px; } .js .p-boxes span { font-size:21px; border-radius:10px; } }
.p-foot-app { color:var(--muted); opacity:1; margin:22px 0 4px; }

/* ── "Install on your phone" sheet ───────────────────────── */
.p-sheet { position:fixed; inset:0; z-index:60; display:flex; align-items:flex-end; justify-content:center; }
.pi-back { position:absolute; inset:0; background:rgba(8,20,40,.55); opacity:0; transition:opacity .3s var(--ease); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); }
.pi-card { position:relative; width:100%; max-width:460px; background:#fff; border-radius:22px 22px 0 0; padding:10px 20px max(18px, env(safe-area-inset-bottom));
  box-shadow:0 -10px 40px rgba(8,20,40,.25); transform:translateY(105%); transition:transform .38s var(--ease); border-top:4px solid var(--gold); }
.p-sheet.in .pi-back { opacity:1; } .p-sheet.in .pi-card { transform:none; }
@media (min-width:640px) { .p-sheet { align-items:center; } .pi-card { border-radius:20px; transform:translateY(30px) scale(.97); opacity:0; transition:transform .3s var(--ease), opacity .3s; }
  .p-sheet.in .pi-card { opacity:1; } }
.pi-grab { display:block; width:42px; height:5px; border-radius:5px; background:#d7dde7; margin:0 auto 14px; }
.pi-head { display:flex; gap:14px; align-items:center; margin-bottom:12px; }
.pi-head img { width:56px; height:56px; border-radius:14px; flex-shrink:0; box-shadow:0 4px 14px rgba(26,58,107,.25); animation:pPopIn .5s var(--ease) .15s both; }
.pi-head h2 { margin:0; font-size:17px; line-height:1.3; color:var(--navy); }
.pi-head p { margin:3px 0 0; font-size:13px; color:var(--muted); }
.pi-mode { display:none; } .p-sheet[data-mode="android"] .pi-android, .p-sheet[data-mode="ios"] .pi-ios, .p-sheet[data-mode="inapp"] .pi-inapp { display:block; }
.pi-why { list-style:none; margin:4px 0 0; padding:0; }
.pi-why li { position:relative; padding:6px 0 6px 28px; font-size:14px; }
.pi-why li::before { content:''; position:absolute; left:2px; top:9px; width:16px; height:16px; border-radius:50%; background:var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.3 7 10.7l4.5-5' fill='none' stroke='%231a3a6b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat; }
.pi-steps { margin:4px 0 0; padding:0; list-style:none; counter-reset:s; }
.pi-steps li { counter-increment:s; position:relative; padding:8px 0 8px 38px; font-size:14px; border-bottom:1px dashed var(--line); }
.pi-steps li:last-child { border-bottom:0; }
.pi-steps li::before { content:counter(s); position:absolute; left:0; top:7px; width:26px; height:26px; border-radius:50%; background:var(--navy); color:var(--gold); font-weight:700; font-size:13px; display:flex; align-items:center; justify-content:center; }
.pi-share { width:18px; height:18px; vertical-align:-3px; color:#0a84ff; }
.pi-hint { font-size:12.5px; color:var(--muted); background:#fff8e6; border-radius:10px; padding:8px 12px; margin:10px 0 0; }
.pi-text { font-size:14px; margin:4px 0 0; }
.pi-later { display:block; width:100%; margin-top:6px; padding:12px; border:0; background:none; color:var(--muted); font:inherit; font-size:14px; font-weight:600; cursor:pointer; }
.pi-later:hover { color:var(--ink); }
.p-install-link { display:inline-flex; align-items:center; gap:6px; margin:0 auto 10px; padding:7px 14px; border-radius:999px; border:1px solid var(--line); background:#fff;
  color:var(--navy); font:inherit; font-size:12.5px; font-weight:600; cursor:pointer; box-shadow:var(--shadow); }
.p-foot-app .p-install-link { display:flex; }
.p-foot-app .p-install-link[hidden] { display:none; }
@media (prefers-reduced-motion:reduce) { .pi-card, .pi-back { transition:none; } }

/* ── PIN ya Matoleo ─────────────────────────────────────────────── */
.p-pin { display:block; width:100%; box-sizing:border-box; border:1.5px solid #cfd8e6; border-radius:12px; background:#f8fafc; font:inherit; font-size:22px;
  letter-spacing:.6em; text-align:center; padding:11px 12px 11px calc(12px + .6em); outline:none; transition:border-color .2s, box-shadow .2s;
  -webkit-text-security:disc; text-security:disc; font-variant-numeric:tabular-nums; }
.p-pin:focus { border-color:var(--navy); box-shadow:0 0 0 4px rgba(26,58,107,.12); background:#fff; }
.p-pin::placeholder { color:#b6c1d1; letter-spacing:.6em; }
.p-label-pin { margin-top:14px; }
.p-check { display:flex; gap:9px; align-items:flex-start; margin-top:12px; font-size:12.5px; color:var(--muted); cursor:pointer; line-height:1.4; }
.p-check input { width:18px; height:18px; margin:0; flex:none; accent-color:var(--navy); }
.p-or { text-align:center; font-size:12.5px; color:var(--muted); margin:16px 0 -6px; }
.p-btn-ghost { background:#fff; color:var(--navy); border:1.5px solid #cfd8e6; }
.p-btn-ghost:hover { background:#f3f6fb; }
.p-btn-ghost .p-spin { border-color:rgba(26,58,107,.25); border-top-color:var(--navy); }
.p-msg-info { background:#eef4ff; color:var(--navy); animation:none; }
.p-flash { display:flex; gap:8px; align-items:flex-start; padding:11px 14px; border-radius:12px; background:#ecfdf3; color:#14643a; font-size:13px; margin:0 0 14px; }
.p-flash svg, .p-msg-info svg { flex:none; width:18px; height:18px; }
.p-pin-card { background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:18px 16px 14px; margin-bottom:14px; box-shadow:var(--shadow); text-align:center; }
.p-pin-ico { width:48px; height:48px; margin:0 auto 8px; border-radius:50%; background:#fff6dd; color:#b7791f; display:grid; place-items:center; }
.p-pin-ico svg { width:22px; height:22px; }
.p-pin-card h2 { margin:0 0 4px; font-size:17px; color:var(--navy); }
.p-pin-card > p { margin:0 0 14px; font-size:13px; color:var(--muted); }
.p-pin-card .p-form { text-align:left; }
.p-pin-card .p-label { margin-top:10px; }
.p-pin-two { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.p-pin-rule { margin:8px 0 0; font-size:11.5px; color:var(--muted); }
.p-pin-later { margin:6px 0 0; }
.p-pin-back { display:inline-block; margin-top:8px; text-decoration:none; }
.p-foot-app a.p-install-link { width:fit-content; text-decoration:none; color:var(--navy); font-weight:600; }
.p-rk-ukaguzi { --k:#0e7490; --kt:#e0f4f8; } .p-rg-ukaguzi::before { background:#0e7490; }
.p-rk-ukaguzi .p-ri b svg { width:20px; height:20px; }