/* === CREDITS STYLES === */
.credits-hero {
  background: linear-gradient(180deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
  padding: 4rem 0 2rem;
  border-bottom: 1px solid var(--border-color);
  position: relative; z-index: 1;
}
.credits-hero h1 { font-size: clamp(2rem,5vw,3.5rem); margin: 0.5rem 0 1rem; }
.credits-hero p { color: var(--text-secondary); font-size: 1.1rem; margin-bottom: 1.5rem; }
.current-balance {
  display: inline-flex; align-items: center; gap: 0.75rem;
  background: rgba(0,180,255,0.08); border: 1px solid rgba(0,180,255,0.2);
  border-radius: var(--radius-sm); padding: 0.6rem 1.25rem;
  font-weight: 600; font-size: 1rem;
}
.balance-val { color: var(--accent-blue); font-family: 'Orbitron',sans-serif; font-size: 1.1rem; font-weight:900; }

.how-works { padding: 2.5rem 0; background: var(--bg-secondary); border-top:1px solid var(--border-color); }
.how-steps {
  display: flex; align-items: center; justify-content: center;
  gap: 1rem; flex-wrap: wrap;
}
.how-step { text-align: center; max-width: 140px; }
.how-icon { font-size: 2.5rem; margin-bottom: 0.5rem; }
.how-step h4 { font-size: 0.9rem; margin-bottom: 0.25rem; }
.how-step p { font-size: 0.8rem; color: var(--text-muted); }
.how-arrow { color: var(--text-muted); font-size: 1.5rem; }

.credit-packages {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 1.5rem;
  margin-bottom: 3rem;
}
.credit-pkg {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 2rem 1.5rem;
  display: flex; flex-direction: column;
  align-items: center; gap: 1rem;
  text-align: center;
  transition: var(--transition);
  position: relative; overflow: hidden;
}
.credit-pkg:hover { border-color: var(--border-accent); transform: translateY(-4px); }
.popular-pkg {
  border-color: rgba(255,215,0,0.3);
  background: linear-gradient(180deg, rgba(255,215,0,0.05), var(--bg-card));
}
.pkg-label {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  background: var(--accent-gold); color: var(--bg-primary);
  font-size: 0.7rem; font-weight: 700;
  padding: 0.25rem 1rem; border-radius: 0 0 8px 8px;
  white-space: nowrap;
}
.pkg-amount { display: flex; align-items: center; gap: 0.5rem; }
.pkg-amount span { font-family:'Orbitron',sans-serif; font-size:1.6rem; font-weight:900; }
.pkg-bonus { font-size:0.85rem; color:var(--accent-green); font-weight:700; }
.bonus-big { font-size:1rem; }
.pkg-price { font-size:2rem; font-weight:900; font-family:'Orbitron',sans-serif; }
.pkg-desc { list-style:none; display:flex; flex-direction:column; gap:0.3rem; font-size:0.85rem; color:var(--text-muted); flex:1; }
.pkg-desc li::before { content:'✓ '; color:var(--accent-green); }

/* DAILY REWARD */
.daily-reward-section { background:var(--bg-card); border:1px solid var(--border-color); border-radius:var(--radius-lg); padding:2rem; margin-bottom:2rem; }
.daily-reward-card {
  display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
.dr-icon { font-size: 3rem; }
.dr-info { flex: 1; }
.dr-info h3 { font-size: 1.2rem; margin-bottom: 0.25rem; }
.dr-info p { color: var(--text-secondary); font-size: 0.9rem; }
.dr-streak { text-align: center; }
.dr-streak span { display:block; font-size:0.75rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:1px; }
.dr-streak strong { font-family:'Orbitron',sans-serif; font-size:2rem; color:var(--accent-gold); }

.streak-calendar {
  display: grid; grid-template-columns: repeat(7,1fr); gap: 0.5rem;
}
.streak-day {
  aspect-ratio: 1; border-radius: 6px;
  background: var(--bg-secondary); border: 1px solid var(--border-color);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: 0.7rem; color: var(--text-muted); cursor: pointer;
  transition: var(--transition);
}
.streak-day.done { background: rgba(0,255,136,0.15); border-color: var(--accent-green); color: var(--accent-green); }
.streak-day.today { border-color: var(--accent-gold); animation: pulse-border 1.5s ease-in-out infinite; }
.streak-day .day-reward { font-size: 1rem; margin-bottom: 2px; }

@keyframes pulse-border {
  0%,100% { box-shadow: 0 0 0 0 rgba(255,215,0,0.4); }
  50% { box-shadow: 0 0 0 4px rgba(255,215,0,0); }
}

/* EARN */
.earn-section { background:var(--bg-card); border:1px solid var(--border-color); border-radius:var(--radius-lg); padding:2rem; }
.earn-section h3 { margin-bottom:1.5rem; font-size:1.2rem; }
.earn-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; }
.earn-item {
  background: var(--bg-secondary); border: 1px solid var(--border-color);
  border-radius: var(--radius-sm); padding: 1.25rem;
  display: flex; align-items: center; gap: 1rem;
  cursor: pointer; transition: var(--transition);
}
.earn-item:hover { border-color: var(--border-accent); transform: translateY(-2px); }
.earn-icon { font-size: 2rem; flex-shrink:0; }
.earn-item strong { display:block; margin-bottom:0.2rem; }
.earn-item p { font-size:0.8rem; color:var(--text-muted); margin:0; }
.earn-reward { margin-left:auto; font-family:'Orbitron',sans-serif; font-size:0.9rem; font-weight:700; color:var(--accent-green); white-space:nowrap; }

/* PAYMENT */
.payment-summary { background:var(--bg-secondary); border-radius:var(--radius-sm); padding:1rem 1.25rem; margin-bottom:1.5rem; font-weight:600; }
.payment-methods { display:flex; gap:0.75rem; flex-wrap:wrap; }
.pay-method { display:flex; align-items:center; gap:0.5rem; background:var(--bg-secondary); border:1px solid var(--border-color); border-radius:var(--radius-sm); padding:0.6rem 1rem; cursor:pointer; transition:var(--transition); font-weight:600; font-size:0.9rem; }
.pay-method:has(input:checked) { border-color:var(--accent-green); background:rgba(0,255,136,0.08); color:var(--accent-green); }
.pay-method input { display:none; }

@media (max-width:900px) { .credit-packages { grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px) {
  .credit-packages { grid-template-columns:1fr; }
  .earn-grid { grid-template-columns:1fr; }
  .how-arrow { transform:rotate(90deg); }
}