:root{
  --green:#138A5E; --green-d:#0E6B49; --green-l:#E7F4EE; --green-ll:#EFF7F2;
  --ink:#11271E; --muted:#6B7B72; --line:#E7EAE5; --bg:#F5F7F3; --card:#FFFFFF;
  --coral:#FB6B3C; --coral-l:#FFEDE5;
  --danger:#D14343;
  --shadow:0 1px 2px rgba(16,39,30,.05), 0 10px 30px rgba(16,39,30,.06);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:#E5E9E3; color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased; font-size:16px;
}
button{font-family:inherit}

#app{
  position:relative; width:100%; max-width:430px; height:100dvh; margin:0 auto;
  background:var(--bg); display:flex; flex-direction:column; overflow:hidden;
}
@media(min-width:480px){
  body{display:flex; align-items:center; justify-content:center; padding:24px}
  #app{height:min(884px,calc(100dvh - 48px)); border-radius:38px; border:1px solid #d6dbd4; box-shadow:0 30px 70px rgba(16,39,30,.22); overflow:hidden}
}

#views{flex:1; min-height:0; position:relative}
.view{display:none; flex-direction:column; position:absolute; inset:0}
.view.active{display:flex}
.view-body{flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:8px 18px 26px}
.view-foot{flex-shrink:0; padding:12px 18px calc(14px + env(safe-area-inset-bottom)); background:var(--bg); border-top:1px solid var(--line)}

.ic{width:24px; height:24px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0}

/* top bar */
.topbar{flex-shrink:0; display:flex; align-items:center; gap:8px; padding:14px 12px 6px}
.topbar h1{font-size:19px; font-weight:600; margin:0}
.iconbtn{position:relative; width:42px; height:42px; border-radius:13px; display:grid; place-items:center; background:transparent; border:none; color:var(--ink); cursor:pointer}
.iconbtn:active{background:var(--green-l)}
.iconbtn .dot{position:absolute; top:9px; right:10px; width:8px; height:8px; border-radius:50%; background:var(--coral); border:2px solid var(--bg)}

.page-title{font-size:26px; font-weight:700; margin:6px 0 4px}
.page-sub{color:var(--muted); margin:0 0 18px; line-height:1.5}
h2{font-size:16px; font-weight:600; margin:18px 0 10px}
.small{font-size:13px}
.muted{color:var(--muted)}
.center{text-align:center}
.mt{margin-top:14px}
.hint{color:var(--muted); font-size:13px; text-align:center; margin-top:16px; line-height:1.5}

