@import url('https://fonts.googleapis.com/css2?family=Sora:wght@600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --bg:#F7F8FA;
  --surface:#FFFFFF;
  --border:#E7EAED;
  --primary:#146356;
  --primary-dark:#0E4A40;
  --primary-light:#1C8672;
  --accent:#E8A33D;
  --accent-dark:#C9862A;
  --text:#14181C;
  --muted:#6B7280;
  --success:#1F9D55;
  --danger:#D9455F;
  --pending:#B8860B;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{margin:0; padding:0;}
body{
  background:var(--bg); color:var(--text);
  font-family:'Inter',sans-serif;
  font-size:15px;
  padding-bottom:78px;
}
h1,h2,h3{font-family:'Sora',sans-serif; margin:0;}
button{font-family:'Inter',sans-serif; cursor:pointer;}
input,select{font-family:'Inter',sans-serif;}

.hidden{display:none !important;}

/* ---------- Top bar ---------- */
.topbar{
  padding:16px 18px 8px;
}
.profile{display:flex; align-items:center; gap:12px;}
.avatar{width:44px; height:44px; border-radius:50%; object-fit:cover; background:var(--border); border:2px solid var(--surface); box-shadow:0 0 0 1px var(--border);}
.p-name{font-weight:700; font-size:15.5px;}
.p-username{color:var(--muted); font-size:13px; margin-top:1px;}

/* ---------- Screens ---------- */
.screen{padding:8px 18px 20px;}

/* ---------- Wallet hero card ---------- */
.wallet-card{
  background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  border-radius:20px;
  padding:22px 22px 20px;
  color:#fff;
  margin:10px 0 22px;
  position:relative;
  overflow:hidden;
}
.wallet-card::after{
  content:"";
  position:absolute; right:-40px; top:-40px;
  width:140px; height:140px; border-radius:50%;
  background:radial-gradient(circle, rgba(232,163,61,.28), transparent 70%);
}
.wallet-card.small{padding:18px 20px; margin-bottom:16px;}
.wallet-top{display:flex; align-items:center; justify-content:space-between;}
.wallet-label{font-size:13px; color:#BFE0D8; font-weight:500;}
.wallet-balance{
  font-family:'Sora',sans-serif; font-weight:800;
  font-size:34px; margin:10px 0 18px; letter-spacing:-0.5px;
  position:relative;
}
.wallet-card.small .wallet-balance{margin-bottom:0; font-size:28px;}
#currencySym, #wdCurrencySym{color:var(--accent); margin-right:4px; font-size:24px;}
.btn-withdraw{
  background:var(--accent); color:#fff; border:none; padding:11px 22px;
  border-radius:11px; font-weight:700; font-size:14px; position:relative;
}
.btn-withdraw:active{background:var(--accent-dark);}

/* ---------- Section headers ---------- */
.section-head{margin-bottom:12px;}
.section-head h2{font-size:16.5px; font-weight:700;}
.section-head p{color:var(--muted); font-size:12.5px; margin:3px 0 0;}

/* ---------- Tasks ---------- */
.tasks-list{background:var(--surface); border:1px solid var(--border); border-radius:16px; overflow:hidden;}
.task-row{
  display:flex; align-items:center; gap:12px;
  padding:14px 16px; border-bottom:1px solid var(--border);
}
.task-row:last-child{border-bottom:none;}
.task-icon{
  width:40px; height:40px; border-radius:11px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:#EAF3F1; font-size:18px; color:var(--primary);
}
.task-body{flex:1; min-width:0;}
.task-title{font-weight:600; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.task-reward{color:var(--accent-dark); font-weight:700; font-size:12.5px; margin-top:2px;}
.task-action{flex-shrink:0;}
.task-btn{
  border:none; border-radius:9px; padding:8px 14px; font-weight:700; font-size:12.5px;
  background:var(--primary); color:#fff;
}
.task-btn.verify{background:var(--accent);}
.task-btn.done{background:#E4F7EA; color:var(--success);}
.task-btn:disabled{opacity:.7;}

/* ---------- Refer ---------- */
.refer-hero{padding:8px 2px 18px;}
.refer-hero h2{font-size:19px; margin-bottom:6px;}
.refer-hero p{color:var(--muted); font-size:13.5px; line-height:1.5; margin:0;}

.refer-link-box{background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:16px; margin-bottom:16px;}
.refer-link-box label{font-size:12.5px; font-weight:600; color:var(--muted); display:block; margin-bottom:8px;}
.copy-row{display:flex; gap:8px;}
.copy-row input{
  flex:1; padding:11px 12px; border:1px solid var(--border); border-radius:9px;
  font-size:13px; background:#F5F6F8; color:var(--text);
}
.btn-copy{background:var(--primary); color:#fff; border:none; border-radius:9px; padding:0 18px; font-weight:700; font-size:13px;}

.refer-stats{display:flex; gap:12px; margin-bottom:22px;}
.stat{flex:1; background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:16px; text-align:center;}
.stat-value{font-family:'Sora',sans-serif; font-weight:700; font-size:20px; color:var(--primary-dark);}
.stat-label{font-size:12px; color:var(--muted); margin-top:4px;}

.leaderboard-list{list-style:none; margin:0; padding:0; background:var(--surface); border:1px solid var(--border); border-radius:16px; overflow:hidden;}
.lb-row{display:flex; align-items:center; gap:12px; padding:12px 16px; border-bottom:1px solid var(--border);}
.lb-row:last-child{border-bottom:none;}
.lb-row.you{background:#FBF3E4;}
.lb-rank{
  width:26px; height:26px; border-radius:50%; background:#EAF3F1; color:var(--primary-dark);
  font-weight:700; font-size:12px; display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.lb-rank.top1{background:var(--accent); color:#fff;}
.lb-rank.top2{background:#C7CDD3; color:#fff;}
.lb-rank.top3{background:#D8A56E; color:#fff;}
.lb-name{flex:1; font-weight:600; font-size:13.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.lb-amount{font-weight:700; font-size:13px; color:var(--primary-dark);}

/* ---------- Withdraw ---------- */
.withdraw-form-box{background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:18px; margin-bottom:20px;}
.withdraw-form-box h2{font-size:15.5px; margin-bottom:14px;}
.field{margin-bottom:13px;}
.field label{display:block; font-size:12.5px; font-weight:600; color:var(--muted); margin-bottom:6px;}
.field input, .field select{
  width:100%; padding:11px 12px; border:1px solid var(--border); border-radius:9px;
  font-size:14px; background:#fff; color:var(--text);
}
.btn-primary-full{
  width:100%; background:var(--primary); color:#fff; border:none; border-radius:11px;
  padding:13px; font-weight:700; font-size:14.5px; margin-top:4px;
}
.btn-primary-full:active{background:var(--primary-dark);}
.btn-primary-full:disabled{opacity:.6;}

.history-list{background:var(--surface); border:1px solid var(--border); border-radius:16px; overflow:hidden;}
.history-row{padding:13px 16px; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; gap:10px;}
.history-row:last-child{border-bottom:none;}
.history-main{min-width:0;}
.history-method{font-weight:600; font-size:13.5px;}
.history-date{font-size:11.5px; color:var(--muted); margin-top:2px;}
.history-right{text-align:right; flex-shrink:0;}
.history-amount{font-weight:700; font-size:13.5px;}
.badge{display:inline-block; padding:3px 9px; border-radius:20px; font-size:11px; font-weight:700; margin-top:3px;}
.badge.pending{background:#FDF3DC; color:var(--pending);}
.badge.approved{background:#E4F7EA; color:var(--success);}
.badge.rejected{background:#FCE8EB; color:var(--danger);}

/* ---------- Empty / loading ---------- */
.empty-state{padding:26px 16px; text-align:center; color:var(--muted); font-size:13px;}

/* ---------- Bottom nav ---------- */
.bottom-nav{
  position:fixed; left:0; right:0; bottom:0;
  background:var(--surface); border-top:1px solid var(--border);
  display:flex; padding:8px 10px calc(8px + env(safe-area-inset-bottom));
  z-index:50;
}
.nav-item{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
  background:none; border:none; color:var(--muted); font-size:11px; font-weight:600; padding:5px 0;
  border-radius:10px;
}
.nav-item.active{color:var(--primary-dark);}
.nav-ic{font-size:19px;}

/* ---------- Toast ---------- */
.toast{
  position:fixed; left:50%; bottom:92px; transform:translateX(-50%) translateY(10px);
  background:var(--text); color:#fff; padding:11px 18px; border-radius:10px;
  font-size:13px; font-weight:500; opacity:0; transition:opacity .25s, transform .25s;
  z-index:100; max-width:86%; text-align:center;
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0);}