/* ═══════════════════════════════════════════════════════════
   ArbiFlow — balance.css  (PATCH v2)
   Drop into /css/balance.css
═══════════════════════════════════════════════════════════ */

/* ─── WALLET HERO ────────────────────────────────────────── */
.wal-hero{
  background:var(--blue-d);
  padding:28px 22px 22px;position:relative;overflow:hidden;
  margin-bottom:2px;
}
.wal-hero::after{
  content:'';position:absolute;right:-50px;top:-50px;
  width:200px;height:200px;border-radius:50%;
  background:rgba(255,255,255,.04);pointer-events:none;
}
.wh-lbl{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:1.2px;color:rgba(255,255,255,.4);margin-bottom:8px}
.wh-amt{
  font-family:var(--mono);font-size:clamp(30px,9vw,42px);font-weight:700;
  color:#fff;letter-spacing:-1.5px;line-height:1;margin-bottom:4px;
  position:relative;z-index:1;transition:color .35s ease;
}
.wh-cur{font-size:17px;opacity:.4}
.wh-sub{font-size:12px;color:rgba(255,255,255,.4);margin-bottom:22px}
.wh-actions{display:flex;gap:10px;position:relative;z-index:1;flex-wrap:wrap}
.wh-btn{
  display:flex;align-items:center;gap:8px;
  padding:11px 20px;background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.14);color:#fff;
  font-size:13px;font-weight:700;cursor:pointer;
  transition:all var(--ease);letter-spacing:.2px;flex:1;
  justify-content:center;min-width:100px;
}
.wh-btn:hover{background:rgba(255,255,255,.18);transform:translateY(-1px)}
.wh-btn svg{width:14px;height:14px;flex-shrink:0}

/* ─── BALANCE STATS ──────────────────────────────────────── */
.bal-stats{
  display:grid;grid-template-columns:1fr 1fr;
  gap:2px;background:var(--border);margin-bottom:12px;
}
.bs-item{background:var(--bg-card);padding:16px}
.bs-lbl{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:var(--tm);margin-bottom:4px}
.bs-val{font-family:var(--mono);font-size:clamp(15px,4vw,19px);font-weight:700}

/* ─── TRANSACTION ROW ────────────────────────────────────── */
.tx-row{
  display:flex;align-items:center;gap:12px;
  padding:13px 18px;border-bottom:1px solid var(--border);
  transition:background var(--ease);animation:fadeUp .3s ease both;
}
.tx-row:last-child{border-bottom:none}
.tx-row:hover{background:var(--bg-alt)}
.tx-icon{width:38px;height:38px;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.tx-icon.deposit   {background:var(--green-soft)}
.tx-icon.withdrawal{background:var(--red-soft)}
.tx-icon.profit    {background:var(--blue-soft)}
.tx-icon.lock      {background:var(--amber-soft)}
.tx-icon.unlock    {background:var(--green-soft)}
.tx-info{flex:1;min-width:0}
.tx-lbl{font-size:13px;font-weight:600}
.tx-date{font-size:11px;color:var(--tm);margin-top:1px}
.tx-amt{font-family:var(--mono);font-size:14px;font-weight:700;text-align:right;white-space:nowrap}
.tx-amt.pos{color:var(--green)}
.tx-amt.neg{color:var(--red)}
.tx-status{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;text-align:right;margin-top:2px}

/* ─── DEPOSIT / WITHDRAW MODALS ──────────────────────────── */
.pay-opts{display:flex;flex-direction:column;gap:8px;margin-bottom:18px}
.pay-opt{
  display:flex;align-items:center;gap:14px;
  padding:13px;border:1.5px solid var(--border);
  cursor:pointer;transition:all var(--ease);background:var(--bg-alt);
}
.pay-opt.sel{border-color:var(--blue);background:var(--blue-soft)}
.pay-opt:hover:not(.sel){border-color:var(--border-s);background:var(--bg-card)}
.pay-opt-icon{width:36px;height:36px;background:var(--bg-card);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.pay-opt-info{flex:1}
.pay-opt-name{font-size:14px;font-weight:700}
.pay-opt-sub{font-size:11px;color:var(--tm);margin-top:1px}
.pay-radio{width:18px;height:18px;border-radius:50%;border:2px solid var(--border-s);display:flex;align-items:center;justify-content:center;transition:all var(--ease);flex-shrink:0}
.pay-opt.sel .pay-radio{border-color:var(--blue);background:var(--blue)}
.pay-opt.sel .pay-radio::after{content:'';width:6px;height:6px;border-radius:50%;background:#fff}

/* Network pills */
.net-pills{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.net-pill{
  padding:6px 14px;background:var(--bg-alt);border:1.5px solid var(--border);
  font-size:12px;font-weight:700;cursor:pointer;transition:all var(--ease);
  letter-spacing:.3px;text-transform:uppercase;
}
.net-pill.active{border-color:var(--blue);background:var(--blue);color:#fff}

/* Address box */
.addr-box{
  display:flex;align-items:center;gap:10px;
  padding:11px 13px;background:var(--bg-alt);
  border:1px solid var(--border);margin-bottom:14px;
}
.addr-txt{
  flex:1;font-family:var(--mono);font-size:11px;
  color:var(--ts);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.addr-copy{
  padding:6px 12px;background:var(--blue);color:#fff;
  font-size:11px;font-weight:800;cursor:pointer;
  transition:all var(--ease);flex-shrink:0;letter-spacing:.3px;
}
.addr-copy:hover{background:var(--blue-d)}

/* QR area */
.qr-area{display:flex;justify-content:center;margin-bottom:14px}
.qr-box{
  width:140px;height:140px;background:var(--bg-alt);
  border:1px dashed var(--border-s);
  display:flex;align-items:center;justify-content:center;
  color:var(--tm);font-size:12px;text-align:center;
  flex-direction:column;gap:6px;
}

/* Withdraw warning */
.wd-warn{
  display:flex;gap:10px;align-items:flex-start;
  padding:12px;background:var(--amber-soft);
  border:1px solid rgba(245,158,11,.3);margin-bottom:16px;
  font-size:12px;color:#78350F;
}
.wd-warn svg{flex-shrink:0;margin-top:1px}

/* ─── RESPONSIVE ─────────────────────────────────────────── */
@media(min-width:640px){
  .bal-stats{grid-template-columns:repeat(4,1fr)}
}
@media(max-width:480px){
  .tx-row{padding:12px 14px}
}