* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: #0a0a0a; overflow-x: hidden; }

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #0a0a0a; }
::-webkit-scrollbar-thumb { background: #2a2a2a; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #3a3a3a; }

@keyframes pulse-green { 0%, 100% { color: #84cc16; } 50% { color: #a3e635; text-shadow: 0 0 20px rgba(132, 204, 22, 0.5); } }
@keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes confetti { 0% { transform: translateY(0) rotate(0deg); opacity: 1; } 100% { transform: translateY(-200px) rotate(720deg); opacity: 0; } }
@keyframes glitch { 0% { transform: translate(0); } 20% { transform: translate(-2px, 2px); } 40% { transform: translate(-2px, -2px); } 60% { transform: translate(2px, 2px); } 80% { transform: translate(2px, -2px); } 100% { transform: translate(0); } }
@keyframes scanline { 0% { background-position: 0 0; } 100% { background-position: 0 100%; } }
@keyframes tickUp { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes glow { 0%, 100% { box-shadow: 0 0 5px rgba(168, 85, 247, 0.3); } 50% { box-shadow: 0 0 20px rgba(168, 85, 247, 0.6); } }
@keyframes progressBar { from { width: 0; } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }

.animate-slideIn { animation: slideIn 0.3s ease-out; }
.animate-fadeIn { animation: fadeIn 0.4s ease-out; }
.animate-pulse-green { animation: pulse-green 1s ease-in-out 3; }
.animate-glitch { animation: glitch 0.3s ease-in-out; }
.animate-glow { animation: glow 2s ease-in-out infinite; }
.animate-shake { animation: shake 0.3s ease-in-out; }

.glass { background: rgba(26, 26, 26, 0.8); backdrop-filter: blur(10px); border: 1px solid rgba(42, 42, 42, 0.5); }
.card-hover { transition: all 0.2s ease; }
.card-hover:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(0,0,0,0.3); border-color: #3a3a3a; }

.scanlines { background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255,0,0,0.03) 2px, rgba(255,0,0,0.03) 4px); }

.progress-fill { animation: progressBar 2s ease-out; }

.btn-gradient { background: linear-gradient(135deg, #a855f7, #ec4899); transition: all 0.2s ease; }
.btn-gradient:hover { transform: scale(1.05); box-shadow: 0 0 20px rgba(168, 85, 247, 0.4); }
.btn-gradient:active { transform: scale(0.98); }

.btn-lime { background: linear-gradient(135deg, #84cc16, #65a30d); }
.btn-lime:hover { transform: scale(1.05); box-shadow: 0 0 20px rgba(132, 204, 22, 0.4); }

.btn-gold { background: linear-gradient(135deg, #eab308, #ca8a04); }
.btn-gold:hover { transform: scale(1.05); box-shadow: 0 0 20px rgba(234, 179, 8, 0.4); }

.btn-danger { background: linear-gradient(135deg, #ef4444, #dc2626); }
.btn-danger:hover { transform: scale(1.05); }

.reputation-bar { background: linear-gradient(90deg, #ef4444 0%, #eab308 50%, #84cc16 100%); }

.tab-active { border-bottom: 2px solid #a855f7; color: #a855f7; }

@media (max-width: 768px) {
  .sidebar-desktop { display: none !important; }
  .mobile-nav { display: flex !important; }
}
@media (min-width: 769px) {
  .mobile-nav { display: none !important; }
}