:root{
  --f:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;
  --bg:#FFFFFF; --page:#F4F6F4; --soft:#F6F8F6; --ink:#122619; --muted:#7B8A80; --line:#E9EDE9;
  --green:#12894F; --green-d:#0E5F38; --green-t:#E8F5ED;
  --amber:#F5A623; --amber-d:#B9740A; --amber-t:#FEF4E2; --red:#D4523C;
  --r-lg:24px; --r-md:18px; --r-sm:14px;
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-t:env(safe-area-inset-top,0px);
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
iconify-icon{display:inline-block;line-height:0;flex:none}
body{
  background:var(--page);color:var(--ink);font-family:var(--f);line-height:1.5;
  -webkit-font-smoothing:antialiased;overscroll-behavior-y:contain;
}
button{font-family:inherit;border:0;background:none;cursor:pointer;color:inherit}
.app{display:flex;flex-direction:column;min-height:100dvh}

/* boot */
.boot{flex:1;display:grid;place-items:center;gap:14px;align-content:center}
.bootMark{width:66px;height:66px;border-radius:20px;background:var(--green);display:grid;place-items:center;
  box-shadow:0 12px 26px -12px rgba(14,95,56,.9)}
.bootTxt{font-size:14px;color:var(--muted);font-weight:600}

/* ---------------- shell ---------------- */
.view{flex:1;overflow-y:auto;overflow-x:hidden;padding:calc(10px + var(--safe-t)) 16px 92px;scrollbar-width:none}
.view::-webkit-scrollbar{display:none}

.ah{display:flex;justify-content:space-between;align-items:center;padding:6px 0 14px;gap:10px}
.ah .l1{font-size:12.5px;color:var(--muted);font-weight:600}
.ah .l2{font-size:19px;font-weight:800;letter-spacing:-.02em;margin-top:1px}
.ah .title{font-size:20px;font-weight:800;letter-spacing:-.02em}
.ah .rgt{display:flex;gap:9px;align-items:center}
.iconbtn{width:42px;height:42px;border-radius:14px;background:var(--soft);display:grid;place-items:center;position:relative}
.iconbtn:active{transform:scale(.94)}
.badge{position:absolute;top:7px;right:8px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--red);
  color:#fff;font-size:10px;font-weight:800;display:grid;place-items:center;border:2px solid var(--bg)}
.ava{width:42px;height:42px;border-radius:14px;background:var(--green);color:#fff;display:grid;place-items:center;font-weight:800;font-size:16px}

/* balance */
.bonus{background:var(--green);border-radius:var(--r-lg);padding:18px;color:#EAF6EF;display:flex;align-items:center;gap:14px;
  box-shadow:0 16px 30px -18px rgba(14,95,56,.9)}
.bonus .bl{flex:1;min-width:0}
.bonus .k{font-size:12px;font-weight:600;color:#A9D8BF}
.bonus .v{font-size:32px;font-weight:800;letter-spacing:-.03em;color:#fff;font-variant-numeric:tabular-nums;line-height:1.1}
.bonus .v small{font-size:13px;font-weight:600;color:#A9D8BF;margin-left:6px}
.bonus .pl{font-size:11.5px;color:#A9D8BF;margin-top:6px;font-weight:600}
.bonus .pl b{color:#fff}
.bonus .qr{width:60px;height:60px;border-radius:16px;background:rgba(255,255,255,.16);display:grid;place-items:center;color:#fff}
.bonus .qr:active{transform:scale(.95)}

/* birthday */
.bday{position:relative;margin-bottom:14px;border-radius:var(--r-lg);padding:18px;overflow:hidden;color:#4A2600;
  background:linear-gradient(135deg,#F5A623,#F0851B);box-shadow:0 16px 30px -18px rgba(217,122,0,.95)}
.bday .bTop{display:flex;align-items:center;gap:12px;position:relative}
.bday .bIco{width:52px;height:52px;border-radius:16px;background:rgba(255,255,255,.35);display:grid;place-items:center}
.bday .bT{display:block;font-size:17px;font-weight:800;letter-spacing:-.02em;color:#3D1F00}
.bday .bS{display:block;font-size:12.5px;font-weight:600;color:#7A4A00;margin-top:2px}
.bday .bMsg{margin-top:13px;background:rgba(255,255,255,.55);border-radius:14px;padding:11px 13px;font-size:13px;
  font-weight:600;color:#4A2600;display:flex;align-items:center;gap:8px;position:relative}
.bday .conf{position:absolute;inset:0;pointer-events:none}
.bday .conf i{position:absolute;width:7px;height:11px;border-radius:2px;opacity:.8}
@media (prefers-reduced-motion:no-preference){
  .bday .conf i{animation:fall 3.6s linear infinite}
  @keyframes fall{0%{transform:translateY(-20px) rotate(0)}100%{transform:translateY(170px) rotate(340deg)}}
}

/* prompts */
.nudge{display:flex;gap:12px;align-items:center;background:var(--amber-t);border-radius:var(--r-md);padding:13px 14px;margin-top:13px}
.nudge .nI{width:40px;height:40px;border-radius:13px;background:#fff;display:grid;place-items:center;color:var(--amber-d)}
.nudge .nT{flex:1;min-width:0}
.nudge .n1{display:block;font-size:13.5px;font-weight:700}
.nudge .n2{display:block;font-size:11.5px;color:var(--amber-d);font-weight:600;margin-top:1px}
.nudge .nB{background:var(--green);color:#fff;font-size:12.5px;font-weight:700;padding:9px 13px;border-radius:12px}

/* sections + rows */
.sect{display:flex;justify-content:space-between;align-items:baseline;margin:20px 0 10px}
.sect h4{font-size:15.5px;font-weight:800;letter-spacing:-.02em}
.sect button{font-size:12.5px;font-weight:700;color:var(--green)}

.row{display:flex;align-items:center;gap:12px;background:var(--bg);border-radius:var(--r-md);padding:12px 13px;margin-bottom:9px}
.row .ic{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:var(--green-t);color:var(--green-d)}
.row .ic.pay{background:var(--amber-t);color:var(--amber-d)}
.row .rt{flex:1;min-width:0;display:flex;flex-direction:column}
.row .r1{display:block;font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .r2{display:block;font-size:11.5px;color:var(--muted);font-weight:600;margin-top:1px}
.row .rv{text-align:right;font-variant-numeric:tabular-nums}
.row .v1{display:block;font-size:14px;font-weight:800;white-space:nowrap}
.row .v2{display:block;font-size:11.5px;font-weight:800;margin-top:1px}
.v2.up{color:var(--green)} .v2.dn{color:var(--amber-d)}
.dsep{font-size:11px;font-weight:800;color:var(--muted);letter-spacing:.06em;margin:16px 0 6px}

/* promos */
.promo{display:flex;align-items:center;gap:12px;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-md);
  padding:12px;margin-bottom:10px}
.promo .pArt{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;background:var(--green-t)}
.promo .pMid{flex:1;min-width:0;display:flex;flex-direction:column}
.promo .p1{display:block;font-size:14px;font-weight:800;letter-spacing:-.015em}
.promo .p2{display:block;font-size:12px;color:var(--muted);font-weight:600;margin-top:2px}
.promo .p3{display:inline-block;align-self:flex-start;font-size:10.5px;font-weight:800;color:var(--green-d);
  background:var(--green-t);padding:3px 8px;border-radius:99px;margin-top:6px}

/* card */
.lcard{background:var(--green);border-radius:var(--r-lg);padding:20px;color:#fff;position:relative;overflow:hidden;
  box-shadow:0 18px 34px -18px rgba(14,95,56,.9)}
.lcard .lk{font-size:11.5px;color:#A9D8BF;font-weight:600}
.lcard .ln{font-size:20px;font-weight:800;letter-spacing:.08em;font-variant-numeric:tabular-nums;margin-top:6px;white-space:nowrap}
.lcard .lb{display:flex;justify-content:space-between;align-items:flex-end;margin-top:18px}
.lcard .lo{font-size:12.5px;color:#A9D8BF;font-weight:600}
.lcard .lv{font-size:22px;font-weight:800;font-variant-numeric:tabular-nums}
.lcard .mk{position:absolute;top:16px;right:18px}
.qrbox{background:var(--bg);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;text-align:center;margin-top:14px}
.qrbox .qh{font-size:12.5px;color:var(--muted);font-weight:600;margin-bottom:14px}
#qrc{width:210px;height:210px;margin:0 auto;display:block;image-rendering:pixelated}
#bcc{width:100%;height:56px;margin-top:16px;display:block}
.qhint{text-align:center;font-size:12.5px;color:var(--muted);font-weight:600;margin-top:14px}

/* profile */
.pr{text-align:center;padding:10px 0 6px}
.pr .pa{width:84px;height:84px;border-radius:27px;background:var(--green);color:#fff;display:grid;place-items:center;
  font-size:33px;font-weight:800;margin:0 auto}
.pr .pn{font-size:22px;font-weight:800;letter-spacing:-.02em;margin-top:12px}
.pr .pp{font-size:13px;color:var(--muted);font-weight:600;font-variant-numeric:tabular-nums;display:flex;
  justify-content:center;align-items:center;gap:8px;margin-top:3px;flex-wrap:wrap}
.vf{display:inline-flex;align-items:center;gap:5px;background:var(--green-t);color:var(--green-d);font-size:11px;
  font-weight:800;padding:4px 9px;border-radius:99px}
.pstats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.ps{background:var(--soft);border-radius:var(--r-md);padding:13px 15px}
.ps .v{font-size:18px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.ps .l{font-size:11.5px;color:var(--muted);font-weight:600;margin-top:1px}
.mrow{display:flex;align-items:center;gap:12px;padding:14px 2px;border-bottom:1px solid var(--line);font-size:14.5px;font-weight:600}
.mrow:last-child{border-bottom:0}
.mrow .mi{width:38px;height:38px;border-radius:12px;background:var(--soft);display:grid;place-items:center;color:var(--green-d)}
.mrow .mv{margin-left:auto;font-size:12.5px;color:var(--muted);font-weight:600;display:flex;align-items:center;gap:7px}

/* switch */
.sw{width:46px;height:27px;border-radius:99px;background:var(--line);position:relative;transition:background .18s}
.sw.on{background:var(--green)}
.sw i{position:absolute;top:3px;left:3px;width:21px;height:21px;border-radius:50%;background:#fff;transition:transform .18s;
  box-shadow:0 1px 3px rgba(0,0,0,.25)}
.sw.on i{transform:translateX(19px)}

/* onboarding / forms */
.ob{flex:1;display:flex;flex-direction:column;padding:calc(20px + var(--safe-t)) 22px calc(22px + var(--safe-b));text-align:center}
.obArt{height:190px;border-radius:var(--r-lg);background:var(--green-t);display:grid;place-items:center;margin-top:8px}
.ob h2{font-size:25px;font-weight:800;letter-spacing:-.03em;margin-top:22px;line-height:1.16}
.ob h2 span{color:var(--green)}
.ob p{font-size:14px;color:var(--muted);font-weight:500;margin-top:9px;max-width:30ch;margin-inline:auto}
.obList{list-style:none;margin-top:20px;text-align:left;display:flex;flex-direction:column;gap:10px}
.obList li{display:flex;gap:12px;align-items:center;background:var(--bg);border-radius:var(--r-md);padding:12px 13px}
.obList .oI{width:42px;height:42px;border-radius:13px;background:var(--amber-t);display:grid;place-items:center}
.obList b{display:block;font-size:14px;font-weight:700}
.obList span{display:block;font-size:12px;color:var(--muted);font-weight:600}

.btn{display:flex;align-items:center;justify-content:center;gap:10px;min-height:54px;border-radius:17px;
  background:var(--green);color:#fff;font-size:16px;font-weight:700;width:100%;box-shadow:0 14px 26px -14px rgba(14,95,56,.9)}
.btn:active{transform:scale(.985)}
.btn[disabled]{opacity:.55;box-shadow:none}
.btn.tg{background:#2AABEE;box-shadow:0 14px 26px -14px rgba(42,171,238,.9)}
.btn.ghost{background:var(--soft);color:var(--ink);box-shadow:none}
.fine{font-size:11.5px;color:var(--muted);font-weight:600;margin-top:12px;display:flex;align-items:center;justify-content:center;gap:7px}

/* ---------------- profile form ----------------
   Same vocabulary as the rest of the app: white cards on the light ground,
   tinted icon squares, 18px radius, green accents. */
.pfView{display:flex;flex-direction:column;padding-bottom:calc(20px + var(--safe-b))}
.pfLead{font-size:13.5px;color:var(--muted);font-weight:500;margin:-6px 2px 16px;line-height:1.5;max-width:36ch}

/* field card — mirrors .row / .mrow */
.fRow{display:flex;align-items:center;gap:12px;background:var(--bg);border-radius:var(--r-md);
  padding:11px 13px;margin-bottom:9px;transition:box-shadow .16s}
.fRow .ic{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;flex:none;
  background:var(--green-t);color:var(--green-d);transition:.16s}
.fRow .fWrap{flex:1;min-width:0;display:flex;flex-direction:column}
.fRow label{display:block;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);transition:color .16s}
.fRow input{width:100%;border:0;background:transparent;font-family:inherit;font-size:16.5px;font-weight:700;
  color:var(--ink);padding:2px 0 0;min-height:26px;letter-spacing:-.01em}
.fRow input:focus{outline:0}
.fRow input::placeholder{color:#C3CDC6;font-weight:500}
.fRow:focus-within{box-shadow:0 0 0 2px var(--green)}
.fRow:focus-within .ic{background:var(--green);color:#fff}
.fRow:focus-within label{color:var(--green-d)}
input[type=date]{-webkit-appearance:none;appearance:none;font-variant-numeric:tabular-nums}
input[type=date]::-webkit-calendar-picker-indicator{opacity:.45;cursor:pointer}

/* gender — two selectable cards, same idiom as .tier / .prod */
.gGrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.gCard{position:relative;height:58px;border-radius:var(--r-md);background:var(--bg);
  border:1.5px solid transparent;font-size:15.5px;font-weight:700;color:var(--ink);transition:.16s}
.gCard.on{border-color:var(--green);background:var(--green-t);color:var(--green-d)}
.gCard:active{transform:scale(.97)}
.gCard .gTick{position:absolute;top:8px;right:8px;width:20px;height:20px;border-radius:50%;
  background:var(--green);color:#fff;display:grid;place-items:center;opacity:0;transform:scale(.6);transition:.16s}
.gCard.on .gTick{opacity:1;transform:scale(1)}

/* birthday benefit — soft green card, like .balline */
.giftNote{display:flex;align-items:center;gap:12px;background:var(--green-t);border-radius:var(--r-md);
  padding:13px 14px;margin-top:11px}
.giftNote .gIc{width:40px;height:40px;border-radius:13px;background:var(--bg);color:var(--green-d);
  display:grid;place-items:center;flex:none}
.giftNote b{display:block;font-size:13.5px;font-weight:800;color:var(--green-d)}
.giftNote span span{display:block;font-size:12px;color:#4E7A62;font-weight:600;margin-top:1px}

.pfErr{font-size:13.5px;color:var(--red);font-weight:700;margin-top:14px;padding:0 2px;display:none}
.pfErr.on{display:block}
.pfFoot{margin-top:26px;display:flex;flex-direction:column;gap:4px}
.btnText{min-height:48px;font-size:14.5px;font-weight:700;color:var(--muted)}
.btnText:active{opacity:.6}

/* empty + toast */
.empty{text-align:center;padding:44px 20px;color:var(--muted)}
.empty .eI{width:64px;height:64px;border-radius:20px;background:var(--soft);display:grid;place-items:center;margin:0 auto 14px}
.empty b{display:block;font-size:15px;color:var(--ink);font-weight:700}
.empty span{display:block;font-size:13px;margin-top:4px}
.toast{position:fixed;left:50%;bottom:calc(86px + var(--safe-b));transform:translateX(-50%) translateY(12px);opacity:0;
  background:var(--ink);color:#fff;font-size:13.5px;font-weight:600;padding:12px 18px;border-radius:14px;z-index:60;
  transition:opacity .2s,transform .2s;pointer-events:none;max-width:88vw;text-align:center}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
.offline{background:var(--amber-t);color:var(--amber-d);font-size:12px;font-weight:700;text-align:center;padding:7px}

/* tabbar */
.tabs{position:fixed;left:0;right:0;bottom:0;display:flex;justify-content:space-around;align-items:center;
  padding:8px 6px calc(8px + var(--safe-b));border-top:1px solid var(--line);background:var(--bg);z-index:50}
.tab{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:56px;min-height:46px;justify-content:center;
  font-size:10px;font-weight:700;color:var(--muted)}
.tab.on{color:var(--green)}
.tab:active{transform:scale(.93)}
.skel{background:linear-gradient(90deg,var(--soft) 25%,#eef1ee 37%,var(--soft) 63%);background-size:400% 100%;
  animation:sk 1.3s infinite;border-radius:var(--r-md)}
@keyframes sk{0%{background-position:100% 50%}100%{background-position:0 50%}}

.phoneBig{font-size:27px;font-weight:800;letter-spacing:-.01em;font-variant-numeric:tabular-nums;
  color:var(--ink);margin:6px 0 12px}
.phoneNote{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;color:var(--green-d);
  background:var(--green-t);padding:9px 14px;border-radius:99px}