/* ============================================================
   TEC Ikoyi Member Hub — design system
   Brand: deep blue #195296 · lime #BED000 · sky #A1DAF8
   Lime is a fill/accent only — never used as text on light.
   ============================================================ */
:root{
  --ink:#14233B; --ink-2:#213A5C; --navy:#0C2742;
  --blue:#195296; --blue-2:#2C6DB5;
  --lime:#BED000; --lime-soft:#E4F09A;
  --sky:#A1DAF8; --sky-soft:#D8EAFA;
  --paper:#EEF3F9; --card:#FFFFFF;
  --muted:#6E7C92; --muted-2:#A6B2C4; --line:#E3E9F1;
  --display:"Bricolage Grotesque",system-ui,sans-serif;
  --serif:"Bricolage Grotesque",system-ui,sans-serif; /* alias kept for existing rules */
  --sans:"Hanken Grotesk",system-ui,-apple-system,sans-serif;
  --r:16px; --shadow:0 1px 3px rgba(20,35,59,.06),0 24px 48px -28px rgba(20,35,59,.34);
}
*{box-sizing:border-box;margin:0;padding:0;}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
body{font-family:var(--sans);color:var(--ink);background:var(--paper);line-height:1.5;}
a{color:inherit;text-decoration:none;}
svg.ic{vertical-align:-0.15em;flex:none;}
.ic-lg{font-size:1.3em;}

/* ---------------------------- buttons --------------------------- */
.btn{border:none;cursor:pointer;font-family:var(--sans);font-weight:700;font-size:14px;
  background:var(--lime);color:var(--navy);border-radius:13px;padding:13px 20px;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  box-shadow:0 8px 18px -6px rgba(190,208,0,.55);transition:filter .15s,transform .05s;}
