/* DINGO ui layer: register/login + profile + bottom nav. Loaded after style.css.
   Sizes are proportional to the reference screenshots: --pu = 1px of the 924px profile mock,
   --ru = 1px of the 852px register mock, both capped at a 480px wide phone column. */
:root{
  --pu:calc(min(100vw,480px) / 924);
  --ru:calc(min(100vw,480px) / 852);
  --dg:#12B334;--dr:#E3000F;
}

/* ---------- bottom nav (icon-only, shared by every main page) ---------- */
body.has-nav{padding-bottom:calc(var(--pu) * 150 + env(safe-area-inset-bottom,0px))}
body .tabs{
  left:50%;right:auto;transform:translateX(-50%);width:min(100%,480px);
  grid-template-columns:repeat(4,minmax(0,1fr));align-items:center;
  height:calc(var(--pu) * 135 + env(safe-area-inset-bottom,0px));min-height:56px;
  padding:0 calc(var(--pu) * 20) env(safe-area-inset-bottom,0px);
  background:var(--card);border:0;border-top:calc(var(--pu) * 3.5) solid var(--dg);
  border-radius:calc(var(--pu) * 70) calc(var(--pu) * 70) 0 0;box-shadow:0 -6px 18px -10px rgba(0,0,0,.18);
}
body .tabs a{display:grid;place-items:center;height:100%;color:#46464D;font-size:0;gap:0;-webkit-tap-highlight-color:transparent}
body .tabs a .ic{width:max(26px,calc(var(--pu) * 62));height:max(26px,calc(var(--pu) * 62));stroke-width:2.1}
body .tabs a.on{color:var(--dr)}
body .tabs a.on[aria-label="Home"] .ic,body .tabs a.on[aria-label="Mine"] .ic{fill:currentColor}
body .tabs a.on[aria-label="Home"] .ic path:nth-child(2){fill:var(--card);stroke:var(--card)}
@media (prefers-color-scheme:dark){body:not(.pf):not(.reg) .tabs a{color:var(--muted)}body:not(.pf):not(.reg) .tabs a.on{color:var(--red-2)}}

/* ---------- forced light pages ---------- */
body.reg,body.pf{
  --ink:#14161C;--muted:#737A87;--card:#fff;--bg:#fff;--line:#EDEDF0;--red-soft:#FFECEC;--green-soft:#E8F8F0;
  color:#111;color-scheme:light;
}
body.reg::before,body.pf::before{display:none}
body.reg .page,body.pf .page{display:block;max-width:480px;margin:0 auto;position:relative}
body.reg .page>*,body.pf .page>*{animation:none}

/* ---------- register / login ---------- */
body.reg{--ac:#E3000F;--ac-d:#B0000B;--ink:#0F1220;
  background:radial-gradient(120% 90% at 85% 0%,#FF3B3B 0%,rgba(255,59,59,0) 55%) top/100% 330px no-repeat,linear-gradient(165deg,#6E000B 0%,#B4000E 50%,#E3000F 100%) top/100% 330px no-repeat,#F4F5F9;padding:0;font-family:var(--body);min-height:100vh;overflow-x:hidden}
body.reg .page{max-width:none;padding:0;min-height:100vh}
.au-wrap{max-width:460px;margin:0 auto;padding:0 0 calc(28px + env(safe-area-inset-bottom,0px));position:relative}
.au-hero{position:relative;z-index:1;padding:calc(20px + env(safe-area-inset-top,0px)) 22px 0;color:#fff;overflow:visible}
.au-orb{position:absolute;border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(255,255,255,.16),rgba(255,255,255,0) 70%)}
.au-orb.o1{width:220px;height:220px;right:-70px;top:-60px}
.au-orb.o2{width:140px;height:140px;left:-50px;top:150px}
.au-brand{position:relative;display:inline-flex;align-items:center;gap:9px}
.au-brand img{height:28px;width:auto}
.au-brand span{font:800 20px/1 var(--body);letter-spacing:.02em}
.au-hero-in{position:relative;display:flex;align-items:center;justify-content:space-between;gap:0;min-height:190px;margin-top:6px}
.au-copy{flex:1 1 48%;min-width:0;padding-bottom:34px;position:relative;z-index:2}
.au-kick{font-size:12.5px;font-weight:700;color:rgba(255,255,255,.78);margin-bottom:8px;display:flex;align-items:center;gap:8px}
.au-kick::before{content:"";width:18px;height:2px;border-radius:2px;background:#4ADE80}
.au-hero h2{font:800 24px/1.15 var(--body);letter-spacing:-.03em;text-wrap:balance}
.au-art{flex:0 0 auto;width:min(58vw,270px);height:auto;margin:-10px -34px 0 -26px;transform:translateY(14px);
  filter:drop-shadow(0 22px 22px rgba(60,0,8,.45))}
@media(prefers-reduced-motion:no-preference){
  .au-art{animation:au-float 6s ease-in-out infinite}
  @keyframes au-float{0%,100%{transform:translateY(14px)}50%{transform:translateY(5px)}}
}
.au-card{position:relative;z-index:2;margin:0 22px;padding:6px 16px 16px;background:#fff;border-radius:24px;border:1px solid #ECEEF4;
  box-shadow:0 30px 60px -30px rgba(80,0,12,.5),0 2px 8px rgba(20,22,40,.05)}
.au-tabs{display:grid;grid-template-columns:1fr 1fr;gap:3px;margin:12px 0 16px;padding:3px;background:#F2F3F7;border-radius:12px}
.au-tabs a{display:grid;place-items:center;height:34px;border-radius:10px;font:700 13px var(--body);color:#6A7080;transition:background .15s,color .15s}
.au-tabs a.on{background:#fff;color:var(--ac);box-shadow:0 1px 2px rgba(20,22,40,.08),0 4px 10px -4px rgba(20,22,40,.12)}
.au-tabs a:focus-visible,.au-btn:focus-visible,.au-alt a:focus-visible,.eye:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
.au-card h1{font:800 20px/1.15 var(--body);letter-spacing:-.03em;color:var(--ink)}
.au-sub{margin:4px 0 14px;font-size:12.5px;color:#6A7080;line-height:1.45}
.af{margin-bottom:10px}
.af label{display:block;margin:0 0 5px 2px;font-size:12px;font-weight:700;color:#3F4556}
.af-box{display:flex;align-items:center;gap:9px;height:44px;padding:0 4px 0 12px;border-radius:12px;background:#F6F7FA;border:1.5px solid #E6E9F0;color:#8A90A0;
  transition:border-color .15s,box-shadow .15s,background .15s,color .15s}
.af-box:hover{border-color:#D5D9E3}
.af-box:focus-within{background:#fff;border-color:var(--ac);box-shadow:0 0 0 4px rgba(227,0,15,.10);color:var(--ac)}
.af-box input{flex:1;min-width:0;height:100%;border:0;outline:0;background:none;font:500 16px var(--body);color:var(--ink);padding:0;-webkit-appearance:none;appearance:none}
.af-box input::placeholder{color:#9AA0AE;opacity:1}
.eye{flex:none;width:36px;height:36px;border-radius:10px;display:grid;place-items:center;color:#7A8090}
.eye.on{color:var(--ac)}
.meter{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin:-4px 2px 10px}
.meter i{height:4px;border-radius:4px;background:#E6E8EE;transition:background .2s}
.meter i.on.s1{background:#E5484D}.meter i.on.s2{background:#F5A524}.meter i.on.s3,.meter i.on.s4{background:#12B76A}
.reg-err{display:flex;gap:9px;align-items:flex-start;margin:0 0 16px;background:#FFECEC;border:1px solid #FFD0D3;color:#B5000E;font-size:13px;font-weight:600;padding:12px 13px;border-radius:13px;line-height:1.35}
.reg-err .ic{margin-top:1px}
.au-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:46px;margin-top:16px;border-radius:13px;color:#fff;
  font:800 14.5px var(--body);background:linear-gradient(135deg,#F2141C 0%,#BC000C 100%);
  box-shadow:0 16px 26px -12px rgba(200,0,15,.85),inset 0 1px 0 rgba(255,255,255,.3);transition:transform .12s,filter .12s}
.au-btn .ic{stroke-width:2.5}
.au-btn:hover{filter:brightness(1.05)}.au-btn:active{transform:scale(.985);filter:brightness(.95)}
.au-alt{text-align:center;margin-top:14px;font-size:12.5px;color:#6A7080}
.au-alt a{color:#0E9F2E;font-weight:800;margin-left:4px}
.au-foot{text-align:center;margin:18px 16px 0;font-size:11.5px;color:#8A90A0}
@media(max-width:360px){.au-hero h2{font-size:22px}.au-card{margin:0 14px}}
@media(min-width:700px){body.reg{padding-top:24px}}

/* ---------- profile ---------- */
body.pf{background:#fff;font-family:'Nunito',var(--body)}
body.pf .page{padding:calc(var(--pu) * 6 + env(safe-area-inset-top,0px)) calc(var(--pu) * 38) 0}
.pf-head{display:flex;align-items:center;gap:calc(var(--pu) * 26);padding:calc(var(--pu) * 6) calc(var(--pu) * 42) calc(var(--pu) * 22);
  margin:0 calc(var(--pu) * 32);border-bottom:calc(var(--pu) * 3) solid #19B83B}
.pf-av{position:relative;flex:none;width:calc(var(--pu) * 116);height:calc(var(--pu) * 116);min-width:52px;min-height:52px;border-radius:50%;
  border:calc(var(--pu) * 8) solid var(--dr);display:grid;place-items:center;color:var(--dr);background:#fff}
.pf-av .ic{width:60%;height:60%;fill:currentColor;stroke-width:1.4}
.pf-av .dot{position:absolute;right:calc(var(--pu) * -14);bottom:calc(var(--pu) * -4);width:calc(var(--pu) * 32);height:calc(var(--pu) * 32);min-width:12px;min-height:12px;
  border-radius:50%;background:#16B338;border:2px solid #fff}
.pf-id{min-width:0}
.pf-id strong{display:block;font:800 max(14px,calc(var(--pu) * 37))/1.15 'Nunito',var(--body);color:#0C0C0E;overflow-wrap:anywhere}
.pf-pill{display:inline-block;margin-top:calc(var(--pu) * 12);padding:calc(var(--pu) * 4) calc(var(--pu) * 26);border:calc(var(--pu) * 3) solid #17B33A;border-radius:999px;
  font:800 max(12px,calc(var(--pu) * 29)) 'Nunito',var(--body);color:#111;letter-spacing:.01em}
.pf-bal{text-align:center;padding:calc(var(--pu) * 26) calc(var(--pu) * 7) 0}
.pf-bal small{display:block;font:600 max(12px,calc(var(--pu) * 30)) 'Nunito',var(--body);letter-spacing:.015em;color:#575A62}
.pf-bal b{display:block;margin:calc(var(--pu) * 4) 0 calc(var(--pu) * 20);font:900 max(28px,calc(var(--pu) * 74))/1.1 'Nunito',var(--body);color:var(--dg);letter-spacing:-.01em;overflow-wrap:anywhere}
.pf-wd{display:flex;align-items:center;justify-content:center;gap:calc(var(--pu) * 26);height:max(46px,calc(var(--pu) * 94));border-radius:calc(var(--pu) * 30);color:#fff;
  font:800 max(17px,calc(var(--pu) * 40)) 'Nunito',var(--body);
  background:linear-gradient(180deg,#EC000C 0%,#CE0009 100%);
  box-shadow:0 14px 22px -14px rgba(206,0,9,.9),inset 0 1.5px 0 rgba(255,255,255,.25)}
.pf-wd .ic{width:calc(var(--pu) * 54);height:calc(var(--pu) * 54);min-width:22px;min-height:22px;stroke-width:2.2;fill:rgba(255,255,255,.18)}
.pf-wd:active{filter:brightness(.94)}
.pf-stats{position:relative;display:grid;grid-template-columns:1fr 1fr;margin:calc(var(--pu) * 24) calc(var(--pu) * 7) calc(var(--pu) * 28);
  padding:calc(var(--pu) * 20) 0 calc(var(--pu) * 18);background:#F0FBF5;border:calc(var(--pu) * 2.5) solid #BEE9D0;border-radius:calc(var(--pu) * 32);text-align:center}
.pf-stats::after{content:"";position:absolute;left:50%;top:calc(var(--pu) * 26);bottom:calc(var(--pu) * 26);width:calc(var(--pu) * 2.5);min-width:1px;background:#2A9D57;opacity:.8}
.pf-stats div{min-width:0;padding:0 calc(var(--pu) * 10)}
.pf-stats b{display:block;font:900 max(15px,calc(var(--pu) * 40))/1.15 'Nunito',var(--body);letter-spacing:-.01em;overflow-wrap:anywhere}
.pf-stats b.g{color:var(--dg)}.pf-stats b.r{color:var(--dr)}
.pf-stats small{display:block;margin-top:calc(var(--pu) * 4);font:600 max(11px,calc(var(--pu) * 29)) 'Nunito',var(--body);color:#6A6D75}
.pf-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(var(--pu) * 19) calc(var(--pu) * 18)}
.pf-t{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--pu) * 10);
  min-height:max(76px,calc(var(--pu) * 172));padding:calc(var(--pu) * 16) calc(var(--pu) * 10);text-align:center;
  background:#fff;border:1px solid #F0F0F3;border-radius:calc(var(--pu) * 38);
  box-shadow:0 2px 3px rgba(0,0,0,.04),0 14px 24px -14px rgba(0,0,0,.22);
  font:800 max(13px,calc(var(--pu) * 33))/1.08 'Nunito',var(--body);color:#0D0D10;-webkit-tap-highlight-color:transparent;transition:transform .12s}
.pf-t:active{transform:scale(.97)}
.pf-t .ic{width:max(30px,calc(var(--pu) * 74));height:max(30px,calc(var(--pu) * 74));stroke-width:2.2}
.pf-t.g .ic{color:var(--dg)}.pf-t.r .ic{color:var(--dr)}

/* ---------- small shared bits for the new sub-pages ---------- */
.lw-sum{display:grid;grid-template-columns:1fr 1fr;text-align:center;padding:18px 8px}
.lw-sum b{display:block;font:800 22px var(--display);overflow-wrap:anywhere}.lw-sum b.g{color:var(--green)}
.lw-sum small{color:var(--muted);font-size:12.5px;font-weight:600}
.lw-row .grow strong{display:block;font-size:14.5px;overflow-wrap:anywhere}.lw-row .grow span{color:var(--muted);font-size:12px}
.chip-s{padding:5px 12px;border-radius:999px;font-size:12px;font-weight:800;background:#F1F1F4;color:#6B6F78}
.chip-s.ok{background:var(--green-soft);color:var(--green-d)}
.rk-head{display:flex;align-items:center;gap:14px;color:var(--red)}
.rk-head div strong{display:block;color:var(--ink);font:800 16px var(--display)}.rk-head span{color:var(--muted);font-size:12.5px}
.rk-row .grow strong{display:block;font-size:14.5px;overflow-wrap:anywhere}.rk-row .grow span{color:var(--muted);font-size:12px}
.rk-row.me{border:1.5px solid var(--red)}
.rk-n{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font:800 14px var(--display);background:#F1F1F4;color:#555}
.rk-n.n1{background:#FFD54A;color:#6A4A00}.rk-n.n2{background:#D9DEE5;color:#3F4650}.rk-n.n3{background:#F3C3A0;color:#7A3E12}
.msg{display:flex;gap:12px;align-items:flex-start}.msg strong{display:block;font-size:14.5px;margin-bottom:3px}.msg p{color:var(--muted);font-size:13px;line-height:1.5}
.empty{text-align:center;color:var(--muted);padding:26px 16px;line-height:1.8}

/* ---------- invite page: code sits right under the copy ---------- */
body .invhero{padding-bottom:12px}
body .invhero .txt .codewrap{width:100%;max-width:none;margin-top:10px}
body .invhero .codewrap small{margin-bottom:4px;font-size:12.5px}
body .invhero .codeval{padding:9px 12px;font-size:19px}
body .invhero .ibtns{margin-top:10px}

/* ---------- bank picker ---------- */
.bsel{display:flex;align-items:center;gap:12px;width:100%;min-height:52px;padding:8px 14px;border-radius:14px;background:var(--card);border:1.5px solid var(--line);text-align:left;font:700 16px var(--body);color:var(--ink)}
.bsel .ph{color:var(--muted);font-weight:500}.bsel .grow{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bsel .ic:last-child{color:var(--muted)}
.bsel:focus-visible{outline:0;border-color:var(--red);box-shadow:0 0 0 4px var(--red-soft)}
.bl{width:36px;height:36px;flex:none;border-radius:10px;display:grid;place-items:center;overflow:hidden;background:#fff;border:1px solid #EEE;font:800 13px var(--body);color:#fff}
.bl img{width:100%;height:100%;object-fit:contain;display:block;padding:3px}
.bm{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:16px;background:rgba(10,12,20,.5);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);animation:bmf .18s ease both}
.bm[hidden]{display:none}
.bm-card{width:min(100%,380px);max-height:min(72vh,540px);display:flex;flex-direction:column;background:var(--card);color:var(--ink);border-radius:22px;box-shadow:0 30px 70px -20px rgba(0,0,0,.5);overflow:hidden;animation:bmu .22s cubic-bezier(.2,.8,.2,1) both}
.bm-h{display:flex;align-items:center;justify-content:space-between;padding:16px 16px 10px}
.bm-h h3{font:800 17px var(--body);letter-spacing:-.01em}
.bm-x{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--line);color:var(--ink)}
.bm-s{display:flex;align-items:center;gap:8px;margin:0 16px 8px;padding:0 12px;height:44px;border-radius:12px;background:var(--bg);border:1px solid var(--line);color:var(--muted)}
.bm-s:focus-within{border-color:var(--red)}
.bm-s input{flex:1;min-width:0;border:0;outline:0;background:none;font:500 16px var(--body);color:var(--ink)}
.bm-l{list-style:none;overflow-y:auto;overscroll-behavior:contain;padding:4px 8px 12px;margin:0;-webkit-overflow-scrolling:touch}
.bm-l li{display:flex;align-items:center;gap:12px;padding:9px 8px;border-radius:12px;cursor:pointer;font-weight:700;font-size:14.5px}
.bm-l li:hover,.bm-l li:focus-visible{background:var(--bg);outline:0}
.bm-l li.on{background:var(--red-soft);color:var(--red)}
.bm-l li .t{flex:1;min-width:0}.bm-l li .ic{color:var(--red)}
.bm-msg{padding:28px 16px;text-align:center;color:var(--muted);font-size:14px}
.bm-msg button{margin-top:10px;color:var(--red);font-weight:800}
@keyframes bmf{from{opacity:0}to{opacity:1}}@keyframes bmu{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}

/* ---------- top bar: Download APK ---------- */
.apk{display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 15px;border-radius:12px;color:#fff;font:800 13.5px var(--body);white-space:nowrap;
  background:linear-gradient(135deg,#F0151D,#C4000C);box-shadow:0 10px 18px -10px rgba(200,0,15,.85),inset 0 1px 0 rgba(255,255,255,.28);-webkit-tap-highlight-color:transparent}
.apk .ic{stroke-width:2.5}.apk:active{transform:scale(.97);filter:brightness(.95)}