@import url('https://fonts.googleapis.com/css2?family=Hind+Siliguri:wght@400;500;600;700&family=Fraunces:opsz,wght@9..144,400;9..144,600&family=IBM+Plex+Mono:wght@500&display=swap');

:root{
  --bg: #0A1512;
  --surface: #10201C;
  --surface-2: #16302A;
  --border: #1F3B33;
  --gold: #E7B65C;
  --gold-dim: #B98F42;
  --mint: #4FD8A4;
  --danger: #F2685C;
  --text: #EFF6F2;
  --text-muted: #82A69B;
  --radius-lg: 20px;
  --radius-md: 14px;
}

*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html,body{margin:0; padding:0}
body{
  background:var(--bg); color:var(--text);
  font-family:'Hind Siliguri', sans-serif;
  min-height:100vh; padding-bottom:84px;
}
.mono{font-family:'IBM Plex Mono', monospace}

/* ---------- Loading ---------- */
#loading{
  position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
  background:var(--bg); z-index:100; flex-direction:column; gap:12px;
}
.spinner{width:34px; height:34px; border:3px solid var(--surface-2); border-top-color:var(--gold); border-radius:50%; animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- Force join screen ---------- */
.gate{padding:24px 20px; display:flex; flex-direction:column; min-height:100vh; justify-content:center; gap:16px}
.gate h2{font-family:'Fraunces', serif; font-size:22px; text-align:center; margin:0 0 4px}
.gate p{color:var(--text-muted); text-align:center; font-size:14px; margin:0 0 12px}
.channel-btn{
  display:flex; align-items:center; justify-content:space-between; padding:14px 16px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md);
  color:var(--text); text-decoration:none; font-size:15px; font-weight:600;
}
.channel-btn:active{background:var(--surface-2)}

/* ---------- Header ---------- */
.topnav{padding:18px 20px 8px; display:flex; align-items:center; justify-content:space-between}
.topnav .greet{font-size:14px; color:var(--text-muted)}
.topnav .greet b{color:var(--text)}

/* ---------- Balance card (signature element) ---------- */
.wallet-card{
  margin:8px 20px 20px;
  position:relative;
  border-radius:var(--radius-lg);
  padding:2px;
  background:conic-gradient(from var(--angle,0deg), var(--gold), transparent 25%, transparent 75%, var(--gold));
  animation:chase 4s linear infinite;
}
@property --angle{ syntax:'<angle>'; inherits:false; initial-value:0deg; }
@keyframes chase{ to{ --angle:360deg; } }

.wallet-card-inner{
  background:radial-gradient(120% 140% at 0% 0%, #14261F 0%, #0E1D18 60%, #0B1712 100%);
  border-radius:calc(var(--radius-lg) - 2px);
  padding:22px 22px 20px;
}
.wallet-label{font-size:12px; color:var(--text-muted); letter-spacing:.06em; text-transform:uppercase; margin-bottom:6px}
.wallet-balance{
  font-family:'Fraunces', serif; font-weight:600; font-size:40px; line-height:1;
  color:var(--gold); display:flex; align-items:baseline; gap:8px;
}
.wallet-balance .unit{font-size:15px; color:var(--text-muted); font-family:'Hind Siliguri', sans-serif; font-weight:500}
.wallet-sub{margin-top:10px; font-size:13px; color:var(--text-muted)}
.wallet-sub b{color:var(--mint)}

/* ---------- Quick actions ---------- */
.quick-actions{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; padding:0 20px 20px}
.qa-btn{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md);
  padding:14px 6px; display:flex; flex-direction:column; align-items:center; gap:6px;
  font-size:12px; color:var(--text); cursor:pointer;
}
.qa-btn .icon{font-size:20px}
.qa-btn:active{background:var(--surface-2)}
.qa-btn.done{border-color:var(--border); opacity:.6}
.qa-btn.done .icon{filter:grayscale(.4)}

/* ---------- Sections ---------- */
.section{padding:4px 20px 24px}
.section-title{font-size:15px; font-weight:700; margin:0 0 12px; display:flex; align-items:center; gap:8px}