.btn:hover{filter:brightness(1.04);} .btn:active{transform:translateY(1px);}
.btn--block{width:100%;}
.btn--soft{background:var(--sky-soft);color:var(--blue);box-shadow:none;}
.btn--ghost{background:#fff;color:var(--ink);border:1px solid var(--line);box-shadow:none;}
.btn--ok{background:#DDF0D6;color:#1f7a3d;box-shadow:none;}
.btn:disabled{opacity:.6;cursor:default;}
.linkbtn{background:none;border:none;color:var(--blue);font-family:var(--sans);
  font-weight:700;font-size:13px;cursor:pointer;}

/* ============================================================
   AUTH (split-screen)
   ============================================================ */
.auth-wrap{min-height:100vh;display:grid;place-items:center;padding:28px;
  background:radial-gradient(1200px 600px at 12% -10%,#e3eef9 0,transparent 55%),
   radial-gradient(1000px 500px at 95% 0%,#dfeaf8 0,transparent 50%),#E6EDF5;}
.auth-card{width:100%;max-width:940px;background:var(--card);border-radius:20px;overflow:hidden;
  box-shadow:var(--shadow);border:1px solid #dfe6ef;display:grid;grid-template-columns:.85fr 1fr;
  min-height:560px;}
.brand-side{position:relative;overflow:hidden;color:#fff;padding:36px 38px;display:flex;flex-direction:column;
  background:radial-gradient(120% 120% at 80% -10%,rgba(120,170,225,.30) 0,transparent 55%),
   linear-gradient(155deg,#1C6FB0 0,#103A66 55%,var(--navy) 100%);}
.brand-side .mk{width:42px;height:42px;border-radius:12px;background:rgba(255,255,255,.12);
  display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-weight:600;font-size:20px;}
.brand-side .welcome{margin-top:auto;}
.brand-side .welcome small{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.5);}
.brand-side .welcome h2{font-family:var(--serif);font-weight:500;font-size:29px;line-height:1.16;margin-top:10px;}
.brand-side .welcome h2 span{color:var(--lime-soft);}
.mini{display:flex;align-items:flex-end;gap:8px;margin-top:28px;height:64px;}
.mini i{flex:1;border-radius:6px 6px 3px 3px;background:rgba(255,255,255,.13);}
.mini i:nth-child(1){height:26px;background:linear-gradient(180deg,var(--lime-soft),var(--lime));box-shadow:0 0 14px rgba(190,208,0,.5);}
.mini i:nth-child(2){height:36px;} .mini i:nth-child(3){height:46px;}
.mini i:nth-child(4){height:56px;} .mini i:nth-child(5){height:66px;}

.form-side{padding:34px 44px;display:flex;flex-direction:column;justify-content:center;min-width:0;}
.form-side .step-lab{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);margin-bottom:12px;}
.form-side h3{font-family:var(--serif);font-weight:500;font-size:27px;line-height:1.15;}
.form-side .sub{font-size:14px;color:var(--muted);margin-top:8px;}
.fl{font-size:12px;font-weight:700;color:var(--ink-2);margin:22px 0 7px;display:block;}
.inp{width:100%;border:1.5px solid var(--line);border-radius:12px;padding:13px 15px;
  font-family:var(--sans);font-size:15px;color:var(--ink);background:#fff;}
.inp:focus{outline:none;border-color:var(--lime);box-shadow:0 0 0 4px rgba(190,208,0,.18);}

/* Native dropdowns styled to match the inputs (custom chevron, no ugly OS arrow) */
select.inp{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  cursor:pointer;padding-right:40px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%236E7C92' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:12px 8px;
}
select.inp::-ms-expand{display:none;}
/* grey the placeholder (Day / Month / Year / —) until a real option is chosen */
select.inp:has(option[value=""]:checked){color:var(--muted-2);}
.phone-grp{display:flex;gap:10px;} .phone-grp .cc{width:92px;flex:none;text-align:center;font-weight:600;}
.grp2{display:flex;gap:12px;} .grp2>div{flex:1;}
.auth-alt{margin-top:18px;font-size:13px;color:var(--muted);}
.auth-alt a{color:var(--blue);font-weight:700;}
.note{margin-top:20px;background:var(--sky-soft);border-radius:12px;padding:12px 14px;
  font-size:12.5px;color:var(--ink-2);display:flex;gap:10px;align-items:flex-start;}
.note b{color:var(--blue);}
.devcode{margin-top:16px;background:#FBFEF0;border:1px dashed var(--lime);border-radius:12px;
  padding:12px 14px;font-size:13px;color:var(--ink-2);}
.devcode b{font-family:var(--serif);font-size:20px;letter-spacing:.2em;color:var(--blue);}
.err{margin-top:16px;background:#FDECEC;border:1px solid #F4C7C7;color:#A23A3A;
  border-radius:11px;padding:11px 14px;font-size:13px;font-weight:600;}

/* OTP */
.otp{display:flex;gap:12px;margin-top:24px;}
.otp input{flex:1 1 0;min-width:0;max-width:62px;height:60px;text-align:center;font-size:25px;font-weight:700;
  border:1.5px solid var(--line);border-radius:13px;font-family:var(--sans);color:var(--ink);}
.otp input:focus{outline:none;border-color:var(--lime);box-shadow:0 0 0 4px rgba(190,208,0,.18);}

/* choice cards + chips */
.choice{display:flex;gap:12px;margin-top:22px;}
.opt{flex:1;border:1.5px solid var(--line);border-radius:15px;padding:16px;cursor:pointer;transition:.18s;background:#fff;text-align:left;}
.opt:hover{border-color:var(--blue);}
.opt.sel{border-color:var(--lime);background:#F7FCE8;box-shadow:0 0 0 4px rgba(190,208,0,.14);}
.opt .e{font-size:24px;color:var(--blue);} .opt .ot{font-size:14px;font-weight:700;margin-top:8px;}
.opt .od{font-size:11.5px;color:var(--muted);margin-top:2px;}
.chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px;}
.chip-t{border:1.5px solid var(--line);background:#fff;border-radius:999px;padding:9px 15px;
  font-size:13px;font-weight:600;color:var(--ink-2);cursor:pointer;transition:.16s;user-select:none;}
.chip-t:hover{border-color:var(--blue);}
.chip-t.sel{background:var(--ink);color:#fff;border-color:var(--ink);}

/* ============================================================
   APP SHELL
   ============================================================ */
.app{display:grid;grid-template-columns:240px 1fr;min-height:100vh;}
.scrim{display:none;position:fixed;inset:0;background:rgba(12,39,66,.4);z-index:20;}
.side{background:var(--card);border-right:1px solid var(--line);padding:22px 16px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;}
.side .logo{height:30px;width:auto;display:block;margin:4px 8px 6px;}
.side .sublabel{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);margin:0 8px 14px;}
.nav-lab{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2);padding:12px 10px 6px;}
.nl{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:11px;font-size:13.5px;
  font-weight:600;color:var(--muted);cursor:pointer;}
.nl .i{font-size:17px;width:20px;text-align:center;opacity:.7;}
.nl:hover{background:var(--paper);color:var(--ink-2);}
.nl.on{background:var(--ink);color:#fff;} .nl.on .i{opacity:1;}
.nl .badge{margin-left:auto;background:var(--lime);color:var(--navy);font-size:10px;font-weight:800;border-radius:999px;padding:1px 7px;}
.side .me{margin-top:auto;display:flex;align-items:center;gap:11px;padding:11px;border-radius:13px;background:var(--paper);}
.side .me .av{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,var(--blue),var(--blue-2));
  display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:14px;flex:none;}
.side .me .nm{font-size:13px;font-weight:700;line-height:1.2;}
.side .me .rl{font-size:11px;color:var(--muted);}
.side .me a{margin-left:auto;color:var(--muted-2);}

.main{display:flex;flex-direction:column;min-width:0;}
.topbar{display:flex;align-items:center;gap:16px;padding:16px 28px;border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.85);backdrop-filter:blur(8px);position:sticky;top:0;z-index:5;
  padding-top:calc(16px + env(safe-area-inset-top,0px));}
.topbar .burger{display:none;background:none;border:none;font-size:22px;color:var(--ink);cursor:pointer;}
.topbar .hi h2{font-family:var(--serif);font-weight:500;font-size:20px;line-height:1.1;}
.topbar .hi p{font-size:12.5px;color:var(--muted);}
.topbar .search{margin-left:auto;background:#fff;border:1px solid var(--line);border-radius:11px;
  padding:9px 13px;font-size:13px;color:var(--muted-2);display:flex;align-items:center;gap:8px;min-width:210px;}
.topbar .search input{border:none;outline:none;font-family:var(--sans);font-size:13px;color:var(--ink);width:100%;background:none;}
.tb-ico{width:40px;height:40px;border-radius:11px;background:#fff;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;font-size:16px;flex:none;position:relative;color:var(--ink-2);}
.tb-ico .dot{position:absolute;top:9px;right:10px;width:7px;height:7px;border-radius:50%;background:var(--lime);border:2px solid #fff;}
.content{padding:24px 28px 40px;}
.page-h{margin-bottom:18px;}
.page-h h1{font-family:var(--serif);font-weight:500;font-size:26px;}
.page-h p{font-size:13.5px;color:var(--muted);margin-top:3px;}

/* ----------------------------- hero / ascent --------------------------- */
.hero{border-radius:22px;padding:24px 28px 18px;color:#fff;position:relative;overflow:hidden;
  background:radial-gradient(120% 140% at 85% -10%,rgba(120,170,225,.30) 0,transparent 55%),
   linear-gradient(150deg,#1C6FB0 0,#103A66 55%,var(--navy) 100%);}
.hero-top{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;flex-wrap:wrap;}
.hero .hlab{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.55);}
.hero h3{font-family:var(--serif);font-weight:500;font-size:23px;margin-top:5px;max-width:22ch;}
.hero h3 span{color:var(--lime-soft);}
.stage-pill{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.14);border-radius:999px;
  padding:8px 15px;font-size:12px;font-weight:600;color:var(--lime-soft);white-space:nowrap;}
/* Discipleship journey — gentle ascending stepper (desktop) → vertical timeline (mobile) */
.journey-track{position:relative;margin-top:18px;}
.jt-node{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:700;flex:none;background:#173d63;
  border:2px solid rgba(255,255,255,.22);color:rgba(255,255,255,.72);}
.jt-node svg{width:1.05em;height:1.05em;}
.jt-name{font-weight:700;color:rgba(255,255,255,.55);line-height:1.2;}
.jt-status{font-weight:600;color:rgba(255,255,255,.4);}
.done .jt-node,.jt-node.done{background:linear-gradient(160deg,var(--blue-2),var(--blue));border-color:transparent;color:#fff;}
.current .jt-node,.jt-node.current{background:#fff;border-color:var(--lime);color:var(--navy);
  box-shadow:0 0 0 4px rgba(190,208,0,.28),0 8px 22px -6px rgba(190,208,0,.6);}
.done .jt-name,.current .jt-name{color:#fff;}
.current .jt-status{color:var(--lime-soft);}

/* desktop graph (the rising path) */
.jt-graph{position:relative;height:122px;}
.jt-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;}
.jt-svg-bg{fill:none;stroke:rgba(255,255,255,.16);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;}
.jt-svg-fg{fill:none;stroke:url(#jtgrad);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 0 5px rgba(150,200,245,.45));}
.jt-graph .jt-node{position:absolute;transform:translate(-50%,-50%);z-index:1;}
.jt-labels{list-style:none;margin:6px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);}
.jt-lab{display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px;min-width:0;}
.jt-lab .jt-name{font-size:12.5px;} .jt-lab .jt-status{font-size:10.5px;min-height:13px;}

/* mobile vertical timeline (hidden on desktop) */
.jt-mobile{display:none;}

@media (max-width:640px){
  .jt-graph,.jt-labels{display:none;}
  .jt-mobile{display:block;position:relative;list-style:none;margin:2px 0 0;padding:0;}
  .jt-mobile::before{content:"";position:absolute;left:20px;top:14px;bottom:14px;width:4px;border-radius:4px;
    background:rgba(255,255,255,.16);}
  .jt-mobile::after{content:"";position:absolute;left:20px;top:14px;width:4px;border-radius:4px;
    height:calc((100% - 28px) * var(--frac,0));
    background:linear-gradient(180deg,var(--blue-2),var(--lime));transition:height .7s ease;}
  .jt-mstage{position:relative;display:flex;align-items:center;gap:14px;padding:8px 0;}
  .jt-mstage .jt-node{position:relative;z-index:1;}
  .jt-mstage .jt-text{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;}
  .jt-mstage .jt-name{font-size:14px;} .jt-mstage .jt-status{font-size:11px;}
}

/* motion — only when the user hasn't asked to reduce it */
@media (prefers-reduced-motion:no-preference){
  .jt-graph .jt-node:not(.current){opacity:0;animation:jtRise .55s cubic-bezier(.2,.7,.3,1) forwards;}
  .jt-lab{opacity:0;animation:jtFade .5s ease forwards;}
  .jt-mstage:not(.current){opacity:0;animation:jtFade .5s ease forwards;}
  .current .jt-node,.jt-node.current{animation:jtPulse 2.8s ease-in-out infinite;}
}
@keyframes jtRise{from{opacity:0;transform:translate(-50%,calc(-50% + 9px));}to{opacity:1;transform:translate(-50%,-50%);}}
@keyframes jtFade{from{opacity:0;transform:translateY(7px);}to{opacity:1;transform:none;}}
@keyframes jtPulse{0%,100%{box-shadow:0 0 0 4px rgba(190,208,0,.28),0 8px 22px -6px rgba(190,208,0,.55);}
  50%{box-shadow:0 0 0 7px rgba(190,208,0,.12),0 8px 26px -4px rgba(190,208,0,.8);}}

/* ------------------------------ cards / grid --------------------------- */
.grid{display:grid;grid-template-columns:1.5fr 1fr;gap:20px;margin-top:20px;align-items:start;}
.col{display:flex;flex-direction:column;gap:20px;}
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:20px;}
.card-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.card-h h4{font-size:15px;font-weight:700;} .card-h a{font-size:12px;color:var(--blue);font-weight:600;}
.next{background:linear-gradient(155deg,#F6FBFF,#E6F2FC);border-color:#CDE6FA;display:flex;gap:18px;align-items:center;}
.next .ring{width:58px;height:58px;border-radius:16px;flex:none;background:#fff;border:1px solid #CDE6FA;
  display:flex;align-items:center;justify-content:center;font-size:24px;color:var(--blue);}
.next .txt{flex:1;min-width:0;}
.next .kick{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--blue);}
.next h3{font-family:var(--serif);font-weight:500;font-size:20px;margin:3px 0;}
.next p{font-size:13px;color:var(--muted);line-height:1.5;}

.task{display:flex;align-items:center;gap:13px;padding:11px 0;border-bottom:1px solid var(--line);}
.task:last-child{border-bottom:none;}
.task .box{width:22px;height:22px;border-radius:7px;flex:none;border:2px solid var(--muted-2);
  display:flex;align-items:center;justify-content:center;font-size:12px;color:#fff;}
.task.ok .box{background:var(--blue);border-color:var(--blue);}
.task.active .box{border-color:var(--lime);}
.task .tt{font-size:13.5px;font-weight:600;flex:1;}
.task.ok .tt{color:var(--muted);text-decoration:line-through;text-decoration-color:var(--muted-2);}
.task .go{font-size:12px;font-weight:700;color:var(--blue);}

.event{display:flex;gap:14px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line);}
.event:last-child{border-bottom:none;}
.cal{width:48px;height:52px;border-radius:12px;flex:none;background:var(--sky-soft);
  display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;}
.cal b{font-size:18px;font-weight:800;color:var(--blue);}
.cal small{font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--blue);margin-top:3px;font-weight:700;}
.event .ev-b{flex:1;min-width:0;} .event .ev-b h5{font-size:14px;font-weight:700;}
.event .ev-b p{font-size:12px;color:var(--muted);margin-top:2px;}

.emblem{width:44px;height:44px;border-radius:14px;flex:none;display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:20px;position:relative;overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 6px 14px -7px rgba(12,39,66,.45);}
.emblem svg{width:1em;height:1em;position:relative;z-index:1;}
.emblem::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 120% at 78% 12%,rgba(255,255,255,.28),transparent 55%);}
.emblem--0{background:linear-gradient(140deg,#2C6DB5,#173d63);}
.emblem--1{background:linear-gradient(140deg,#4F9AD6,#1C6FB0);}
.emblem--2{background:linear-gradient(140deg,#6FB7E6,#2C6DB5);}
.emblem--3{background:linear-gradient(140deg,#1C6FB0,#0C2742);}
.gc-meta{display:flex;gap:18px;margin:13px 0;flex-wrap:wrap;}
.gc-meta div{font-size:12px;color:var(--ink-2);} .gc-meta b{display:block;font-size:10px;color:var(--muted-2);text-transform:uppercase;letter-spacing:.06em;margin-bottom:2px;font-weight:700;}

.leader{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line);}
.leader:last-child{border-bottom:none;}
.leader .av{width:42px;height:42px;border-radius:50%;flex:none;background:linear-gradient(135deg,var(--sky),var(--blue));
  display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:14px;}
.leader .ln{font-size:13.5px;font-weight:700;} .leader .lr{font-size:11.5px;color:var(--muted);}
.leader .msg{margin-left:auto;}

.rowlink{display:flex;align-items:center;gap:13px;padding:11px 0;border-bottom:1px solid var(--line);cursor:pointer;}
.rowlink:last-child{border-bottom:none;}
.rowlink .rl-i{width:38px;height:38px;border-radius:11px;background:var(--sky-soft);display:flex;align-items:center;justify-content:center;font-size:16px;flex:none;color:var(--blue);}
.rowlink .rl-t{font-size:13.5px;font-weight:700;} .rowlink .rl-d{font-size:11.5px;color:var(--muted);margin-top:1px;}
.rowlink .rl-a{margin-left:auto;color:var(--muted-2);}

.pbar{height:8px;border-radius:5px;background:var(--line);overflow:hidden;}
.pbar span{display:block;height:100%;background:linear-gradient(90deg,var(--blue),var(--blue-2));border-radius:5px;}

.cards-list{display:flex;flex-direction:column;gap:14px;}
.empty{text-align:center;color:var(--muted);padding:30px;font-size:14px;}

/* ----------------------------- toast --------------------------- */
.toast-wrap{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:50;display:flex;flex-direction:column;gap:10px;align-items:center;}
.toast{background:var(--ink);color:#fff;padding:13px 20px;border-radius:13px;font-size:13.5px;font-weight:600;
  box-shadow:0 18px 40px -16px rgba(20,35,59,.5);display:flex;align-items:center;gap:10px;
  animation:toastin .3s ease both;max-width:90vw;}
.toast.ok{background:#1f7a3d;}
@keyframes toastin{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}

/* ----------------------------- responsive --------------------------- */
@media (max-width:900px){
  .auth-card{grid-template-columns:1fr;} .brand-side{display:none;} .form-side{padding:30px 24px;}
  .app{grid-template-columns:1fr;}
  .side{position:fixed;z-index:30;width:240px;left:-260px;transition:left .25s;box-shadow:var(--shadow);}
  .side.open{left:0;}
  .topbar .burger{display:block;}
  .grid{grid-template-columns:1fr;}
  .scrim{position:fixed;inset:0;background:rgba(12,39,66,.4);z-index:20;display:none;}
  .scrim.show{display:block;}
}

/* ============================================================
   Mobile bottom navigation + responsive polish
   ============================================================ */
.bottomnav{display:none;}
.bn-more{background:none;border:none;font-family:var(--sans);cursor:pointer;}

@media (max-width:900px){
  /* App-style bottom tab bar */
  .bottomnav{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:25;
    background:rgba(255,255,255,.94);backdrop-filter:blur(10px);
    border-top:1px solid var(--line);padding:6px 4px calc(6px + env(safe-area-inset-bottom));
  }
  .bn{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
    padding:6px 2px;font-size:10.5px;font-weight:700;color:var(--muted-2);text-decoration:none;}
  .bn .bn-i{font-size:21px;line-height:1;color:var(--muted-2);}
  .bn.on,.bn.on .bn-i{color:var(--blue);}
  .bn.on .bn-i{filter:drop-shadow(0 4px 8px rgba(25,82,150,.3));}
  body.has-bottomnav .content{padding-bottom:84px;}

  /* Tighter spacing on phones */
  .content{padding:16px 14px 84px;}
  .topbar{padding:calc(13px + env(safe-area-inset-top,0px)) 14px 13px;}
  .topbar .search{display:none;}          /* search lives on the sermons page on mobile */
  .topbar .hi h2{font-size:17px;}
  .hero{padding:18px 16px 14px;border-radius:18px;}
  .hero h3{font-size:18px;}
  .page-h h1{font-size:21px;}
  .card{padding:16px;border-radius:15px;}
  .next{flex-direction:row;} .next .ring{width:48px;height:48px;font-size:20px;}
  .next h3{font-size:17px;}
  .grp2{flex-direction:column;gap:0;}
  .choice{flex-direction:column;}
  .event{flex-wrap:wrap;}
  .event .btn{margin-left:56px;}
  .auth-wrap{padding:0;align-items:stretch;}
  .auth-card{border-radius:0;min-height:100vh;box-shadow:none;border:none;}
  .form-side{justify-content:flex-start;padding:46px 22px;}
}

@media (max-width:520px){
  .otp{gap:8px;}
  .otp input{height:54px;font-size:22px;}
  .devcode b{font-size:18px;letter-spacing:.12em;}
}
@media (max-width:380px){
  .otp{gap:6px;}
  .otp input{height:50px;font-size:20px;}
  .form-side{padding:40px 18px;}
}

/* Larger touch targets everywhere on touch devices */
@media (hover:none){
  .btn{padding:14px 20px;} .nl{padding:12px;}
}

/* ============================================================
   My Unit workspace + avatars + photo picker
   ============================================================ */
.av-fallback{border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:700;background:linear-gradient(135deg,var(--blue),var(--blue-2));}
.av-img{border:2px solid var(--line);}

/* photo picker on sign-up */
.photo-pick{display:flex;align-items:center;gap:14px;margin-top:8px;}
.photo-prev{width:64px;height:64px;border-radius:50%;flex:none;background:var(--paper);
  border:2px dashed var(--muted-2);display:flex;align-items:center;justify-content:center;
  color:var(--muted-2);font-size:24px;overflow:hidden;}

/* unit sub-tabs */
.utabs{display:flex;gap:6px;margin-bottom:18px;overflow-x:auto;border-bottom:1px solid var(--line);padding-bottom:0;}
.utab{display:inline-flex;align-items:center;gap:7px;padding:10px 14px;font-size:13px;font-weight:700;
  color:var(--muted);border-bottom:2.5px solid transparent;white-space:nowrap;}
.utab.on{color:var(--blue);border-bottom-color:var(--lime);}
.utab:hover{color:var(--ink-2);}

/* team grid */
.team-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:16px;margin-top:6px;}
.team-card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:14px 8px;
  border:1px solid var(--line);border-radius:14px;}
.team-card .tn{font-size:13px;font-weight:700;line-height:1.2;}
.team-card .tr{font-size:11px;color:var(--muted);}

/* unit chat */
.thread{display:flex;flex-direction:column;gap:14px;max-height:50vh;overflow-y:auto;padding:6px 0 14px;}
.msg{display:flex;gap:10px;align-items:flex-start;}
.msg.mine{flex-direction:row-reverse;}
.msg .bubble{background:var(--paper);border-radius:14px;padding:9px 13px;max-width:78%;}
.msg.mine .bubble{background:var(--sky-soft);}
.msg .who{font-size:11px;font-weight:700;color:var(--ink-2);margin-bottom:3px;}
.msg .who .when{color:var(--muted-2);font-weight:500;margin-left:6px;}
.msg .body{font-size:13.5px;color:var(--ink);line-height:1.45;}
.msg-form{display:flex;gap:10px;margin-top:14px;border-top:1px solid var(--line);padding-top:14px;}
.msg-form .inp{flex:1;}

@media (max-width:900px){
  .team-grid{grid-template-columns:repeat(auto-fill,minmax(96px,1fr));}
  .msg .bubble{max-width:84%;}
}

/* ============================================================
   Admin console
   ============================================================ */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px;}
.stat{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px 20px;}
.stat .sv{font-family:var(--serif);font-size:32px;font-weight:600;color:var(--blue);line-height:1;}
.stat .sl{font-size:12.5px;color:var(--muted);margin-top:6px;font-weight:600;}

.table{width:100%;border-collapse:collapse;font-size:13.5px;}
.table th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted-2);
  font-weight:700;padding:8px 12px;border-bottom:1px solid var(--line);white-space:nowrap;}
.table td{padding:11px 12px;border-bottom:1px solid var(--line);vertical-align:middle;}
.table tr:last-child td{border-bottom:none;}
.table td.muted{color:var(--muted);}
.table .linkbtn{margin-right:8px;}
.pill{display:inline-block;background:var(--sky-soft);color:var(--blue);font-size:11px;font-weight:700;
  border-radius:999px;padding:3px 10px;}

@media (max-width:900px){
  .table{font-size:12.5px;} .table th,.table td{padding:8px;}
}

/* Sign in / Register segmented toggle on auth pages */
.auth-switch{display:flex;gap:6px;background:var(--paper);border:1px solid var(--line);
  border-radius:12px;padding:5px;margin-bottom:26px;}
.auth-switch a{flex:1;text-align:center;padding:10px 12px;border-radius:8px;
  font-size:13.5px;font-weight:700;color:var(--muted);transition:.15s;}
.auth-switch a.on{background:var(--blue);color:#fff;box-shadow:0 4px 12px rgba(25,82,150,.22);}
.auth-switch a:not(.on):hover{color:var(--ink-2);}

/* subtle interactive life */
.stat,.team-card{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;}
.stat:hover,.team-card:hover{transform:translateY(-3px);box-shadow:0 12px 26px -14px rgba(12,39,66,.28);border-color:var(--sky);}
.rowlink{transition:background .15s ease,transform .15s ease;}
.btn,.btn--soft,.btn--ok{transition:transform .12s ease,box-shadow .18s ease,background .18s ease;}
.btn:active{transform:translateY(1px);}

/* dashboard announcement items */
.annc{padding:16px 0;border-bottom:1px solid var(--line);}
.annc:last-child{border-bottom:none;padding-bottom:0;}
.annc:first-child{padding-top:0;}
.annc .ln{font-size:15px;font-weight:800;color:var(--ink);margin-bottom:6px;letter-spacing:-.01em;}
.annc .lr{font-size:13.5px;color:#3c4a63;line-height:1.7;}
.annc .lr.clamp{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;}
.annc-more{margin-top:8px;background:none;border:0;color:var(--blue);font-weight:700;font-size:12.5px;cursor:pointer;padding:0;}
.annc-more:hover{text-decoration:underline;}
.annc-date{font-size:11px;color:var(--muted-2);margin-top:10px;}

/* heading tracking for the grotesque display face */
.hero h3,.page-h h1,.form-side h3,.next h3,.topbar .hi h2,.brand-side .welcome h2,.stat .sv{
  letter-spacing:-.012em;}

/* unit cluster grouping */
.unit-group{margin-bottom:18px;}
.unit-group-h{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);margin:0 4px 8px;}

/* "Find your fit" unit helper */
.fit{background:linear-gradient(160deg,#fff, #f3f8fd);border:1px solid var(--line);}
.fit-intro{display:flex;align-items:center;gap:14px;}
.fit-ic{width:42px;height:42px;border-radius:12px;flex:none;display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:20px;background:linear-gradient(140deg,var(--blue-2),var(--blue));}
.fit-t{font-weight:700;font-size:15px;color:var(--ink);}
.fit-d{font-size:12.5px;color:var(--muted);margin-top:1px;}
.fit-chat{margin-top:4px;display:flex;flex-direction:column;gap:10px;max-height:60vh;overflow:auto;}
.fb{max-width:88%;padding:11px 14px;border-radius:14px;font-size:13.5px;line-height:1.5;}
.fb--bot{align-self:flex-start;background:#eef3f9;color:var(--ink);border-bottom-left-radius:5px;}
.fb--me{align-self:flex-end;background:var(--blue);color:#fff;border-bottom-right-radius:5px;}
.fit-chips{display:flex;flex-wrap:wrap;gap:8px;}
.chip{border:1.5px solid var(--line);background:#fff;border-radius:999px;padding:8px 14px;font-size:13px;font-weight:600;
  color:var(--ink-2);cursor:pointer;font-family:var(--sans);transition:all .12s ease;}
.chip:hover{border-color:var(--sky);}
.chip.on{background:var(--blue);border-color:var(--blue);color:#fff;}
.fit-textrow{display:flex;gap:8px;align-items:center;}
.fit-textrow .inp{flex:1;}
.fit-sg{display:flex;gap:12px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px 14px;}
.fit-sg-i{width:34px;height:34px;border-radius:10px;flex:none;display:flex;align-items:center;justify-content:center;
  background:var(--sky-soft);color:var(--blue);font-size:16px;}
.fit-sg-t{font-weight:700;font-size:14px;color:var(--ink);}
.fit-sg-c{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-2);margin:1px 0 3px;}
.fit-sg-b{font-size:12.5px;color:var(--muted);line-height:1.45;}

/* navy action button (unit Join) */
.btn--navy{background:var(--navy);color:#fff;box-shadow:0 8px 18px -9px rgba(12,39,66,.6);}
.btn--navy:hover{filter:brightness(1.15);}

/* community location finder */
.geo-find{background:linear-gradient(160deg,#fff,#f3f8fd);border:1px solid var(--line);margin-bottom:16px;}
.geo-sg{display:flex;gap:13px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px;margin-top:10px;}
.geo-name{font-family:var(--display);font-weight:600;font-size:17px;color:var(--ink);margin:1px 0 2px;}

/* ---- digital membership card ---- */
.mcard-stage{display:flex;flex-direction:column;align-items:flex-start;}
.mcard{width:100%;max-width:380px;border-radius:20px;padding:22px;color:#fff;position:relative;overflow:hidden;
  background:radial-gradient(120% 130% at 88% -10%,rgba(120,170,225,.34) 0,transparent 55%),
   linear-gradient(150deg,#1C6FB0 0,#103A66 55%,var(--navy) 100%);
  box-shadow:0 20px 44px -18px rgba(12,39,66,.7);}
.mcard-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;}
.mcard-brand{font-family:var(--display);font-weight:600;font-size:17px;line-height:1.1;}
.mcard-brand span{display:block;font-family:var(--sans);font-weight:700;font-size:9.5px;letter-spacing:.16em;
  color:rgba(255,255,255,.6);margin-top:4px;}
.mcard-stage-pill{font-size:10.5px;font-weight:700;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.18);
  padding:5px 10px;border-radius:999px;white-space:nowrap;color:var(--lime-soft);}
.mcard-body{display:flex;align-items:center;gap:15px;margin:22px 0;}
.mcard-photo img,.mcard-photo .av{width:76px;height:76px;border-radius:16px;border:2px solid rgba(255,255,255,.25);}
.mcard-photo .av{display:flex;align-items:center;justify-content:center;font-size:26px;background:rgba(255,255,255,.14);}
.mcard-name{font-family:var(--display);font-weight:600;font-size:21px;line-height:1.15;}
.mcard-meta{font-size:12px;color:rgba(255,255,255,.7);margin-top:3px;}
.mcard-no{font-size:11px;letter-spacing:.04em;color:rgba(255,255,255,.55);margin-top:8px;font-weight:600;}
.mcard-foot{display:flex;align-items:center;gap:14px;background:rgba(255,255,255,.96);border-radius:14px;padding:12px;}
.mcard-qr{width:84px;height:84px;flex:none;display:flex;align-items:center;justify-content:center;}
.mcard-qr img,.mcard-qr canvas{width:84px !important;height:84px !important;}
.mcard-scan{font-family:var(--display);font-weight:600;font-size:15px;color:var(--navy);}
.mcard-scan span{display:block;font-family:var(--sans);font-weight:700;font-size:11px;letter-spacing:.18em;color:var(--blue);margin-top:3px;}

/* public verify page (bare layout) */
.bare-wrap{min-height:100vh;display:grid;place-items:center;padding:28px;
  background:radial-gradient(1100px 560px at 50% -10%,#e3eef9 0,transparent 60%),#E6EDF5;}
.verify-card{background:#fff;border-radius:20px;padding:30px 28px;max-width:380px;width:100%;text-align:center;
  box-shadow:0 18px 44px -18px rgba(12,39,66,.32);}
.verify-logo{height:34px;margin:0 auto 16px;display:block;}
.verify-badge{width:50px;height:50px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  margin:4px auto 18px;font-size:26px;color:#fff;}
.verify-badge.ok{background:linear-gradient(150deg,#3FAE63,#1d7a3f);box-shadow:0 8px 20px -8px rgba(29,122,63,.7);}
.verify-badge.bad{background:linear-gradient(150deg,#c0506a,#9a2740);}
.verify-photo img,.verify-photo .av{width:72px;height:72px;border-radius:50%;margin:6px auto 12px;display:block;
  border:2px solid var(--line);}
.verify-photo .av{display:flex;align-items:center;justify-content:center;font-size:24px;background:var(--paper);color:var(--blue);}
.verify-name{font-family:var(--display);font-weight:600;font-size:21px;color:var(--ink);}
.verify-sub{font-size:13px;color:var(--muted);margin-top:4px;}
.verify-tags{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:16px;}
.verify-tags .vt{font-size:11.5px;font-weight:700;background:var(--sky-soft);color:var(--blue);
  padding:6px 12px;border-radius:999px;}

@media print{
  .side,.bottomnav,.topbar,.page-h,.btn{display:none !important;}
  .mcard{box-shadow:none;}
}

/* ---- spiritual health: member growth snapshot ---- */
.snap-head{display:flex;justify-content:space-between;align-items:center;gap:14px;}
.snap-ring{--p:0;--ring:var(--blue);width:88px;height:88px;border-radius:50%;flex:none;
  display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;
  background:conic-gradient(var(--ring) calc(var(--p)*1%), #E7EEF6 0);}
.snap-ring::before{content:"";position:absolute;inset:7px;border-radius:50%;background:#fff;}
.snap-ring span{position:relative;font-family:var(--display);font-weight:600;font-size:24px;color:var(--ink);line-height:1;}
.snap-ring small{position:relative;font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-2);margin-top:3px;}
.snap-thriving{--ring:#2FA968;} .snap-steady{--ring:var(--blue);} .snap-growing{--ring:#E0A92E;} .snap-risk{--ring:#C85A6E;}
.snap-parts{display:grid;grid-template-columns:1fr 1fr;gap:12px 18px;margin-top:18px;}
.snap-pl{display:flex;align-items:center;justify-content:space-between;font-size:12.5px;font-weight:600;color:var(--ink-2);margin-bottom:5px;}
.snap-pl .ok{color:#2FA968;display:flex;font-size:13px;}
.snap-tips{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:16px;padding-top:14px;border-top:1px solid var(--line);}
.snap-tips-l{font-size:12px;font-weight:700;color:var(--muted-2);}
.snap-tip{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:600;color:var(--blue);
  background:var(--sky-soft);border-radius:999px;padding:6px 12px;text-decoration:none;}
.snap-tip svg{width:.85em;height:.85em;}
.snap-tip:hover{background:#cfe4f7;}

/* admin: at-risk + health bands */
.risk-pill{font-size:11px;font-weight:800;background:#fdeaea;color:#b23a4e;padding:3px 9px;border-radius:999px;}
.pbar span.band-thriving{background:#2FA968;} .pbar span.band-steady{background:var(--blue);}
.pbar span.band-growing{background:#E0A92E;} .pbar span.band-risk{background:#C85A6E;}

/* ---- unit serving schedule (shifts + attendance) ---- */
.shift{display:flex;gap:14px;align-items:flex-start;padding:14px 0;border-bottom:1px solid var(--line);}
.shift:last-child{border-bottom:0;}
.shift-cal{width:48px;height:50px;flex:none;border-radius:12px;background:var(--sky-soft);color:var(--blue);
  display:flex;flex-direction:column;align-items:center;justify-content:center;}
.shift-cal b{font-family:var(--display);font-size:19px;line-height:1;}
.shift-cal small{font-size:9.5px;font-weight:800;letter-spacing:.08em;margin-top:2px;}
.shift-main{flex:1;min-width:0;}
.shift-t{font-weight:700;font-size:14.5px;color:var(--ink);}
.shift-cov{font-size:12.5px;color:var(--muted);margin-top:2px;}
.full-pill{font-size:10px;font-weight:800;background:#fdeaea;color:#b23a4e;padding:2px 8px;border-radius:999px;margin-left:6px;}
.shift-people{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px;}
.shift-people .av,.shift-people img{width:26px;height:26px;border-radius:50%;border:2px solid #fff;margin-left:-6px;}
.shift-people span:first-child .av,.shift-people span:first-child img{margin-left:0;}
.shift-act{flex:none;text-align:right;}
.att-block{padding:12px 0;border-bottom:1px solid var(--line);}
.att-block:last-child{border-bottom:0;}
.att-h{font-size:13px;margin-bottom:8px;}
.att-row{display:flex;align-items:center;gap:10px;padding:5px 0;}
.att-toggle{display:flex;gap:6px;}
.att-btn{border:1.5px solid var(--line);background:#fff;border-radius:8px;padding:5px 12px;font-size:12px;font-weight:700;
  cursor:pointer;font-family:var(--sans);color:var(--muted-2);}
.att-btn.on.attended{background:#2FA968;border-color:#2FA968;color:#fff;}
.att-btn.on.absent{background:#C85A6E;border-color:#C85A6E;color:#fff;}
.att-tag{font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;background:var(--paper);color:var(--muted-2);}
.att-tag.att-attended{background:#e7f6ee;color:#1d7a3f;} .att-tag.att-absent{background:#fdeaea;color:#b23a4e;}

/* ---- giving ---- */
.give-card{display:flex;gap:15px;align-items:flex-start;}
.give-ic{width:44px;height:44px;flex:none;border-radius:12px;display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:20px;background:linear-gradient(140deg,var(--blue-2),var(--blue));}
.give-label{font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--blue);margin-bottom:3px;}
.give-bank{font-weight:700;font-size:15px;color:var(--ink);}
.give-name{font-size:13px;color:var(--muted);margin-top:1px;}
.give-no-row{display:flex;align-items:center;gap:10px;margin-top:10px;}
.give-no{font-family:var(--display);font-weight:600;font-size:22px;letter-spacing:.04em;color:var(--navy);font-variant-numeric:tabular-nums;}
.copy-btn{border:1.5px solid var(--line);background:#fff;border-radius:8px;padding:6px 14px;font-size:12.5px;font-weight:700;
  cursor:pointer;font-family:var(--sans);color:var(--blue);}
.copy-btn:hover{border-color:var(--sky);}
.copy-btn.copied{background:#e7f6ee;border-color:#2FA968;color:#1d7a3f;}
.give-note{font-size:12.5px;color:var(--muted);margin-top:10px;padding-top:10px;border-top:1px solid var(--line);}

/* ---- notifications ---- */
.tb-ico{position:relative;}
.ndot{position:absolute;top:-4px;right:-4px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:#E0392B;
  color:#fff;font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center;border:2px solid #fff;}
.notif{display:flex;gap:13px;align-items:flex-start;padding:13px 18px;border-bottom:1px solid var(--line);text-decoration:none;color:inherit;}
.notif:last-child{border-bottom:0;}
.notif:hover{background:#f6f9fc;}
.notif.unread{background:#f3f8fd;}
.notif-i{width:38px;height:38px;flex:none;border-radius:11px;display:flex;align-items:center;justify-content:center;
  background:var(--sky-soft);color:var(--blue);font-size:17px;}
.notif-milestone{background:var(--lime-soft);color:#5b6b00;} .notif-announcement{background:#fdeede;color:#9a5a14;}
.notif-task,.notif-roster,.notif-shift{background:#e7f6ee;color:#1d7a3f;}
.notif-t{font-weight:700;font-size:13.5px;color:var(--ink);}
.notif-b{font-size:12.5px;color:var(--muted);margin-top:2px;line-height:1.45;}
.notif-time{font-size:11px;color:var(--muted-2);margin-top:4px;}
.notif-new{width:9px;height:9px;border-radius:50%;background:var(--blue);flex:none;margin-top:6px;}

/* auth logos (replace the TEC placeholder; show on mobile) */
.brand-side .bs-logo{height:30px;width:auto;filter:brightness(0) invert(1);opacity:.96;}
.fs-logo{display:none;height:30px;width:auto;margin:0 0 24px;}
@media (max-width:900px){ .fs-logo{display:block;} }

/* ---- topbar actions: notification + user dropdowns ---- */
.tb-actions{display:flex;align-items:center;gap:10px;}
.dd{position:relative;}
.tb-ico{position:relative;background:#fff;border:1px solid var(--line);border-radius:11px;width:40px;height:40px;
  display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink-2);}
.tb-ico:hover{border-color:var(--sky);}
.tb-avatar{width:40px;height:40px;flex:none;border:0;background:none;padding:0;cursor:pointer;line-height:0;border-radius:50%;}
.tb-avatar .av-img,.tb-avatar .av-fallback,.tb-avatar .av,.tb-avatar img{width:100%!important;height:100%!important;border-radius:50%;border:2px solid var(--line);object-fit:cover;box-sizing:border-box;}
.tb-avatar:hover .av-img,.tb-avatar:hover .av-fallback,.tb-avatar:hover img{border-color:var(--sky);}
.dd-panel{position:absolute;top:calc(100% + 10px);right:0;width:330px;max-width:86vw;background:#fff;border:1px solid var(--line);
  border-radius:14px;box-shadow:0 20px 44px -16px rgba(12,39,66,.34);opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .14s ease,transform .14s ease,visibility .14s;z-index:80;overflow:hidden;}
.dd.open .dd-panel{opacity:1;visibility:visible;transform:none;}
.dd-h{display:flex;justify-content:space-between;align-items:center;padding:12px 15px;border-bottom:1px solid var(--line);}
.dd-h span{font-weight:800;font-size:13px;color:var(--ink);} .dd-h a{font-size:12px;color:var(--blue);font-weight:700;text-decoration:none;}
.dd-list{max-height:340px;overflow:auto;}
.dd-empty{padding:26px 14px;text-align:center;color:var(--muted);font-size:13px;}
.dd-notif{display:flex;gap:11px;align-items:flex-start;padding:11px 14px;border-bottom:1px solid var(--line);text-decoration:none;color:inherit;}
.dd-notif:hover{background:#f6f9fc;} .dd-notif.unread{background:#f3f8fd;}
.dd-notif .notif-i{width:32px;height:32px;border-radius:9px;font-size:15px;}
.dd-nt{font-weight:700;font-size:12.5px;color:var(--ink);line-height:1.3;}
.dd-nb{font-size:11.5px;color:var(--muted);margin-top:2px;line-height:1.4;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.dd-foot{display:block;text-align:center;padding:11px;font-size:12.5px;font-weight:700;color:var(--blue);text-decoration:none;border-top:1px solid var(--line);background:#fafcfe;}
.dd-foot:hover{background:#f3f8fd;}
.dd-user{width:236px;padding:6px;}
.dd-uhead{display:flex;gap:11px;align-items:center;padding:10px;border-bottom:1px solid var(--line);margin-bottom:4px;}
.dd-uhead .av,.dd-uhead img{width:40px;height:40px;border-radius:50%;object-fit:cover;}
.dd-uhead b{font-size:13.5px;color:var(--ink);display:block;line-height:1.2;} .dd-uhead span{font-size:11.5px;color:var(--muted);}
.dd-user a{display:flex;align-items:center;gap:11px;padding:10px;border-radius:9px;text-decoration:none;color:var(--ink);font-size:13px;font-weight:600;}
.dd-user a:hover{background:#f3f8fd;} .dd-user a svg{width:1.05em;height:1.05em;color:var(--muted-2);}

/* leader photo preview fills its frame */
.photo-prev img{width:100%;height:100%;object-fit:cover;border-radius:inherit;}

/* ---- mobile header: logo replaces greeting; actions flush right ---- */
.tb-logo{display:none;line-height:0;}
.tb-logo img{height:26px;width:auto;}
.m-greet{display:none;}
@media (max-width:640px){
  .topbar .hi{display:none;}
  .tb-logo{display:block;}
  .tb-actions{margin-left:auto;}
  .topbar{gap:10px;}
  .m-greet{display:flex;flex-direction:column;gap:1px;margin:4px 0 14px;}
  .m-greet b{font-family:var(--serif);font-weight:500;font-size:19px;color:var(--ink);line-height:1.15;}
  .m-greet span{font-size:12.5px;color:var(--muted);}
}

/* prayer acknowledgement */
.ack-pill{flex:none;align-self:center;font-size:11px;font-weight:800;padding:4px 10px;border-radius:999px;background:#e7f6ee;color:#1d7a3f;white-space:nowrap;}
.ack-pill.ack-wait{background:var(--sky-soft);color:var(--blue);}

/* dashboard prayer status card */
.pr-card{display:flex;gap:13px;align-items:flex-start;text-decoration:none;color:inherit;margin-bottom:18px;}
.pr-card:hover{border-color:var(--sky);}
.pr-ic{width:40px;height:40px;flex:none;border-radius:11px;display:flex;align-items:center;justify-content:center;background:var(--sky-soft);color:var(--blue);font-size:18px;}
.pr-title{font-weight:700;font-size:14px;color:var(--ink);margin-top:2px;}
.pr-status{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted);margin-top:6px;}
.pr-status.ok{color:#1d7a3f;font-weight:600;}
.pr-status svg{width:1em;height:1em;}

/* submit busy spinner */
.spin{display:inline-block;width:13px;height:13px;border:2px solid currentColor;border-right-color:transparent;
  border-radius:50%;vertical-align:-2px;margin-right:6px;animation:spin .6s linear infinite;}
@keyframes spin{to{transform:rotate(360deg)}}
button[aria-busy="true"]{opacity:.85;cursor:progress;}

.okmsg{background:#e7f6ee;color:#1d7a3f;border:1px solid #bfe6cf;border-radius:11px;padding:11px 14px;font-size:13px;font-weight:600;margin-bottom:14px;}

/* search results */
.sr{display:flex;gap:12px;align-items:center;padding:11px 4px;border-bottom:1px solid var(--line);text-decoration:none;color:inherit;}
.sr:last-child{border-bottom:0;} .sr:hover{background:#f6f9fc;}
.sr-i{width:36px;height:36px;flex:none;border-radius:10px;display:flex;align-items:center;justify-content:center;background:var(--sky-soft);color:var(--blue);font-size:16px;}
.sr-t{font-weight:700;font-size:13.5px;color:var(--ink);}
.sr-s{font-size:12px;color:var(--muted);margin-top:1px;}

/* PWA install banner */
.pwa-banner{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0));z-index:200;
  display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:16px;
  padding:12px 14px;box-shadow:0 18px 44px -14px rgba(12,39,66,.4);max-width:520px;margin:0 auto;}
.has-bottomnav .pwa-banner{bottom:calc(74px + env(safe-area-inset-bottom,0));}
.pwa-ic img{width:40px;height:40px;border-radius:10px;display:block;}
.pwa-txt{flex:1;min-width:0;}
.pwa-txt b{display:block;font-size:13.5px;color:var(--ink);}
.pwa-txt small{display:block;font-size:11.5px;color:var(--muted);margin-top:1px;}
.pwa-go{flex:none;background:var(--navy);color:#fff;border:0;border-radius:10px;padding:9px 16px;font-size:13px;font-weight:700;cursor:pointer;}
.pwa-x{flex:none;background:none;border:0;color:var(--muted);font-size:22px;line-height:1;cursor:pointer;padding:0 4px;}
@media (min-width:900px){ .pwa-banner{left:auto;right:24px;width:380px;} }

/* mobile-only search button in the header */
.tb-search-m{display:none;}
@media (max-width:640px){ .tb-search-m{display:flex;} }

/* devotional */
.devo-card{display:block;text-decoration:none;color:inherit;margin-bottom:18px;background:linear-gradient(150deg,#f3f8fd,#fff);}
.devo-card:hover{border-color:var(--sky);}
.devo-card-t{font-family:var(--serif);font-weight:600;font-size:18px;color:var(--ink);margin-top:4px;}
.devo-card-r{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;color:var(--blue);margin-top:6px;}
.devo-card-r svg{width:.95em;height:.95em;}
.devo-card-v{font-size:13px;color:var(--muted);font-style:italic;margin-top:6px;line-height:1.5;}
.devo .devo-date{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--blue);}
.devo-title{font-family:var(--serif);font-weight:600;font-size:26px;color:var(--ink);margin:6px 0 14px;line-height:1.15;}
.devo-verse{margin:0 0 16px;padding:14px 18px;background:var(--sky-soft);border-radius:14px;border-left:4px solid var(--blue);
  font-size:15px;line-height:1.6;color:var(--ink-2);font-style:italic;}
.devo-verse cite{display:block;margin-top:8px;font-style:normal;font-weight:700;font-size:13px;color:var(--blue);}
.devo-body{font-size:15px;line-height:1.7;color:var(--ink-2);}
.devo-arch{border-bottom:1px solid var(--line);padding:12px 0;}
.devo-arch:last-child{border-bottom:0;}
.devo-arch summary{display:flex;justify-content:space-between;align-items:center;cursor:pointer;list-style:none;gap:12px;}
.devo-arch summary::-webkit-details-marker{display:none;}
.devo-rt{font-weight:700;font-size:13.5px;color:var(--ink);} .devo-rs{font-size:12px;color:var(--muted);flex:none;}

/* birthdays */
.bday{display:flex;align-items:center;gap:11px;padding:8px 0;border-bottom:1px solid var(--line);}
.bday:last-child{border-bottom:0;}
.bday-n{font-weight:700;font-size:13.5px;color:var(--ink);}
.bday-d{font-size:12px;color:var(--muted);}
.bday-ic{color:var(--lime);font-size:16px;}.bday-ic svg{width:1em;height:1em;}

/* first-timer pills */
.ft-pill{font-size:11px;font-weight:800;padding:3px 9px;border-radius:999px;}
.ft-new{background:var(--sky-soft);color:var(--blue);} .ft-contacted{background:var(--lime-soft);color:#5b6b00;}

/* OTP "check spam" tip */
.spam-tip{display:flex;gap:9px;align-items:flex-start;background:var(--sky-soft);border-radius:11px;
  padding:11px 13px;margin:14px 0 4px;font-size:12.5px;color:var(--ink-2);line-height:1.5;}
.spam-tip svg{flex:none;width:16px;height:16px;color:var(--blue);margin-top:1px;}

/* membership-class gate (units) */
.mc-gate{display:flex;align-items:center;gap:14px;margin-bottom:18px;background:linear-gradient(150deg,#fff7e6,#fff);border-color:#f3e2bd;}
.mc-ic{flex:none;width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:var(--lime-soft);color:#5b6b00;font-size:19px;}
.mc-t{font-weight:800;font-size:14.5px;color:var(--ink);}
.mc-d{font-size:12.5px;color:var(--muted);margin-top:2px;line-height:1.45;}
.mc-lock{background:var(--paper);color:var(--muted);border:1px solid var(--line);font-size:12.5px;padding:8px 13px;display:inline-flex;align-items:center;gap:6px;}
.mc-lock svg{width:1em;height:1em;}
@media(max-width:560px){ .mc-gate{flex-direction:column;align-items:flex-start;} .mc-gate .btn{width:100%;text-align:center;} }

/* WhatsApp group buttons */
.btn--wa{background:#25D366;color:#fff;display:inline-flex;align-items:center;justify-content:center;gap:7px;}
.btn--wa:hover{background:#1eb858;color:#fff;}
.btn--wa svg{width:1.1em;height:1.1em;}
.wa-link{display:inline-flex;align-items:center;gap:6px;color:#138a43;font-weight:700;font-size:12.5px;text-decoration:none;margin-top:10px;}
.wa-link:hover{text-decoration:underline;}
.wa-link svg{width:1.05em;height:1.05em;}

/* ---- sermons: segment filter + inline player ---- */
.seg{display:inline-flex;gap:4px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:4px;margin-bottom:14px;}
.seg-b{display:inline-flex;align-items:center;gap:5px;border:0;background:none;cursor:pointer;font-size:13px;font-weight:700;
  color:var(--muted);padding:7px 16px;border-radius:9px;}
.seg-b svg{width:.95em;height:.95em;}
.seg-b.on{background:var(--navy);color:#fff;}
.sermon{border-bottom:1px solid var(--line);}
.sermon:last-child{border-bottom:0;}
.sermon-row{display:flex;align-items:center;gap:13px;width:100%;background:none;border:0;cursor:pointer;
  padding:12px 4px;text-align:left;font:inherit;color:inherit;}
.sermon-row[disabled]{opacity:.45;cursor:default;}
.sermon-row:hover:not([disabled]){background:#f6f9fc;}
.sermon-row .rl-i{flex:none;width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:15px;}
.rl-i.sm-video{background:var(--sky-soft);color:var(--blue);}
.rl-i.sm-audio{background:var(--lime-soft);color:#5b6b00;}
.sm-meta{flex:1;min-width:0;}
.sermon-row .rl-t{display:block;font-weight:700;font-size:14px;color:var(--ink);}
.sermon-row .rl-d{display:block;font-size:12px;color:var(--muted);margin-top:1px;}
.sm-tag{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.03em;padding:1px 7px;border-radius:999px;vertical-align:middle;}
.sm-tag.sm-video{background:var(--sky-soft);color:var(--blue);}
.sm-tag.sm-audio{background:var(--lime-soft);color:#5b6b00;}
.sermon-caret{flex:none;color:var(--muted-2);transition:transform .15s;}
.sermon-row.playing .sermon-caret{transform:rotate(90deg);color:var(--blue);}
.sermon-player{padding:0 4px 14px;}
.embed16{position:relative;width:100%;padding-top:56.25%;border-radius:12px;overflow:hidden;background:#000;}
.embed16 iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}

/* ---- events: clickable rows, link tag, past, detail ---- */
.event-link{display:flex;align-items:center;gap:13px;flex:1;min-width:0;text-decoration:none;color:inherit;}
.event-link:hover .ev-b h5{color:var(--blue);}
.ev-linktag{display:inline-flex;align-items:center;gap:3px;font-size:10px;font-weight:800;color:var(--blue);
  background:var(--sky-soft);padding:1px 7px;border-radius:999px;vertical-align:middle;margin-left:6px;}
.ev-linktag svg{width:.85em;height:.85em;}
.event.is-past{opacity:.72;}
.ev-past-tag{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.03em;color:var(--muted);
  background:var(--paper);border:1px solid var(--line);padding:1px 8px;border-radius:999px;vertical-align:middle;}
.backlink{display:inline-block;margin-bottom:12px;color:var(--muted);font-weight:600;font-size:13px;text-decoration:none;}
.backlink:hover{color:var(--blue);}
.ev-detail-top{display:flex;gap:15px;align-items:flex-start;}
.cal-lg{width:64px;height:64px;}
.cal-lg b{font-size:24px;}
.ev-title{font-size:24px;margin:3px 0 8px;line-height:1.15;}
.ev-meta{display:flex;flex-wrap:wrap;gap:6px 16px;color:var(--muted);font-size:13px;}
.ev-meta span{display:inline-flex;align-items:center;gap:6px;}
.ev-meta svg{width:14px;height:14px;color:var(--blue);}
.ev-desc{margin:16px 0 0;color:var(--ink-2,#33415a);line-height:1.6;white-space:normal;}
.ev-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px;}
.ev-actions .btn{flex:0 1 auto;}

/* ---- admin: event attendee lists ---- */
.att-tr td{background:#fafcfe;}
.att{padding:2px 4px 8px;}
.att > summary{cursor:pointer;list-style:none;font-size:12.5px;font-weight:700;color:var(--blue);padding:7px 4px;}
.att > summary::-webkit-details-marker{display:none;}
.att > summary::before{content:"\25B8";display:inline-block;margin-right:6px;transition:transform .15s;color:var(--muted-2);}
.att[open] > summary::before{transform:rotate(90deg);}
.att-body{padding:2px 4px 8px;}
.btn--xs{padding:5px 11px;font-size:12px;display:inline-flex;align-items:center;gap:5px;margin-bottom:8px;}
.btn--xs svg{width:.95em;height:.95em;}
.att-tbl{width:100%;border-collapse:collapse;font-size:12.5px;}
.att-tbl th,.att-tbl td{text-align:left;padding:6px 8px;border-bottom:1px solid var(--line);}
.att-tbl th{color:var(--muted);font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.04em;}
.att-tbl tr:last-child td{border-bottom:0;}

/* ---- admin: 360° member view ---- */
.mv-head{margin-bottom:16px;}
.mv-id{display:flex;align-items:center;gap:15px;}
.mv-name{font-size:23px;margin:0 0 6px;line-height:1.1;}
.mv-sub{display:flex;flex-wrap:wrap;align-items:center;gap:8px;}
.mv-pill{font-size:11px;font-weight:800;letter-spacing:.02em;padding:2px 9px;border-radius:999px;background:var(--sky-soft);color:var(--blue);}
.mv-pill--role{background:var(--paper);color:var(--muted);}
.mv-stage{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:700;color:#5b6b00;background:var(--lime-soft);padding:3px 10px;border-radius:999px;}
.mv-stage svg{width:.95em;height:.95em;}
.mv-actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:16px;padding-top:16px;border-top:1px solid var(--line);}
.mv-act{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;text-decoration:none;
  padding:9px 15px;border-radius:11px;background:var(--paper);color:var(--ink);border:1px solid var(--line);}
.mv-act:hover{background:#eef3f9;}
.mv-act svg{width:1.05em;height:1.05em;}
.mv-act--wa{background:#25D366;color:#fff;border-color:#25D366;}
.mv-act--wa:hover{background:#1ebe5a;}
.mv-act--edit{margin-left:auto;background:var(--navy);color:#fff;border-color:var(--navy);}
.mv-act--edit:hover{background:#0a1f36;}
.mv-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:16px;}
.mv-dl{margin:0;display:grid;grid-template-columns:1fr;gap:0;}
.mv-dl dt{font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--muted-2);margin-top:11px;}
.mv-dl dt:first-child{margin-top:0;}
.mv-dl dd{margin:2px 0 0;font-size:14px;color:var(--ink);word-break:break-word;}
.mv-empty{color:var(--muted-2);}
.mv-yes{display:inline-flex;align-items:center;gap:4px;color:#1a7f37;font-weight:700;}
.mv-yes svg{width:1em;height:1em;}
@media(max-width:560px){ .mv-act--edit{margin-left:0;} }

/* admin: email-a-member compose */
.mv-to{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:var(--paper);border-radius:10px;padding:10px 13px;font-size:13px;color:var(--ink);margin-top:4px;}
.mv-to span{display:inline-flex;align-items:center;gap:5px;color:var(--muted);font-weight:700;}
.mv-to svg{width:1em;height:1em;}

/* ---- profile completion: banner, meter, modal ---- */
.pc-ring{display:inline-flex;flex:none;}
.pc-h{font-weight:800;font-size:15px;color:var(--ink);}
.pc-d{font-size:12.5px;color:var(--muted);margin-top:3px;line-height:1.5;}
.pc-bar{height:7px;border-radius:999px;background:var(--line);overflow:hidden;margin-top:8px;}
.pc-bar span{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--blue-2),var(--blue));transition:width .5s ease;}

/* dashboard banner */
.pc-banner{display:flex;align-items:center;gap:15px;margin-bottom:18px;padding:15px 18px;border-radius:18px;text-decoration:none;
  background:linear-gradient(135deg,#ffffff,#eef6ff);border:1px solid #d9e8fb;box-shadow:0 6px 20px rgba(25,82,150,.06);}
.pc-banner-txt{flex:1;min-width:0;display:flex;flex-direction:column;}
.pc-banner .pc-cta{flex:none;background:var(--navy);color:#fff;font-weight:700;font-size:13px;padding:9px 16px;border-radius:11px;}
.pc-banner:hover .pc-cta{background:#0a1f36;}

/* profile meter card */
.pc-meter{display:flex;align-items:center;gap:16px;margin-bottom:16px;}

/* modal */
.pc-modal[hidden]{display:none!important;}
.pc-modal{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:20px;
  background:rgba(12,39,66,.55);backdrop-filter:blur(3px);animation:pcfade .2s ease;}
@keyframes pcfade{from{opacity:0}to{opacity:1}}
.pc-modal-card{position:relative;background:#fff;border-radius:22px;max-width:380px;width:100%;padding:30px 26px 24px;text-align:center;
  box-shadow:0 24px 60px rgba(12,39,66,.3);animation:pcpop .25s cubic-bezier(.2,.9,.3,1.3);}
@keyframes pcpop{from{transform:translateY(14px) scale(.96);opacity:0}to{transform:none;opacity:1}}
.pc-modal-ring{display:flex;justify-content:center;margin-bottom:14px;}
.pc-modal-card h3{font-size:21px;margin:0 0 8px;}
.pc-modal-card p{font-size:14px;color:var(--muted);line-height:1.6;margin:0 0 20px;}
.pc-modal-actions{display:flex;flex-direction:column;gap:9px;}
.pc-x{position:absolute;top:12px;right:14px;background:none;border:0;font-size:26px;line-height:1;color:var(--muted-2);cursor:pointer;}
.pc-x:hover{color:var(--ink);}

/* ---- testimony wall ---- */
.tw-item{padding:14px 0;border-bottom:1px solid var(--line);}
.tw-item:first-child{padding-top:2px;}
.tw-item:last-child{border-bottom:0;padding-bottom:2px;}
.tw-title{font-weight:800;font-size:14.5px;color:var(--ink);margin-bottom:4px;}
.tw-body{font-size:13.5px;color:#3c4a63;line-height:1.65;}
.tw-by{font-size:12px;color:var(--blue);font-weight:700;margin-top:7px;}

/* ---- Greatness Communities search ---- */
.gc-search{position:relative;margin-bottom:14px;}
.gc-search-ic{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--muted-2);display:inline-flex;pointer-events:none;}
.gc-search-ic svg{width:18px;height:18px;}
.gc-search .inp{padding-left:42px;}
.gc-search .inp::-webkit-search-cancel-button{cursor:pointer;}

/* ---- devotional: eyebrow label ---- */
.devo-eyebrow{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--blue);margin-bottom:4px;}

/* ---- birthday / anniversary celebration hero ---- */
.celebrate{display:flex;align-items:center;gap:15px;margin:0 0 16px;padding:18px 18px;border-radius:20px;color:#fff;
  background:linear-gradient(120deg,#195296 0%,#2C6DB5 55%,#BED000 160%);box-shadow:0 12px 30px rgba(25,82,150,.28);
  position:relative;overflow:hidden;}
.celebrate::after{content:"";position:absolute;inset:0;background:
  radial-gradient(circle at 12% 20%, rgba(255,255,255,.35) 0 3px, transparent 4px),
  radial-gradient(circle at 80% 15%, rgba(190,208,0,.55) 0 4px, transparent 5px),
  radial-gradient(circle at 65% 75%, rgba(255,255,255,.3) 0 2px, transparent 3px),
  radial-gradient(circle at 30% 80%, rgba(255,255,255,.25) 0 3px, transparent 4px);
  pointer-events:none;opacity:.9;}
.celebrate-emoji{font-size:38px;line-height:1;flex:none;filter:drop-shadow(0 2px 4px rgba(0,0,0,.2));z-index:1;}
.celebrate-txt{z-index:1;min-width:0;}
.celebrate-h{font-family:var(--serif,'Bricolage Grotesque');font-weight:800;font-size:20px;line-height:1.15;letter-spacing:-.01em;}
.celebrate-d{font-size:13px;opacity:.95;margin-top:4px;line-height:1.5;}