/* 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(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% / 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); }
.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); }
.p-ri { width:40px; height:40px; border-radius:11px; background:#fff6e0; color:#b7791f; display:flex; align-items:center; justify-content:center; font-size:19px; flex-shrink:0; }
.p-rt { flex:1; min-width:0; } .p-rt b { display:block; font-size:14px; } .p-rt small { color:var(--muted); font-size:12px; }
.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; }