/* buttons */
.btn{display:flex; align-items:center; justify-content:center; gap:8px; width:100%; height:54px; border-radius:16px; border:none; font-size:16px; font-weight:600; cursor:pointer; color:#fff}
.btn .ic{width:20px; height:20px; stroke-width:2}
.btn-primary{background:var(--green)}
.btn-primary:active{background:var(--green-d)}
.btn-ghost{background:var(--green-l); color:var(--green-d)}
.btn-line{background:#fff; color:var(--ink); border:1px solid var(--line)}
.btn-white{background:#fff; color:var(--green-d)}
.btn-danger{background:#fff; color:var(--danger); border:1px solid #F0CFCF}
.btn:disabled{opacity:.45}
.btn + .btn{margin-top:10px}

.link{background:none; border:none; color:var(--green); font-weight:600; font-size:14px; cursor:pointer}
.link-right{display:block; margin-left:auto; background:none; border:none; color:var(--green); font-weight:600; font-size:14px; cursor:pointer; padding:0}
.inline-link{background:none; border:none; color:var(--green); font-weight:600; cursor:pointer; padding:0; font-size:inherit}
.center-sub{text-align:center; color:var(--muted); margin-top:22px}

/* fields */
.field{margin-bottom:14px}
.field label{display:block; font-size:13px; font-weight:600; margin-bottom:7px}
.input{width:100%; height:52px; border:1px solid var(--line); border-radius:14px; padding:0 15px; font-size:16px; background:#fff; color:var(--ink)}
.input::placeholder{color:#9aa79f}
.input:focus{outline:none; border-color:var(--green); box-shadow:0 0 0 3px var(--green-ll)}
.input-wrap{position:relative}
.input-wrap .eye{position:absolute; right:6px; top:6px; width:40px; height:40px; border:none; background:none; color:var(--muted); display:grid; place-items:center; cursor:pointer}

/* splash */
.auth-bg{background:var(--green)}
.splash{display:flex; flex-direction:column; justify-content:space-between; color:#fff; padding-top:18%}
.splash-top{text-align:center}
.brandmark{width:84px; height:84px; border-radius:26px; background:rgba(255,255,255,.16); display:grid; place-items:center; margin:0 auto 18px}
.brandmark .ic{width:46px; height:46px; stroke:#fff; stroke-width:1.6}
.brand{font-size:38px; font-weight:700; margin:0 0 12px; letter-spacing:-.5px}
.tagline{font-size:16px; line-height:1.6; opacity:.92; margin:0}
.splash-actions .btn-primary{background:#fff; color:var(--green-d)}
.splash-actions .btn-line{background:transparent; color:#fff; border-color:rgba(255,255,255,.4)}
.fineprint{font-size:12px; opacity:.8; text-align:center; margin-top:14px; line-height:1.5}

/* home */
.home-bar{justify-content:space-between; padding-top:18px}
.hi{display:flex; align-items:center; gap:12px}
.hi .name{font-size:18px; font-weight:700}
.avatar{width:46px; height:46px; border-radius:14px; background:var(--green-l); color:var(--green-d); display:grid; place-items:center; font-weight:700; font-size:15px; flex-shrink:0}
.avatar.lg{width:62px; height:62px; border-radius:18px; font-size:20px}

.hero{background:var(--green); color:#fff; border-radius:24px; padding:20px; margin:6px 0 4px}
.hero-rate{display:flex; justify-content:space-between; align-items:center; font-size:13px; opacity:.9; margin-bottom:18px}
.hero-rate strong{font-weight:700}
.hero-title{font-size:23px; font-weight:700; margin-bottom:6px}
.hero-sub{font-size:14px; opacity:.92; line-height:1.5; margin-bottom:18px}
.hero .btn-white{height:50px}

.section-head{display:flex; align-items:center; justify-content:space-between; margin:22px 0 12px}
.section-head h2{margin:0}

.quick{display:flex; gap:14px; overflow-x:auto; padding-bottom:4px}
.qitem{display:flex; flex-direction:column; align-items:center; gap:7px; background:none; border:none; cursor:pointer; width:64px}
.qitem .avatar{width:54px; height:54px; border-radius:18px}
.qitem .qname{font-size:12px; color:var(--ink); font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:64px}
.qitem.add .avatar{background:#fff; border:1.5px dashed var(--line); color:var(--green)}

/* lists */
.list{background:#fff; border:1px solid var(--line); border-radius:18px; overflow:hidden}
.row{display:flex; align-items:center; gap:13px; padding:15px 16px; border:none; border-bottom:1px solid var(--line); background:#fff; width:100%; text-align:left; cursor:pointer; color:var(--ink); font-size:16px}
.row:last-child{border-bottom:none}
.row:active:not(.static){background:var(--green-ll)}
.row.static{cursor:default}
.row .grow{flex:1; min-width:0; display:flex; flex-direction:column}
.row .title{font-weight:600; font-size:15px}
.row .sub{color:var(--muted); font-size:13px; margin-top:2px}
.row .amt{font-weight:700; white-space:nowrap}
.row .amt small{display:block; font-weight:500; color:var(--muted); font-size:12px; text-align:right; margin-top:2px}
.rowic{width:42px; height:42px; border-radius:12px; background:var(--green-l); color:var(--green-d); display:grid; place-items:center; flex-shrink:0}
.rowic .ic{width:22px; height:22px}
.rowic.green{background:#E2F6EA; color:var(--green)}

.badge{font-size:12px; font-weight:600; padding:4px 10px; border-radius:999px; white-space:nowrap}
.badge.ok{background:var(--green-l); color:var(--green-d)}
.badge.pend{background:#FBF1DC; color:#946608}
.badge.fail{background:#FBE3E3; color:#B23636}

.switch{width:42px; height:25px; border-radius:999px; background:#D8DDD6; position:relative; flex-shrink:0; transition:.15s}
.switch::after{content:""; position:absolute; top:3px; left:3px; width:19px; height:19px; border-radius:50%; background:#fff; transition:.15s}
.switch.on{background:var(--green)}
.switch.on::after{left:20px}

/* chips */
.chips{display:flex; gap:9px; overflow-x:auto; padding-bottom:4px; margin-bottom:14px}
.chip{padding:9px 16px; border-radius:999px; border:1px solid var(--line); background:#fff; font-size:14px; font-weight:500; color:var(--muted); white-space:nowrap; cursor:pointer}
.chip.active{background:var(--ink); color:#fff; border-color:var(--ink)}

/* info card */
.info-card{display:flex; align-items:center; gap:13px; background:#fff; border:1px solid var(--line); border-radius:18px; padding:15px; cursor:pointer}
.ic-circle{width:42px; height:42px; border-radius:12px; background:var(--coral-l); color:var(--coral); display:grid; place-items:center; flex-shrink:0}
.ic-circle.lg{width:78px; height:78px; border-radius:24px}
.ic-circle.lg .ic{width:38px; height:38px}
.info-card .title{font-weight:600; font-size:15px}
.info-card .sub{color:var(--muted); font-size:13px; margin-top:2px}

.note{display:flex; gap:10px; background:var(--green-ll); border:1px solid var(--line); border-radius:14px; padding:13px; font-size:13px; color:var(--green-d); line-height:1.5}
.note .ic{width:20px; height:20px; flex-shrink:0; stroke:var(--green)}

/* invite */
.illus{display:flex; justify-content:center; margin:10px 0 16px}
.illus .ic-circle{background:var(--green-l); color:var(--green-d)}
.invite-box{display:flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--line); border-radius:14px; padding:6px 6px 6px 16px; margin-top:8px; font-weight:600; font-size:15px}
.invite-box span{flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.divider{display:flex; align-items:center; gap:12px; color:var(--muted); font-size:13px; margin:22px 0 16px}
.divider::before,.divider::after{content:""; flex:1; height:1px; background:var(--line)}

/* amount */
.amount-body{display:flex; flex-direction:column; align-items:center; justify-content:flex-start; padding-top:26px}
.amt-display{display:flex; align-items:flex-start; font-size:58px; font-weight:700; letter-spacing:-1px; line-height:1}
.amt-display .cur{font-size:30px; margin-top:6px; margin-right:2px; color:var(--muted)}
.amt-receive,.amt-rate{color:var(--green-d); font-weight:600; margin-top:14px; background:var(--green-l); padding:7px 14px; border-radius:999px; font-size:14px}
.breakdown{width:100%; background:#fff; border:1px solid var(--line); border-radius:16px; padding:6px 16px; margin-top:24px}
.brow{display:flex; justify-content:space-between; padding:11px 0; font-size:14px; color:var(--muted); border-bottom:1px solid var(--line)}
.brow:last-child{border-bottom:none}
.brow span:last-child{color:var(--ink); font-weight:600}
.brow.total span{color:var(--ink); font-weight:700; font-size:15px}
.brow .hl{color:var(--green-d)}

/* keypad */
.keypad{flex-shrink:0; display:grid; grid-template-columns:repeat(3,1fr); gap:2px; padding:6px 14px}
.key{height:54px; border:none; background:none; font-size:24px; font-weight:600; color:var(--ink); cursor:pointer; border-radius:12px}
.key:active{background:var(--green-l)}
.key.bksp .ic{width:26px; height:26px; stroke-width:2}

/* review / success / detail */
.rev-card{background:#fff; border:1px solid var(--line); border-radius:18px; padding:16px; margin-bottom:14px}
.rev-to{display:flex; align-items:center; gap:13px; margin-bottom:6px}
.rev-to .grow{display:flex; flex-direction:column}
.rev-to .title{font-weight:700; font-size:16px}
.rev-to .sub{color:var(--muted); font-size:13px}

.success{display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center}
.success .check{width:92px; height:92px; border-radius:50%; background:var(--green-l); color:var(--green); display:grid; place-items:center; margin-bottom:22px}
.success .check .ic{width:52px; height:52px; stroke-width:2.4}
.success h1{font-size:24px; font-weight:700; margin:0 0 8px}
.success p{color:var(--muted); margin:0 0 6px; line-height:1.5}
.success .big{font-size:30px; font-weight:700; color:var(--ink); margin:8px 0}

.dash-bar{background:var(--green); color:#fff}
.dash-bar .iconbtn{color:#fff}
.dash-hero{background:var(--green); color:#fff; border-radius:0 0 26px 26px; margin:-8px -18px 18px; padding:8px 22px 26px; text-align:center}
.dash-hero .lbl{font-size:14px; opacity:.9}
.dash-hero .bal{font-size:40px; font-weight:700; margin:6px 0 2px}
.dash-hero .who{font-size:14px; opacity:.9}

.example{background:#fff; border:1px solid var(--line); border-radius:16px; padding:8px 16px 14px}
.example .title{font-weight:700; padding:10px 0 4px}

/* search / faq */
.search-wrap{position:relative; display:flex; align-items:center}
.search-wrap .ic{position:absolute; left:14px}
.input.search{padding-left:44px}
.faq{background:#fff; border:1px solid var(--line); border-radius:18px; overflow:hidden}
.faq .q{padding:15px 16px; border-bottom:1px solid var(--line); cursor:pointer}
.faq .q:last-child{border-bottom:none}
.faq .q .qhead{display:flex; align-items:center; gap:10px; font-weight:600; font-size:15px}
.faq .q .qhead .ic{margin-left:auto; width:20px; color:var(--muted); transition:.2s}
.faq .q.open .qhead .ic{transform:rotate(90deg)}
.faq .q .qa{color:var(--muted); font-size:14px; line-height:1.6; max-height:0; overflow:hidden; transition:.2s; }
.faq .q.open .qa{max-height:220px; margin-top:9px}

.profile-card{display:flex; align-items:center; gap:14px; background:#fff; border:1px solid var(--line); border-radius:20px; padding:16px; cursor:pointer}
.profile-card .title{font-weight:700; font-size:17px}
.profile-card .sub{color:var(--muted); font-size:14px; margin-top:2px}
.ver{text-align:center; color:var(--muted); font-size:12px; margin-top:20px}

/* tab bar */
.tabbar{flex-shrink:0; display:flex; align-items:flex-end; justify-content:space-between; padding:7px 8px calc(7px + env(safe-area-inset-bottom)); background:#fff; border-top:1px solid var(--line)}
.tabbar.hidden{display:none}
.tab{flex:1; background:none; border:none; display:flex; flex-direction:column; align-items:center; gap:4px; color:#9aa79f; font-size:11px; font-weight:600; cursor:pointer; padding:6px 0}
.tab .ic{width:25px; height:25px; stroke-width:1.9}
.tab.active{color:var(--green)}
.tab-send{color:var(--green)}
.tab-send .fab{width:52px; height:52px; border-radius:18px; background:var(--green); display:grid; place-items:center; box-shadow:0 8px 16px rgba(19,138,94,.35); margin-bottom:1px}
.tab-send .fab .ic{width:26px; height:26px; stroke:#fff; stroke-width:2}

/* toast */
.toast{position:fixed; left:50%; bottom:96px; transform:translate(-50%,20px); background:var(--ink); color:#fff; padding:13px 18px; border-radius:14px; font-size:14px; font-weight:500; max-width:330px; width:max-content; text-align:center; opacity:0; pointer-events:none; transition:.25s; z-index:50}
.toast.show{opacity:1; transform:translate(-50%,0)}