/* ============================================================
   EARNZONE - MAIN CSS
   ============================================================ */
:root {
  --primary: #6c63ff;
  --primary-dark: #5a52e0;
  --secondary: #f8f9ff;
  --accent: #ff6b6b;
  --success: #4caf50;
  --warning: #ff9800;
  --danger: #f44336;
  --text: #2d3748;
  --text-muted: #718096;
  --bg: #f0f2ff;
  --card-bg: rgba(255,255,255,0.9);
  --border: rgba(108,99,255,0.15);
  --shadow: 0 4px 20px rgba(108,99,255,0.12);
  --radius: 16px;
  --radius-sm: 10px;
  --gold: #f6c90e;
  --font: 'Segoe UI', system-ui, -apple-system, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body { font-family: var(--font); background: var(--bg); color: var(--text); min-height: 100vh; -webkit-tap-highlight-color: transparent; }
a { color: var(--primary); text-decoration: none; }
img { max-width: 100%; }

/* GLASS CARD */
.glass-card {
  background: var(--card-bg);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.2rem;
  margin-bottom: 1rem;
}

/* ALERTS */
.alert { padding: .85rem 1.2rem; border-radius: var(--radius-sm); margin-bottom: 1rem; font-weight: 500; }
.alert-success { background: #e8f5e9; color: #2e7d32; border: 1px solid #a5d6a7; }
.alert-error   { background: #ffebee; color: #c62828; border: 1px solid #ef9a9a; }
.alert-info    { background: #e3f2fd; color: #1565c0; border: 1px solid #90caf9; }

/* BUTTONS */
.btn-primary {
  display: inline-block;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff;
  padding: .8rem 1.5rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: all .2s;
  text-align: center;
  font-size: 1rem;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(108,99,255,.35); }
.btn-primary:active { transform: translateY(0); }
.btn-success { background: linear-gradient(135deg, #43a047, #2e7d32); color:#fff; padding:.8rem 1.5rem; border-radius:var(--radius-sm); font-weight:600; border:none; cursor:pointer; display:inline-block; }
.btn-danger  { background: linear-gradient(135deg, #e53935, #b71c1c); color:#fff; padding:.8rem 1.5rem; border-radius:var(--radius-sm); font-weight:600; border:none; cursor:pointer; display:inline-block; }
.btn-secondary { background: #f0f2ff; color: var(--primary); padding:.8rem 1.5rem; border-radius:var(--radius-sm); font-weight:600; border:1px solid var(--border); cursor:pointer; display:inline-block; }
.btn-sm { padding:.5rem 1rem; font-size:.875rem; }
.btn-full { width:100%; display:block; }
.btn-link { color:var(--primary); font-weight:500; display:inline-block; margin:.5rem 0; }
.btn-xs { padding:.3rem .7rem; font-size:.78rem; border-radius:6px; border:none; cursor:pointer; font-weight:600; display:inline-block; }
.btn-xs.btn-success { background:#e8f5e9; color:#2e7d32; }
.btn-xs.btn-danger  { background:#ffebee; color:#c62828; }
.btn-xs.btn-secondary { background:#f0f2ff; color:var(--primary); border:1px solid var(--border); }

/* FORM */
.form-group { margin-bottom:1rem; }
.form-group label { display:block; font-weight:600; font-size:.875rem; color:var(--text-muted); margin-bottom:.4rem; }
.form-input {
  width:100%; padding:.75rem 1rem;
  border:2px solid var(--border);
  border-radius:var(--radius-sm);
  font-size:1rem; font-family:var(--font);
  background:#fff; color:var(--text);
  transition:border-color .2s;
  outline:none;
}
.form-input:focus { border-color:var(--primary); }
.form-note { font-size:.8rem; color:var(--text-muted); margin-top:.5rem; }

/* BADGES */
.badge { display:inline-block; padding:.25rem .6rem; border-radius:20px; font-size:.75rem; font-weight:700; }
.badge-success { background:#e8f5e9; color:#2e7d32; }
.badge-danger  { background:#ffebee; color:#c62828; }
.badge-warning { background:#fff8e1; color:#f57f17; }
.badge-secondary { background:#f0f2ff; color:#5c6bc0; }
.badge-hot { background:linear-gradient(135deg,#ff6b6b,#ff8e53); color:#fff; font-size:.7rem; padding:.15rem .5rem; border-radius:20px; margin-left:.3rem; }
.badge-new { background:var(--primary); color:#fff; font-size:.7rem; padding:.15rem .5rem; border-radius:20px; margin-left:.3rem; }

/* SECTION TITLE */
.section-title { font-size:1rem; font-weight:700; color:var(--text); margin:.8rem 0 .6rem; }
.page-title { font-size:1.25rem; font-weight:800; color:var(--text); margin-bottom:1rem; }
.info-badge { background:linear-gradient(135deg,rgba(108,99,255,.1),rgba(108,99,255,.05)); border:1px solid var(--border); border-radius:20px; padding:.5rem 1rem; font-size:.85rem; color:var(--primary); font-weight:600; display:flex; justify-content:space-between; flex-wrap:wrap; gap:.3rem; margin-bottom:1rem; }

/* EMPTY STATE */
.empty-state { text-align:center; padding:2rem; color:var(--text-muted); font-style:italic; }

/* PROGRESS BAR */
.progress-bar { background:#e0e0e0; border-radius:20px; height:8px; overflow:hidden; margin:.4rem 0; }
.progress-fill { height:100%; background:linear-gradient(90deg,var(--primary),#a78bfa); border-radius:20px; transition:width .4s ease; }

/* REWARD POPUP */
.reward-popup {
  position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:9999;
  display:flex; align-items:center; justify-content:center;
  backdrop-filter:blur(4px);
}
.reward-popup-inner {
  background:#fff; border-radius:var(--radius); padding:2.5rem 2rem;
  text-align:center; max-width:320px; width:90%; box-shadow:0 20px 60px rgba(0,0,0,.3);
  animation:popIn .3s cubic-bezier(.175,.885,.32,1.275);
}
.reward-popup-inner .reward-anim { font-size:3.5rem; margin-bottom:.5rem; animation:bounce 1s infinite; }
.reward-popup-inner h3 { font-size:1.5rem; font-weight:800; color:var(--primary); margin-bottom:.5rem; }
.reward-popup-inner p { color:var(--text-muted); margin-bottom:1.2rem; }
.reward-popup-inner button { padding:.75rem 2rem; background:linear-gradient(135deg,var(--primary),var(--primary-dark)); color:#fff; border:none; border-radius:var(--radius-sm); font-size:1rem; font-weight:700; cursor:pointer; width:100%; }

/* PAGINATION */
.pagination { display:flex; gap:.4rem; flex-wrap:wrap; justify-content:center; padding:1rem 0; }
.page-btn { padding:.4rem .8rem; border-radius:var(--radius-sm); background:#fff; border:1px solid var(--border); color:var(--primary); font-weight:600; font-size:.875rem; }
.page-btn.active { background:var(--primary); color:#fff; }

/* LEADERBOARD */
.leaderboard-list { display:flex; flex-direction:column; gap:.5rem; }
.leader-item { display:flex; align-items:center; gap:.75rem; background:#fff; border-radius:var(--radius-sm); padding:.75rem; border:1px solid var(--border); }
.leader-item.me { border-color:var(--primary); background:rgba(108,99,255,.05); }
.leader-item img { width:36px; height:36px; border-radius:50%; object-fit:cover; }
.leader-rank { font-size:1.2rem; width:28px; text-align:center; }
.leader-name { flex:1; font-weight:600; font-size:.9rem; }
.leader-coins { font-size:.85rem; color:var(--primary); font-weight:700; }

/* TRANSACTION LIST */
.txn-list { display:flex; flex-direction:column; gap:.4rem; }
.txn-item { display:flex; align-items:center; gap:.5rem; background:#fff; border-radius:var(--radius-sm); padding:.7rem .9rem; font-size:.85rem; border:1px solid var(--border); }
.txn-left { display:flex; align-items:center; gap:.5rem; flex:1; }
.txn-icon { font-size:1.2rem; }
.txn-desc { font-weight:500; display:block; }
.txn-time { font-size:.75rem; color:var(--text-muted); }
.txn-amt { font-weight:700; margin-left:auto; white-space:nowrap; }
.txn-amt.positive { color:var(--success); }
.txn-amt.negative { color:var(--danger); }

/* COOLDOWN BAR */
.cooldown-bar { margin-top:.8rem; }
.cooldown-fill { height:4px; background:var(--primary); border-radius:4px; animation:cooldown linear forwards; }
@keyframes cooldown { from{width:0%} to{width:100%} }

/* ANIMATIONS */
@keyframes popIn { from{transform:scale(.5);opacity:0} to{transform:scale(1);opacity:1} }
@keyframes bounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.6} }
.action-pulse { animation:pulse 1.5s infinite; }