.task-item, .history-item{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md);
  padding:14px 16px; margin-bottom:10px; display:flex; justify-content:space-between; align-items:center; gap:10px;
}
.task-item .t-title{font-size:14px; font-weight:600}
.task-item .t-reward{font-size:12px; color:var(--gold); margin-top:2px}
.btn{
  border:none; border-radius:10px; padding:9px 16px; font-size:13px; font-weight:700; cursor:pointer;
  font-family:'Hind Siliguri', sans-serif;
}
.btn-gold{background:var(--gold); color:#14201A}
.btn-outline{background:transparent; border:1px solid var(--border); color:var(--text)}
.btn-block{width:100%; padding:13px; font-size:15px}
.btn:disabled{opacity:.5}

.empty{color:var(--text-muted); text-align:center; padding:24px 0; font-size:13px}

/* ---------- Referral ---------- */
.ref-box{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:16px}
.ref-link{
  background:var(--surface-2); border-radius:10px; padding:12px; font-size:12px; word-break:break-all;
  margin:10px 0; color:var(--mint);
}

/* ---------- Withdraw ---------- */
.form-group{margin-bottom:14px}
.form-group label{display:block; font-size:13px; color:var(--text-muted); margin-bottom:6px}
.form-group select, .form-group input{
  width:100%; padding:12px 14px; border-radius:10px; border:1px solid var(--border);
  background:var(--surface-2); color:var(--text); font-size:15px; font-family:inherit;
}
.method-row{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:14px}
.method-chip{
  padding:12px 4px; text-align:center; border-radius:10px; border:1px solid var(--border);
  background:var(--surface); font-size:13px; font-weight:600; cursor:pointer;
}
.method-chip.active{border-color:var(--gold); color:var(--gold); background:#E7B65C14}

.status-pill{font-size:11px; padding:3px 9px; border-radius:999px; font-weight:700}
.status-pending{background:#F5A62326; color:#F5A623}
.status-approved, .status-paid{background:#4FD8A426; color:var(--mint)}
.status-rejected{background:#F2685C26; color:var(--danger)}

/* ---------- Bottom tab bar ---------- */
.tabbar{
  position:fixed; bottom:0; left:0; right:0; background:var(--surface);
  border-top:1px solid var(--border); display:flex; padding:8px 6px calc(8px + env(safe-area-inset-bottom));
  z-index:50;
}
.tab-btn{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; padding:6px 0;
  color:var(--text-muted); font-size:11px; background:none; border:none; cursor:pointer;
}
.tab-btn .icon{font-size:19px}
.tab-btn.active{color:var(--gold)}

.toast{
  position:fixed; bottom:96px; left:20px; right:20px; background:var(--surface-2);
  border:1px solid var(--border); border-radius:var(--radius-md); padding:13px 16px;
  font-size:13px; text-align:center; z-index:60; transform:translateY(20px); opacity:0;
  transition:.25s; pointer-events:none;
}
.toast.show{transform:translateY(0); opacity:1}

.view{display:none}
.view.active{display:block}

@media (prefers-reduced-motion: reduce){
  .wallet-card{animation:none}
}

/* ---------- Spin wheel modal ---------- */
.spin-modal{
  position:fixed; inset:0; background:rgba(5,10,8,.88); backdrop-filter:blur(4px);
  z-index:80; display:flex; align-items:center; justify-content:center; padding:20px;
}
.spin-modal-inner{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:22px; width:100%; max-width:340px; text-align:center;
}
.spin-title{font-family:'Fraunces', serif; font-size:19px; margin-bottom:16px}
.wheel-wrap{position:relative; width:240px; height:240px; margin:0 auto 20px}
.wheel{
  width:100%; height:100%; border-radius:50%; position:relative;
  border:4px solid var(--gold); box-shadow:0 0 24px #E7B65C33;
  transition:transform 4.2s cubic-bezier(.17,.67,.16,1);
}
.wheel-label{
  position:absolute; top:50%; left:50%; font-size:11px; font-weight:700; color:#0E1A15;
  transform-origin:0 0; white-space:nowrap;
}
.wheel-pointer{
  position:absolute; top:-6px; left:50%; transform:translateX(-50%);
  font-size:22px; color:var(--gold); z-index:5; filter:drop-shadow(0 2px 3px #000a);
}
.spin-result{min-height:22px; font-size:14px; color:var(--mint); margin-bottom:14px; font-weight:600}

/* ---------- Task proof upload ---------- */
.proof-task{display:flex; flex-direction:column; align-items:stretch}
.proof-file-input{
  margin-top:10px; font-size:12px; color:var(--text-muted); width:100%;
}
.proof-preview{display:flex; gap:6px; margin-top:8px; flex-wrap:wrap}
.proof-preview img{width:56px; height:56px; object-fit:cover; border-radius:8px; border:1px solid var(--border)}

/* ---------- Withdraw window notice ---------- */
.wd-notice{
  padding:12px 14px; border-radius:var(--radius-md); font-size:13px; margin-bottom:16px;
}
.wd-notice.closed{background:#F2685C1a; border:1px solid #F2685C44; color:#FF9F94}
.wd-notice.open{background:#4FD8A41a; border:1px solid #4FD8A444; color:var(--mint)}

/* ---------- Premium polish ---------- */
.task-item, .history-item, .ref-box, .channel-btn{
  box-shadow:0 2px 10px rgba(0,0,0,.18);
}
.wallet-card{box-shadow:0 8px 30px rgba(231,182,92,.10)}
.btn:active, .qa-btn:active, .method-chip:active, .channel-btn:active{
  transform:scale(.97); transition:transform .1s;
}
.tab-btn.active{
  position:relative;
}
.tab-btn.active::before{
  content:''; position:absolute; top:-8px; left:50%; transform:translateX(-50%);
  width:22px; height:3px; background:var(--gold); border-radius:2px;
}
.task-item, .history-item{transition:.15s}
.task-item:hover, .history-item:hover{border-color:#2a4a40}