body { font-family: Arial, sans-serif; background-color: #f5f5f5; margin: 0; padding: 0; } .container { max-width: 400px; margin: 20px auto; background-color: #fff; border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); padding: 20px; } .progress-section { margin-bottom: 20px; } .progress-item { margin-bottom: 15px; } .progress-item label { font-size: 14px; color: #333; margin-bottom: 5px; display: block; } .progress-bar { background-color: #e0e0e0; height: 10px; border-radius: 5px; position: relative; } .progress-fill { background-color: #007bff; height: 100%; border-radius: 5px; position: relative; } .progress-text { position: absolute; right: 5px; top: -20px; font-size: 12px; color: #333; } .stats-section { margin-bottom: 20px; } .stats-item { margin-bottom: 15px; } .stats-item p { font-size: 14px; color: #666; margin: 0; } .stats-item h3 { font-size: 16px; color: #333; margin: 5px 0; } .bonus-btn { background-color: #007bff; color: #fff; border: none; padding: 5px 10px; border-radius: 5px; font-size: 12px; cursor: pointer; } .profile-section { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; } .profile-pic { width: 40px; height: 40px; border-radius: 50%; border: 2px solid #00cc00; } .profile-section p { font-size: 14px; color: #333; margin: 0; } .footer { background-color: #ff8c00; color: #fff; text-align: center; padding: 10px; border-radius: 5px; } .footer p { margin: 0; font-size: 14px; }