PROGRESS / CHARTS
══════════════════════════════════════ */
.chart-bar-wrap{margin-bottom:12px}
.chart-bar-label{display:flex;justify-content:space-between;font-size:12px;margin-bottom:5px}
.chart-bar-track{background:var(--surface2);border-radius:20px;height:8px;overflow:hidden}
.chart-bar-fill{height:100%;border-radius:20px;transition:width .8s cubic-bezier(.4,0,.2,1)}

/* mini sparkline */
canvas.sparkline{display:block}

/* ══════════════════════════════════════
   GAMIFICATION
══════════════════════════════════════ */
.xp-bar-track{background:var(--surface2);border-radius:20px;height:10px;overflow:hidden;margin-top:8px}
.xp-bar-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2));border-radius:20px;transition:width 1s cubic-bezier(.4,0,.2,1)}
.badge-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:12px}
.badge-item{
  background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius);
  padding:14px;text-align:center;transition:all var(--transition)
}
.badge-item.earned{border-color:rgba(var(--accent-rgb),.3);background:rgba(var(--accent-rgb),.04)}
.badge-item.earned:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(var(--accent-rgb),.12)}
.badge-icon{font-size:32px;display:block;margin-bottom:6px}
.badge-name{font-size:11px;font-weight:700;letter-spacing:.5px}
.badge-desc{font-size:10px;color:var(--muted2);margin-top:3px}
.badge-item:not(.earned){filter:grayscale(.8);opacity:.4}

/* ══════════════════════════════════════
   PAYMENTS
══════════════════════════════════════ */
.payment-row{
  display:flex;align-items:center;gap:14px;padding:14px 20px;
  border-bottom:1px solid rgba(255,255,255,.03)
}
.payment-row:last-child{border-bottom:none}
.payment-avatar{
  width:38px;height:38px;border-radius:50%;background:var(--accent);color:#000;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;flex-shrink:0
}
.payment-info{flex:1}
.payment-name{font-size:14px;font-weight:600}
.payment-date{font-size:12px;color:var(--muted2);margin-top:2px}
.payment-amount{font-family:'Bebas Neue';font-size:22px;letter-spacing:1px;margin-right:16px}

/* ══════════════════════════════════════