:root{
  --y:#FFC900; --y-d:#F5A623; --y-l:#FFF7DE; --cream:#FDF6E3;
  --brown:#5a3d2b; --brown-btn:#4a3226; --ink:#2b2b2b; --muted:#8a8a8a;
  --orange:#ff7a00; --red:#ff4d4f; --green:#2ec71f; --blue:#3d9bff;
  --line:#ececec; --radius:16px; --shadow:0 6px 20px rgba(0,0,0,.08);
  --maxw:480px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  font-family:"Georgia","Times New Roman",-apple-system,"PingFang SC",serif;
  background:var(--y); color:var(--ink);
  font-size:15px; line-height:1.5;
}
#app{max-width:var(--maxw);margin:0 auto;min-height:100vh;position:relative;background:var(--y);
  padding-bottom:calc(70px + env(safe-area-inset-bottom));}
a{color:var(--y-d);text-decoration:none}
img{display:block;max-width:100%}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select,textarea{font-family:inherit;font-size:15px}
.hide{display:none !important}

/* ---------- generic ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  background:var(--brown-btn);color:#fff;border-radius:999px;padding:12px 22px;font-size:15px;font-weight:600;transition:.15s;}
.btn:active{transform:scale(.97)}
.btn.block{display:flex;width:100%}
.btn.lg{padding:15px;font-size:16px}
.btn.ghost{background:#fff;color:var(--brown);border:1px solid var(--brown)}
.btn.orange{background:linear-gradient(90deg,var(--y-d),var(--orange));color:#fff}
.btn.grad{background:linear-gradient(90deg,#ffd23f,var(--y-d))}
.btn.disabled,.btn:disabled{background:#c9c1b4;color:#fff;pointer-events:none}
.card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:18px;margin:14px}
.row{display:flex;align-items:center}
.between{justify-content:space-between}
.center{justify-content:center}
.col{display:flex;flex-direction:column}
.gap8{gap:8px}.gap12{gap:12px}
.muted{color:var(--muted);font-size:13px}
.small{font-size:12px}
.big{font-size:30px;font-weight:800;color:var(--brown)}
.dashed{border:none;border-top:1px dashed var(--line);margin:14px 0}
.tag{display:inline-block;padding:2px 9px;border-radius:6px;font-size:11px;font-weight:700}
.tag.green{background:#e3f9e0;color:#28a745}.tag.yellow{background:#fff3d6;color:#c78400}
.tag.red{background:var(--red);color:#fff}.tag.gray{background:#eee;color:#999}
.badge-red{position:absolute;top:0;right:0;background:var(--red);color:#fff;font-size:11px;padding:3px 10px;border-radius:0 var(--radius) 0 12px;font-weight:600}

/* ---------- top bar ---------- */
.appbar{height:52px;display:flex;align-items:center;justify-content:center;position:relative;color:var(--brown);font-weight:700;font-size:18px}
.appbar .back{position:absolute;left:14px;font-size:22px;color:var(--brown)}
.appbar .right{position:absolute;right:14px;font-size:14px;color:var(--brown);display:flex;gap:14px;align-items:center}
.page{min-height:60vh}
.page.white{background:#fff;min-height:100vh}

/* ---------- bottom nav ---------- */
.tabbar{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:var(--maxw);
  background:#fff;display:flex;justify-content:space-around;padding:8px 0 calc(6px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line);z-index:50}
.tabbar .tab{display:flex;flex-direction:column;align-items:center;gap:3px;color:#b9b9b9;font-size:11px;flex:1}
.tabbar .tab.active{color:var(--y-d)}
.tabbar .tab svg{width:24px;height:24px}

/* ---------- home ---------- */
.home-hero{padding:14px 0 4px;text-align:center}
.home-hero img{height:150px;margin:0 auto}
.balance-card .label{color:var(--muted);font-size:14px}
.balance-card .val{font-size:32px;font-weight:800;color:var(--brown);margin-top:4px}
.team-illus{width:100%;border-radius:12px;margin:6px 0}
.claim-block{background:var(--y-l);border-radius:12px;padding:14px;margin-top:10px}

/* inputs */
.field{background:var(--y-l);border-radius:12px;padding:14px 16px;display:flex;align-items:center;gap:10px;margin:12px 0}
.field input{background:none;border:none;outline:none;flex:1;color:var(--ink)}
.field .prefix{color:#777;display:flex;align-items:center;gap:6px}
.cc-select{background:none;border:none;outline:none;font-family:inherit;font-size:15px;color:var(--ink);font-weight:700;border-right:1px solid #e4d9b0;padding-right:8px;margin-right:2px}
.link-y{color:var(--y-d);font-weight:600}

/* levels */
.level-hero{background:linear-gradient(135deg,#c9a67e,#e4cda9);border-radius:16px;padding:18px;color:#fff;margin:14px;position:relative}
.level-track{position:relative;height:2px;background:rgba(255,255,255,.6);margin:60px 12px 40px}
.level-dot{position:absolute;top:50%;transform:translate(-50%,-50%);width:14px;height:14px;border-radius:50%;background:#fff}
.level-dot.on{width:20px;height:20px;background:var(--y);box-shadow:0 0 0 5px rgba(255,201,0,.4)}
.level-dot .cap{position:absolute;top:22px;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:12px;font-weight:700}
.progress{height:8px;background:rgba(255,255,255,.5);border-radius:6px;overflow:hidden;margin-top:8px}
.progress>i{display:block;height:100%;background:#fff}
.lvl-row{display:flex;align-items:center;padding:14px 0;border-bottom:1px dashed var(--line)}
.lvl-badge{padding:8px 12px;border-radius:20px;font-size:12px;font-weight:700;line-height:1.1;min-width:96px;text-align:center}

/* products */
.prod-card{position:relative;background:#fff;border-radius:var(--radius);margin:14px;padding:16px 16px 0;box-shadow:var(--shadow);overflow:hidden}
.prod-top{display:flex;justify-content:space-between;gap:10px}
.prod-name{font-size:16px;font-weight:700;max-width:62%}
.prod-price{color:var(--orange);font-weight:800;font-size:17px;white-space:nowrap}
.prod-mid{display:flex;gap:14px;align-items:flex-start;margin:10px 0}
.prod-mid .cyc{font-size:20px;font-weight:800}
.prod-img{width:74px;height:74px;margin-left:auto}
.prod-actions{display:flex;gap:12px;margin:14px -16px 0;padding:14px 16px;border-top:0}
.prod-actions .btn{flex:1}

/* income bars */
.flow-bar{display:flex;align-items:center;gap:10px;margin:10px 0}
.flow-bar .bar{flex:1;height:30px;border-radius:16px;background:#f0f0f0;position:relative;overflow:hidden;display:flex;align-items:center;padding-left:12px;font-size:12px;color:#fff;font-weight:700}
.flow-bar .lab{width:96px;text-align:right;color:var(--muted);font-size:12px}
.dev-card{background:#fff;border-radius:16px;margin:14px;box-shadow:var(--shadow);overflow:hidden}
.dev-head{display:flex;justify-content:space-between;align-items:center;padding:16px}
.dev-body{background:var(--y-l);padding:6px 16px}
.dev-line{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px dashed #e7ddc4;font-size:13px}
.dev-line:last-child{border-bottom:none}
.dev-note{background:#ffedcf;color:#8a5a00;font-size:12px;padding:10px 14px;border-radius:8px;margin:10px 0 14px}

/* profile */
.profile-head{padding:14px 16px 60px;position:relative}
.avatar{width:64px;height:64px;border-radius:50%;background:#a7b8ff;color:#fff;display:flex;align-items:center;justify-content:center;font-size:26px;font-weight:700}
.vip-card{background:linear-gradient(90deg,#f7e5c6,#efd3a8);border-radius:14px;padding:16px;margin:-46px 16px 0;display:flex;align-items:center;justify-content:space-between}
.pcards{display:flex;gap:12px;margin:14px 16px}
.pcard{flex:1;border-radius:14px;padding:16px;color:#fff;position:relative;overflow:hidden}
.pcard.red{background:linear-gradient(135deg,#ff6a6a,#ff3b3b)}
.pcard.orange{background:linear-gradient(135deg,#ffb03a,#ff8a00)}
.pcard h4{margin:0;font-size:18px}.pcard p{margin:4px 0 10px;font-size:12px;opacity:.9}
.pcard .mini{background:#fff;color:#333;border-radius:999px;padding:6px 12px;font-size:12px;font-weight:700;display:inline-block}
.menu{background:#fff;margin:0 0;padding:0 16px}
.menu-item{display:flex;align-items:center;gap:14px;padding:18px 0;border-bottom:1px solid var(--line);font-size:16px}
.menu-item .ic{width:26px;height:26px;color:var(--y-d)}
.menu-item .arrow{margin-left:auto;color:#ccc}
.menu-item .rt{margin-left:auto;color:var(--orange);font-weight:700}

/* signature */
.sigpad{border:1px dashed #bbb;border-radius:10px;background:#fff;width:100%;height:200px;touch-action:none}
.contract{background:var(--y-l);border-radius:14px;padding:18px;margin:14px}
.contract p{margin:8px 0;font-size:14px}

/* auth */
.auth-wrap{min-height:100vh;display:flex;flex-direction:column}
.auth-hero{text-align:center;padding:30px 0 10px}
.auth-hero img.dev{height:180px;margin:0 auto}
.auth-logo{width:64px;height:64px;margin:14px auto 8px;border-radius:16px}
.list-empty{text-align:center;color:var(--muted);padding:50px 0}
.rec-item{display:flex;justify-content:space-between;padding:14px;border-bottom:1px solid var(--line);background:#fff}
.rec-item .st{font-size:12px;font-weight:700}
.st.pending{color:var(--orange)}.st.done{color:var(--green)}.st.rejected{color:var(--red)}
.qr{width:220px;height:220px;margin:16px auto;background:#fff;padding:10px;border-radius:8px}
.copybox{display:flex;align-items:center;justify-content:space-between;background:#f5f5f5;border-radius:10px;padding:12px 14px;margin:14px;word-break:break-all;gap:10px}

/* toast + modal */
.toast{position:fixed;top:40%;left:50%;transform:translateX(-50%);background:rgba(0,0,0,.8);color:#fff;
  padding:12px 20px;border-radius:10px;font-size:14px;z-index:9999;opacity:0;pointer-events:none;transition:.2s;max-width:80%;text-align:center}
.toast.show{opacity:1}
.modal-mask{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:200;display:flex;align-items:center;justify-content:center;padding:20px}
.modal{background:#fff;border-radius:16px;max-width:420px;width:100%;padding:22px;max-height:86vh;overflow:auto}
.modal h3{margin:0 0 14px;text-align:center}
.spinner{width:34px;height:34px;border:3px solid rgba(0,0,0,.1);border-top-color:var(--y-d);border-radius:50%;animation:spin .8s linear infinite;margin:40px auto}
@keyframes spin{to{transform:rotate(360deg)}}

/* wheel lottery */
.wheel-wrap{position:relative;width:280px;height:280px;margin:20px auto}
.wheel{width:100%;height:100%;border-radius:50%;border:8px solid var(--y-d);transition:transform 4s cubic-bezier(.17,.67,.2,1)}
.wheel-ptr{position:absolute;top:-6px;left:50%;transform:translateX(-50%);width:0;height:0;border-left:14px solid transparent;border-right:14px solid transparent;border-top:26px solid var(--red);z-index:2}

@media(min-width:520px){ body{padding:0} #app{box-shadow:0 0 40px rgba(0,0,0,.15)} }